Hexo框架(十三):关于博客主题持续更新的问题和我的新配置方式

为什么使用next?

一方面是next的简洁深得我心,我一向喜欢这种极简的小清新风格,另一方面就是因为Next主题的用户量大,易于维护和定制,有很多优秀的自定义教程可供参考。

当然最重要的是因为,Next主题更新及时,维护者也很多,基本上隔一段时间就会有新的版本发布。

为什么要更新?

由于之前对Next进行了很多自定义的修改,包括对源码的一些修改,但我在看见Next发布新版本后,我就尝试了进行更新,但是出现了很多问题,因为对源码进行了修改,在使用 git pull 的方式来更新的时候,就会出现文件冲突,手动合并冲突真的是一件让人头疼且很累的事情。

当然,我们也可以选择不更新,就这么使用下去,但是很明显,这有悖于我的初心,作为一个开发者,我们应该让自己的代码是易于维护,另一方面在Next主题发布新版本时,必然会带来一些新的特性,而我更喜欢尝试新的东西。

所以这次,我对博客进行了一次重新配置,通过数据文件的方式,将配置和主题分离开来,同时也把自定义布局,样式等都放到数据文件中,避免对主题源码的修改,以便于后续的更新。

当然,大部分的配置你仍然可以参考我之前的文章,只不过稍微改动一下即可。这里只记录部分我新添加的改动。

V8.0版本后模板文件格式变更为了 njk

数据文件

自从 NexT-7.3.0 开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续 NexT 版本更新。

你可以点击 这里 来查看数据文件的详细介绍。

next.yml

我们可以将所有主题配置放在一个位置hexo/source/_data/next.yml。这样就无需编辑主题配置文件next/_config.yml

具体步骤:

  1. hexo/source/_data 目录中创建 next.yml(如果_data 不存在,则创建目录)。
  2. next.yml 设置 override 选项为 false。
  3. 我们需要的配置项从主题配置文件复制到 hexo/source/_data/next.yml 中。

然后我们只需要根据自己的需求配置 next.yml 即可。

languages.yml

我们原来是通过配置主题下的 languages 目录中的 zh-CN.yml 文件来对菜单等进行中文翻译的,现在我们可以通过在 hexo/source/_data/ 下新建数据文件 languages.yml,配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
zh-CN:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
message: 留言
links: 友情链接

reward:
donate: 打赏
wechatpay: 微信支付
alipay: 支付宝
paypal: 贝宝
bitcoin: 比特币

styles.styl

我们只需要把全部自定义样式放到 hexo/source/_data/styles.styl 即可。

然后在 NexT 的配置文件 next.yml 中取消 styles.styl 的注释:

1
2
custom_file_path:
style: source/_data/styles.styl

variables.styl

圆角设置

在自定义样式文件 variables.styl 中添加:

1
2
3
// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;

然后在 NexT 的配置文件 next.yml 中取消 variables.styl 的注释:

1
2
custom_file_path:
variables: source/_data/variables.styl

post-meta.swig

置顶文章标志

首先我们需要安装 hexo-generator-index-pin-top 这个插件。

然后将以下代码放入 hexo/source/_data/post-meta.swig 文件

1
2
3
4
5
6
{% if post.top %}
<span class="post-meta-divider">|</span>
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

然后在 Next的配置文件 next.yml 中取消 post-meta.swig 的注释:

1
2
custom_file_path:
post-meta: source/_data/post-meta.swig

JS文件

原本自己新建、定义的JS文件,比如点击特效等等,全部搬迁到 hexo/source/_date/js 文件夹下

其他的一些配置

你可以参考这篇文章:Next主题配置及美化 在大部分配置中,已经采用了数据文件的方式进行配置。

最后:

当然,为了不修改源码,原本还有一些自定义的修改,都被我摒弃掉了,不过影响也不大,你也可以尝试一下,这种配置的方法,这里我备份了一份我目前正在使用的配置方案,直接下载即可使用:https://github.com/constown/blog_back

参考资料:

版本更新记录

并感谢丁同学的指点:

------ 本文结束  感谢阅读 ------