设计个人博客网页
1分钟前
撰写贵州大数据集团产业数字化研究报告
2天前
撰写全栈生涯人物访谈报告
11月5日
查看图片内容
10月27日
设计个人博客网页

帮我设计一个个人博客网页

WorkBuddy
已完成 3m41s

个人博客已经设计完成,存放在 /workspace/blog/,共两个文件,均可在预览面板直接打开:

📄 文件说明

index.html — 首页(混合型个人站结构)

  • 首屏:衬线大标题「在留白处,写点慢的东西。」+ 一句自我介绍 + 「正在写作」状态指示
  • 01 最近写的:5 篇样例文章列表(日期 + 标题 + 摘要 + 标签),顶部有分类筛选(全部 / 随笔 / 技术 / 设计 / 生活),纯 JS 实现
  • 02 做过的东西:3 张作品卡片,封面是抽象几何 SVG,悬停微缩放
  • 03 关于我:头像 + 个人简介 + 「正在写 / 正在读 / 正在学」Now 列表
  • 04 在哪里找到我:邮件、GitHub、X、RSS 链接行
  • 通用:吸顶毛玻璃导航、深浅色模式切换(记忆偏好)、滚动入场动画、移动端响应式

post.html — 文章阅读页(样例文章《为什么我又开始用纸笔写代码计划》)

  • 顶部阅读进度条、衬线正文(18px / 1.95 行高的长文排版)
  • 完整的排版组件:引言块、有序列表、代码块、行内代码、图注、提示框、脚注式署名
  • 底部标签 + 「上一篇 / 下一篇」翻页导航

🎨 设计要点

  • 极简留白:暖白底(#FCFBF9)、1px 发丝分割线、黑白灰主色 + 衬线标题 / 无衬线正文的编辑感搭配
  • 零外部依赖:字体、图标(SVG)、封面图全部内置,离线打开也不缺资源,加载极快
  • 所有文字内容(站名「林一」、文章、作品)都是占位示例,直接在 HTML 里搜索替换即可改成你自己的

两页共用同一套设计变量,后续加新文章只需复制 post.html 改内容。如果想换配色、加评论/搜索功能,或改成基于 Hugo/Astro 的真实建站方案,随时告诉我。


今天帮你做些什么?@ 添加上下文,/调用技能与指令

内容由 AI 生成,请核实重要信息
引用来源 (0)