关于本站

为什么要做个人网站

因为想做，所以就做了。

我想有一个能展示自己的平台，而大概没有什么比一个独属于自己的网站更酷了吧。另一方面，我也想把它当作一个练习场，用来尝试和展示我头脑中的一些 UI/UX 设计灵感（不过目前还没放上来）。最后，当然也想通过写博客记录一些想法和生活——虽然不确定能否坚持，但这里总归是一个比社交媒体更自在的地方。

为什么不用现成的博客框架和模板

如前面所说，我主要是想有一个能完全按自己想法设计和实现的空间来展示自己，博客并不是重点。我不想被禁锢在专为博客设计的模式里，也不希望被别人的页面框架拘束手脚。当然，本网站目前的 UI 参考了多个优秀网站的设计，但我可以自由选用和改造这些元素，而不用被某个特定模板束缚。

参考和借鉴

• fuwari：一个超级有影响力的开源博客模板，许多模板或是直接基于fuwari修改，或是参考了fuwari的风格。本站整体的设计和布局都受到了fuwari的启发。
• astro-koharu：一个astro博客主题，本站页面的信息排版和细节处理有参考该项目，同时本站默认封面图是直接从该项目照搬而来。
• apple.com：本项目的设计也受到苹果、Openai官网等同类简洁优雅网站的启发。
• 多年来浏览并被潜移默化影响过的诸多站点（如bilibili、知乎）

现在有什么

目前本站主要包括这些部分和功能：

• hero区：一个醒目到有些浮夸的门面，向访客问好："Hi, I'm Leisuer"。文字背景来源于本人所拍摄的照片，有循环位移的动画效果。
• 站点名片和索引
• markdown及其扩展功能支持
• 文章目录和阅读进度追踪
• 响应式布局和移动端适配：为不同尺寸和比例的设备分别设计布局样式
• 移动端菜单栏：包含了导航栏、站点名片索引和文章目录的功能用以作为替代
• 归档：按时间整理所有文章
• 分类和标签：按主题整理文章
• 收藏：放一些也许会有用的网站
• 友链：保留和其他站点之间的连接
• 搜索：快速找到内容
• 随机推荐
• i18n：简中、繁中、英文、日语四种语言支持
• 暗黑模式：可以在亮色和暗色主题之间切换，且有丝滑的过渡动画
• 丝滑的过渡动画和细节交互
• 背景的鼠标追踪视差动画
• 背景樱花飘落css动画

技术实现

本站基于 Nuxt 4 开发，内容部分使用 Nuxt Content 管理。样式方面主要使用 Tailwind CSS v4 和少量按模块拆分的 CSS。

内容检索和整理主要依赖 Nuxt Content 的查询能力。归档按发布时间分组，分类和标签会从文章 frontmatter 中自动统计生成；搜索则基于 Nuxt Content 的搜索 section 数据，在本地对标题、正文、路径、分类和标签做匹配与排序。这样新增文章时，只要 frontmatter 写对，相关页面就会自动更新。

未来计划

• 添加页面切换加载动画
• 持续发文
• 优化细节
• 更完美的静态生成或对接后端
• 文章切换上一篇下一篇
• 评论区
• RSS订阅