博客迁移至 VuePress

NoneData 的新域名和新前端设计启用了，这次首次从动态生成内容的网站换到的静态网站，选择的还是我熟悉的Vue平台。确实就如 VuePress 官网上 所说，对于一个个人博客类网站来说，直接使用 Nuxt.js确实有些太大材小用了。之前的 Lareina 就是基于 Nuxt.js 开发的一套CMS系统，主要还是 自己当时的兴趣所在，重写了 WordPress 的大多数功能，包括实现了后台管理、评论和邮件通知系统等。但当时更多的是我的练手制作，很多方面存在不足， 在版本的维护上也存在诸多困难，所以用着用着就很难有继续维护的动力了。所以这次选择了更加轻量化的 VuePress 2，同时拥有 Vue 3 的新特性和灵活性， 可以更多的把重点集中在内容上。

为什么不是 ...?

Nuxt Nuxt 是一套出色的 Vue SSR 框架， VuePress 能做的事情，Nuxt 实际上也同样能够胜任。但 Nuxt 是为构建应用程序而生的，而 VuePress 则更为轻量化并且专注在以内容为中心的静态网站上。

VitePress VitePress 是 VuePress 的孪生兄弟，它同样由 Vue.js 团队创建和维护。 VitePress 甚至比 VuePress 要更轻更快，但它在灵活性和可配置性上作出了一些让步，比如它不支持插件系统。当然，如果你没有进阶的定制化需求， VitePress 已经足够支持你将你的内容部署到线上。

这个比喻可能不是很恰当，但是你可以把 VuePress 和 VitePress 的关系看作 Laravel 和 Lumen 。

Docsify / Docute 这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！

Hexo Hexo 一直驱动着 Vue 2.x 的文档。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互。同时，Hexo 在配置 Markdown 渲染方面的灵活性也不是最佳的。

GitBook 过去我们的子项目文档一直都在使用 GitBook 。 GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。

设计理念

目前体验下来，VuePress 基本可以满足我的所有需求，静态网站最常面临评论系统和搜索功能，分别使用twikoo和自己编写插件解决了（虽然官方自带了两个搜索插件，但是 我还是更习惯自己写一个）。且 VuePress 自带了一个比较耐看的主题，默认主题虽然比较偏文档类，但是经过我的魔改，已经表现的很符合我的需求了。

设计上还是专注于简洁单栏主题，在大体设计上和原先本站的主题没有太大区别，还是以卡片类为主。

开发上基于 VuePress 2 的默认主题进行 extending 开发。这个继承功能属实舒适，本人在主题开发过程中，基本上一路绿灯，很快就完成了主体设计。

以下说下主要实现的功能：

• 顶部自定义图片及描述设计
• 卡片化设计
• 文章分页（带路径更新）
• 文章预览（可手动关闭，在小屏幕下自动禁用，支持方向键操作）
• 多种主题色
• 多种字体搭配
• 自动黑暗主题
• 控制面板（集成本地搜索功能，快捷键功能，可添加更多页面链接或者功能操作）
• 评论功能（基于twikoo）
• 文章密码
• 文章信息（浏览量基于twikoo，阅读时间估计，文章目录，阅读进度，图片异步加载）
• 文章内容（查看大图功能、各类标注、脚注等）
• 可关闭单篇文章评论
• 更多文章推荐
• RSS
• SiteMap
• PWA
• 全自动部署

数据迁移

由于之前的 Lareina 已经是基于 MarkDown 格式储存的日志了，所以只需要把内容从数据库中导出即可。写了个python脚本，很快处理完毕。 评论数据的迁移就比较头大了，主要要处理评论的勾稽关系。现在用的twikoo也不是很清楚导入的格式数据。等之后再慢慢研究导入。

最近逛了一圈大家的博客，发现好少有用 VuePress 建站的（捂脸。静态的基本还是Hexo为主。

网站评分

TODO

在该版本后的所有修改均在 todo 中显示：

• 文章图库功能、文章图片描述功能
• 文章列表会自动使用题图主题色作为阴影色
• 更好看的引用样式
• 更安全的文章加密（密码只储存在文章MD文件中，基于MD5与AES加密后发布，杜绝通过网页代码查看原文）
• 数学公式支持（自动判断，仅在有数学公式的页面按需加载katex）
• 代码复制按钮
• 首页公告
• Bionic Reading
• 修改字体样式
• 更多短代码样式(添加了常用的 进度条，时间线，选项卡，Github卡片)
• 优化代码结构