更新 Next 主题至最新版

Posted on

在这个 Hexo 博客上用的是流行的 Next 主题，偶然看到这个项目依然在更新，而我用的还是好几年前的版本。虽没什么影响，也没关注更新了什么，不过本着用新不用旧的原则，还是决定更新到最新版。

更新主题大体上有两种方法，一种是通过 npm 更新，另一种是通过 Git 来更新，具体用哪种方法取决于当初安装时是用的 npm 还是Git。

通过 npm 更新

进入 Hexo 博客根目录：打开终端，并切换到 Hexo 项目的文件夹。

更新主题包：执行以下命令，将 hexo-theme-next 包更新到最新版本：

1
npm install hexo-theme-next@latest

清理并重新生成：更新完成后，最好清理一下旧的缓存和生成文件，然后重新生成网站：

1
2
hexo clean
hexo g

预览网站：启动本地 Hexo 服务器来预览更改，确保一切显示正常：

1
hexo s

打开浏览器并访问 http://localhost:4000 来检查效果。

通过git更新

如果当初是从 GitHub 仓库克隆（clone）的 NexT 主题，更新需要通过 Git 命令来完成。

  1. 进入主题目录：打开终端，进入 Hexo 博客根目录下的 themes/next 文件夹。

    1
    cd themes/next

  2. 拉取最新更改：从 NexT 的官方仓库获取并合并最新的更新：

    1
    git pull

    注意：如果曾直接修改过主题文件，可能会遇到合并冲突（merge conflicts）。最好提前将自定义配置分离出来，以避免此类问题。

  3. 清理、重新生成并预览：与 npm 方法类似，在拉取更新后，回到博客的根目录并运行以下命令：

    1
    2
    3
    4
    cd ../..
    hexo clean
    hexo g
    hexo s

    然后，在浏览器中预览效果。

如何管理自定义配置

直接修改主题文件夹内的默认配置文件 (_config.yml) 会在更新时带来麻烦。Next官方推荐的最佳实践是使用“备用主题配置文件”。

  1. 创建自定义配置文件：在 Hexo 博客的 根目录 下，创建一个名为 _config.next.yml 的新文件。

  2. 复制并自定义：将需要覆盖的主题配置从 themes/next/_config.yml 文件中复制到新建的 _config.next.yml 文件中，并进行修改。这样做可以将自定义配置与主题的核心文件分离开。

  3. 在主配置文件中引用：在 Hexo 的主配置文件（根目录下的 _config.yml）中，确保 theme 的值设置为 next。自定义配置会自动被加载。

    1
    2
    # _config.yml (博客根目录)
    theme: next

    通过这种方式，即使在更新主题后，个性化设置也会被保留，因为没有改动主题的原始文件。

我是如何更新的

我当初是通过GitHub安装的，按理说应该通过 Git 来更新。但是我隐约记得安装时由于 hexo 是部署在 GitHub Pages上，并且也备份在同步个仓库里的 main 分支上，而 Next 主题也是通过 Git 安装，仓库套仓库在备份时造成了一些冲突，还专门创建了一个文件来避免这个问题，所以怕用 Git 更新会带来问题。

所以想着干脆重新用 npm 的方法安装一遍，以后用 npm 更新，比较省心。

  1. 按上一章节内容备份自定义配置文件。

  2. 删除 themes\next 文件夹。

  3. 终端进入博客根目录，执行一下命令安装最新版 Next 主题。

    1
    npm install hexo-theme-next@latest

后面就是一样的清理、重新生成、本地预览操作了。

npm 安装与 Git 安装有何不同

用 Git clone 安装时，主题文件夹被放在themes文件夹下，是 themes\next 这样的结构，而用 npm 安装则是将 NexT 主题作为一个标准的“程序包”或“依赖项”来安装。所有通过 npm 安装的包，都会被统一存放在项目根目录下一个叫做 node_modules 的文件夹里，**themes**文件夹就空了。

后面再找时间看看这个跨越好几年的版本有何不同，有没有新的值得折腾的地方。