写在博客之前

博客的开端

相遇MarkDown

2023年4月的某个早上，在某不知名学校的工作室里，正无聊地刷着《C++Primer》章节习题的我，偶然瞥见旁边的朋友正用着一种新奇的语言编写着自己的学习笔记。简单的几个标记符号就能写出排版优雅、内容美观的文档，询问几番便快速找到了markdown的相关资料，由此便开始在obsidian上记录一些Qt，计算机基础的学习经验并同步在github上。这大概就是我写博客的最早阶段，虽然并没有正经地发布到类似掘金的平台上就是了。

Web入坑深似海

在互联网的汪洋大海里搜索资料会不时碰到一些有趣的个人网站。印象里第一个访问的个人站点是某个写着BMS¹入坑指南的地方，里面还有不少有关Python和机器学习的文章，能拥有这样一个可以进行知识记录的网站实在是一件很酷的事情，于是我就开始了学习Web开发的道路。最初必然是选择MDN进行前端基础的学习，Guides页面配有详细的入坑食用指南，看到web表单并完成全部习题后，再继续Vue客户端框架的学习基本上一路通畅。框架极大地简化了页面的开发效率，也带来了不少要学习的新东西，诸如目录结构规范，构建与打包工具，css预编译器，以及各种插件配置和包管理，不禁感叹轮子真是太多了。

在不断的摸索中我也通过Vue和NodeJS实现了第一个全栈项目，一个极度简陋的博客网站，前端仅有一个展示页面和一个管理页面，后端则是常见的增删改查加上模糊搜索、分页与文件上传功能。好吧，第一个练手的实验性项目我也不苛求太多，开始部署，然而不出几个星期我就没有使用下去的欲望了。首屏启动缓慢、SEO优化困难实在是致命的缺点，再加上使用NaiveUI组件库的页面过于简陋，以及自己堆出来的复杂样式不便修改，お前はもう死んでいる。

新的技术选型

在求助某GPT后，我开始有了一个新的前端重构计划，列举下当时进行琢磨的技术清单。

SSG/SSR

Nuxt

类似Next的Vue开发框架，支持SSG/SSR

初略通读过官网的开发文档，自动化和约定方面的特性非常有意思，更加规范项目的感觉。起初我想将原本的前端页面通过Nuxt进行重构，后端接口沿用原来的一套。

VitePress

由Vite和Vue驱动的静态站点生成器

主要面向静态文档站点的优秀框架，对博客也有不错的支持，Vue的官方文档也是使用这个编写的。然而访问过不少使用VitePress的博客，感觉并不能很好地满足我的需求。

CSS框架

Tailwindcss

一个原子化css框架

直接在HTML标签中嵌入原子化样式，还没怎么看文档就能想象到一个标签内嵌超长class， 外加各种属性的情形了，不太适合用于编写复杂样式。

SCSS

sass-lang.com

首选框架，兼容性良好，提供了@mixin，变量，嵌套等诸多功能，不需要太多额外的学习成本就能轻易上手，能很好地兼顾维护与减少样式代码。

定好大致方向后，我开始查找起相关的资料。 偶然在RestentOu的博客上看到了一个强大的Nuxt模块,NuxtContent。它允许在 Nuxt 应用中使用 Markdown 或 JSON 等格式来存储和处理内容,甚至提供了查询接口，还能够使用Vue组件进行客制化，结合了Nuxt和VitePress的优势。

二话不说我就跟写的后端接口说再见了，全面拥抱静态博客。同样是机缘巧合之下我通过RestentOu的友链访问到了纸🦌，很眼熟？哈哈，就是本博客的原主。

开源博客的二次开发

书接上回

浏览过各种同质化的Hexo主题博客，看到纸🦌的博客后瞬间让我眼前一亮，简洁而又不失设计的页面有种让人想要阅读并一探究竟的欲望，在评论区留言并了解到开源地址后便fork了源码进行详细学习。由于之前已经通读过Nuxt的文档，加上强大的Ai助力，理解整个项目的代码并没有多大的阻碍。加上纸🦌编写了详细的目录指南和使用示例，我大致花了3天左右将所有的组件功能和配置项都一一摸透，只能说收获颇丰，也让我决定使用现有的源码来部署博客。

搬迁开始

在清除大部分数据仅保留博客网站本体后我开始了自定义之路。博客的基础功能比较全面，但是缺少了分类功能，在开关store上添加分类开关，辅以一个分类组件，一点点弹跳的spring动画、背景透明度、高斯模糊，一个还算好看的分类开关就完成了。然后就是对展示的文章数据进行分类过滤，起初我选择利用store的变化添加动态的查询语句，本地开发环境一切正常，一旦启动SSG就疯狂bug。F12一探究竟才发觉自己犯了致命错误，查询语句被浏览器当成了向服务器发起的get请求，然而我当然也煤油提供查询接口啊。

根本原因在于SSG时，所有的数据都是在服务端编译时一次性生成，看似类似数据库的操作实则大不相同。无法进行动态查询便只能一次性查询全部数据，然后通过过滤筛查进行分门别类。

专栏页面

搞定了文章的分类，我还需要一个全新的页面可以专注于更细致的划分，放置一个系列的博文，例如不久前编写的minivue源码实现。在分类的配置中添加专栏分类，然后新增主页面、动态子页面，在content文件夹下添加存放专栏的文件夹。数据查询我选择利用已有的categories配置项，再新增一个columns配置项，当categories的主分类名为专栏，且第二个分类名在columns中存在时将会作为专栏博文被查询到，然后渲染到对应的专栏列表。同时我为专栏博文新增了一个showInPage字段以控制该文章是否展示在page页面，大致的功能也比较符合预期。

细碎的小功能

也许有违原作者的设计原则，我使用canvas绘制了一个全局飘雪动画，在浅色模式下并不明显，在一些图片上面会出现细小的雪，颇有点美感？老老实实加了个开关。

文章目录的滚动进度指示条，我觉得还行。

主页的时间显示，灵感来源自某个博客。

markdown添加了页脚插件。

......

未来展望

花在建站上的时间还是太多了，内容产出才是重点，要努力更新博客了。大概会在这个开源博客上扎根吧，(^_^)，魔改永远在路上。