本站为什么要从 Hexo 迁移到 Nuxt

本站为什么要从 Hexo 迁移到 Nuxt

从12月份开始翻译一些技术文章开始,之前使用的Hexo-Stellar-theme主题就开始变的力不从心了。主要是由于Hexo的原因,一些现代的代码高亮插件无法使用。而当前使用的主题和Hexo版本相比,有以下的对比:

Hexo版本的优点

  1. 配置简单,部署方便
  2. 主题丰富,并且当前使用的主题Stellar功能强大

Nuxt版本的优点

  1. 基本复刻了Stellar的部分样式,美观大气,对我来说基本够用
  2. 支持更加友好的代码高亮
  3. 使用Nuxt3,我比较熟悉
  4. 对于前端程序员来说,更加好的是可以快速的按需求更新更多页面。对比 hexo 需要使用 ejs 来扩展,Nuxt 扩展新功能是太方便了。

由于我写的大部分文章都是技术相关的,所以良好的代码高亮的支持对我来说是很有必要的,之前使用的主题虽然支持代码高亮,但是效果并不理想,而且Nuxt3版本在想要改动一些样式的时候更加方便。所以决定迁移到Nuxt。

至于部署的问题,在工作中我已经积累了一些经验,所以迁移到Nuxt之后,部署的问题应该不是问题。

【2025/06/18】升级至 Nuxt Content v3

Nuxt Content v3 发布已经有一段时间了。纸鹿兄好像并没有升级的打算,我自己就在他的博客模板上升级了。

以下是遇到的一些坑,可能会对你有帮助:

迁移需要注意

  1. nuxt.config.ts 中的 content 配置需要修改
  2. 你需要构建一个 content.config.ts 文件,这个文件是 Nuxt Content v3 的配置文件,里面需要配置你的内容目录和数据结构
  3. 查询部分都发生了改变,你需要查看官方迁移指南
  4. search部分全部改变,使用 queryCollectionSearchSections 来查询指定的集合,你可以查看全文搜索
  5. 文章的查询需要使用 queryCollection 来查询指定的集合
  6. findSurround 废弃,你可以使用 queryCollectionItemSurroundings 替代,官方迁移指南中有说明
  7. ContentRendererMarkdown 组件废弃,你可以使用 ContentRenderer 替代,参数无需改动
  8. ContentRenderer 内部的渲染组件需要移至 ContentRenderer 组件外

部署部分的问题

  1. GitHub Actions部署后报错,需要检查你的 Nodejs 版本,在 GitHub Actions 和服务器的 Node 版本都应该为最新的长期支持版(我使用的是 22.x版本)
  2. 在服务器上,你可能遇到服务启动了但是数据查不到,这时候你可以停止一下服务,删除所有文件并重新发布
  3. 本地可能没有 better-sqlite3 的依赖,你需要在项目中手动安装它
为什么升级至 Nuxt Content v3?
翻译:Vue 3 中的动态 Pinia Store

评论区

评论加载中...