Hexo Theme NexT 主题个性化配置最佳实践

一般情况下，当我们在使用 Hexo 的 NexT 主题时，都希望把博客改造成自己喜欢的风格。NexT 主题经过不断的迭代积累，目前提供了非常丰富的配置来满足使用者的个性化需求。

经过一段时间的摸索，我总结了一些有关 NexT 主题配置的最佳实践方案，能够优雅的对博客进行个性化改造及持续升级。核心思想就是，使用官方的推荐的方式配置主题，多挖掘博客自带的功能，尽可能少得修改源码。下面分享我的做法。

版本

• Hexo 3.9.0
• NexT 7.2.0

一些踩过的坑

目前，网上有很多 Hexo NexT 个性化配置资料，比如像 博客的美化配置（NexT主题） 这样的方案。

起初，我根据自己的需要按照上面博客里的方法进行配置是没什么太大问题的。但是当我尝试升级 NexT 主题的时候，问题就来了。上述博客里的方案，很多功能的实现需要修改 NexT 源码，当 pull NexT 最新代码与本地分支 merge 时，会产生大量的冲突，非常不方便。

后来经过查阅官方博客 NexT - Docs，我发现随着 NexT 版本的迭代，现如今的 NexT 已经集成了很多上面博客里提到的功能，我们通过修改配置文件即可使用，绝大部分的功能已经不再需要修改源码实现了。

另外，NexT 也建议大家使用 Hexo 官方推荐的 Data Files 系统（Hexo 3.x 即以上）来分离个人配置，稍后我会详细介绍。这样就可以在尽可能少地修改 NexT 工程代码的情况下进行个性化配置，方便主题升级。

改造前的工作

在 hexo 和 next 的根目录下，都存在一个叫做 _config.yml 的配置文件。在改造之前，让我们来规定一下两个文件的叫法以方便区分。

• hexo/_config.yml：site config file
• next/_config.yml：theme config file

Clone NexT

直接把 NexT 工程从 GitHub 上克隆下来放在 Hexo 的 theme/next 中，这样方便未来主题的升级工作。

NexT 工程地址：hexo-theme-next

个性化配置分离

如果能把个性化的配置内容分离出来，也就是说在其他地方通过某种方式配置个性化的设置而不直接修改主题的 theme config file 的话，那么我们在 pull 最新的 NexT 代码时，就不会对 theme config file 产生冲突。

NexT 官方博客中的 Data Files 一文详细说明了如果使用 Data Files 系统进行个性化配置。

不过 Data Files 需要 Hexo 的版本在 3.x 之上，所以文中提供两种配置方法供大家选择。

Hexo 2.x

如果是 Hexo 2.x 版本（当然 3.x 也支持这种方式），可以通过在 site config file 中编写主题的配置，而不需要修改 theme config file，也不需要添加任何新的文件。

步骤：

1. 检查一下是否存在 hexo/source/_data/next.yml 文件，如果存在则删除。
2. 在 site config file 添加 theme_config: 节点。
3. 需要修改的配置内容从 theme config file 文件中拷贝到 site config file 的 theme_config: 节点下。注意缩进。

Hexo 3.x

如果是 Hexo 3.x 的话，可以将 theme config file 需要修改的配置放入 hexo/source/_data/next.yml 中，不需要修改 theme config file。

步骤：

1. 确定是否使用的是 Hexo 3.x 及以上的版本。
2. 在 hexo/source/_data/ 目录中新建 next.yml 文件（如果 _data 文件夹不存在，则新建一个）。
3. 如果 next.yml 中设置 override: false，那么只需要将需要的配置项从 site config file 和 theme config file 文件中拷贝过来。
4. 如果 next.yml 中设置 override: ture，那么需要将所有 theme config file 中的内容拷贝过来。

个性化改造

有关配置文件各项配置的使用，官方博客 NexT - Docs 中给出了详细的阐述，这里我只记录了一些比较好玩的功能。有关博客名称、头像等这种基本配置我就不再说明了。

第三方库使用 CDN

第三方库可以放在 next/source/lib/ 目录下，也可以使用 CDN 在加载这些库。如果想要减少服务器流量压力的话，可以通过配置 CDN 地址，使第三方库通过 CDN 加载，提高站点打开速度。

NexT 提供了 CDN 的配置地址，并给出了推荐的 URL，例子如下。

# Script Vendors. Set a CDN address for the vendor you want to customize.
# Be aware that you would better use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 3.4.1
  # Example:
  # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  # jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  jquery:

  # Internal version: 4.7.0
  # See: https://fontawesome.com
  # Example:
  # fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
  # fontawesome: //cdnjs.cloudflare.co