Hexo博客之主题美化

article/2025/9/24 18:42:09

在这里插入图片描述
据说 NexT 是使用最多的Hexo主题，原因当然是比较漂亮啦！这个项目托管于github上，你可以fork一下，贡献代码。NexT官网上面给出了详细的主题配置过程，这里只是我的博客使用的一些配置以及NexT网站上配置中需要补充的部分。如果你是从头开始配置，请参考NexT官网。这篇文章介绍NexT主题的主题配置、第三方服务、内建标签、个性化设置等，通过这篇文章你就可以让你的博客个性十足奥！

站点配置文件：.config.yml 位置：站点根目录下（主要用于Hexo相关配置的选项）
主题配置文件：.config.yml 位置：主题目录下（主要用于配置主题相关的选项）

主题配置

显示RSS

NexT 中 RSS 有三个设置选项，满足特定的使用场景。更改主题配置文件，设定 rss 字段的值：

false：禁用 RSS，不在页面上显示RSS连接。
留空：使用 Hexo 生成的 Feed 链接。你可以需要先安装 hexo-generator-feed插件。
具体的链接地址：适用于已经烧制过 Feed 的情形。

我们这里选择使用 Hexo 生成的 Feed 链接，进入博客所在文件夹，执行以下命令安装该插件：

npm install hexo-generator-feed --save

可能别的博客与我写的不一样，需要配置一些文件。但是我做过实验，只要安装好该插件，重新生成和部署，就可以显示RSS。

侧边栏社交图标设置

NexT网站已经告诉我们如何为博客添加社交链接并设定链接图标，但是我们国内一些常用的社交网站如知乎、豆瓣等在 Font Awesome 图标库中没有对应的图标，结果就是我们添加的这些社交链接图标都是默认的。在主题配置文件中，设定链接图标对应的字段是 social_icons，其键值格式是 匹配键名: 图标名称， 图标名称 就是对应的 Font Awesome 图标的名字（不必带 fa- 前缀）。实现方法：到 Font Awesome 图标库中找寻找喜爱的图标，复制图标的名字替换下面代码箭头处的默认图标名字即可。如下所示：

social:GitHub: https://github.com/username知乎: https://www.zhihu.com/people/feng-di-54-18/activitiessocial_icons:enable: trueicons_only: falsetransition: false# Icon Mappings.# KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesomeGitHub: github  <---知乎: heart-o   <---

更改内容区域宽度

浏览文章时发现页面两侧的空白太多，导致文章的宽度比较窄，一行代码如果显示不完整的话，就需要左右拖动才能查看整行代码，对于代码比较多的文章看起来就会比较累。因此可以改变内容区域的宽度，NexT 对于内容的宽度的设定如下：

700px，当屏幕宽度 < 1600px
900px，当屏幕宽度 >= 1600px
移动设备下，宽度自适应

如果你需要修改内容的宽度，需要编辑样式文件。编辑主题的 source/css/_variables/custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px   // 我的为800px，自己调整测试即可// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

注意：此方法不适用于 Pisces Scheme，关于如何修改 Pisces Scheme 的宽度请参看 Issue。

第三方服务

评论系统

NexT支持多款评论系统，其网站给了五个评论系统，除此之外还支持多说、畅言等评论系统。就网站给出的五个评论系统来说，推荐使用DISQUS或者来必力，设置都比较简单。网易云跟帖相当好用，而且在国内，加载速度较快，但是八月一日被官方关闭。

DISQUS

支持DISQUS、Google、twitter、Facebook等账户登录评论，也可设置匿名评论，只需要输入名字和邮箱即可。

登录 DISQUS ，网站会引导你添加一个站点进行配置，在其Settings中的General选项中，找到shortname。
编辑主题配置文件，将 disqus 下的 enable 设定为 true，同时提供您的 shortname。count 用于指定是否显示评论数量。
```
disqus:enable: falseshortname:count: true
```

来比力

韩国产品，支持QQ、微信、百度、微博、Github、Google、Facebook、twitter等多个国内外账户登录，无导入评论功能。

登陆来比力，选择安装 LiveRe City 版，添加站点，在其管理页面的代码管理中获取你的 LiveRe UID 。
编辑主题配置文件，编辑 livere_uid 字段，设置如下：
```
livere_uid: #your livere_uid
```

数据统计分析

NexT提供多种数据统计与分析系统，可以实现对网站的访客、流量、文章评论数及浏览量进行统计，推荐使用百度统计与LeanCloud。

百度统计

百度统计是百度推出的一款免费的专业网站流量分析工具，可以帮助用户改善访客在用户的网站上的使用体验，不断提升网站的投资回报率。目前百度统计提供的功能包括：趋势分析、来源分析、页面分析、访客分析、定制分析等多种统计分析服务。实现方法：

登录百度统计，定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id
编辑主题配置文件，修改字段 baidu_analytics，值设置成百度统计脚本 id

LeanCloud

通过 LeanCloud提供的JavaScript SDK 功能实现文章阅读量统计。

实现方法：请查看为NexT主题添加文章阅读量统计功能

内容分享服务

推荐JiaThis，可以将文章分享到很多平台。

JiaThis

编辑主题配置文件，添加/修改字段 jiathis，值为 true。

# JiaThis 分享服务
jiathis: true

搜索服务

Local Search

添加百度/谷歌/本地自定义站点内容搜索，PC段表现正常，在手机端搜索框显示正常，点击无反应。

安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：
```
npm install hexo-generator-searchdb --save
```
编辑站点配置文件，新增以下内容到任意位置：
```
search:path: search.xmlfield: postformat: htmllimit: 10000
```
编辑主题配置文件，启用本地搜索功能：
```
# Local search
local_search:enable: true
```

内建标签

文本居中的引用

此标签将生成一个带上下分割线的引用，同时引用内文本将自动居中。文本居中时，多行文本若长度不等，视觉上会显得不对称，因此建议在引用单行文本的场景下使用。例如作为文章开篇引用或者结束语之前的总结引用。

使用方式：

HTML方式：使用这种方式时，给 img 添加属性 class="blockquote-center" 即可。
标签方式：使用 centerquote 或者简写 cq。

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote