（Ⅱ）NexT主题的优化定制修改指南-白红宇

写在前面

(1) 什么是 Hexo：

(2) Hexo 官网：

(3) Hexo 主题的选择：

官网：

GitHub：

知乎：

本人使用的版本为：

nodejs：v8.10.0npm：5.6.0  #命令 npm -v 可以查看到NexT主题版本：5.1.4  #打开站点配置文件_config.yml搜索version可以找到复制代码

hexo version 的信息如下：

hexo-cli:1.1.0os:Windows_NT 6.1.7601 win32 x64http_parser:2.7.0node:8.10.0v8:6.2.414.50uv:1.19.1z1ib:1.2.11ares:1.10.1-DEU modules:57nghttp2:1.25.0openss1:1.0.2n icu:60.1unicode:10.0cldr:32.0tz:2017c复制代码

一、主题基本配置

关于博客主题的选择问题，考虑了很久一直决定不下来选哪个主题合适，在尝试了多个觉得不错的主题之后，最终还是决定选择 GitHub 最多 star 的 NexT 主题了。有那么多人在用，普遍大众应该还是很认可的。NexT 主题版本更新日志和下载： |

关于这个主题的相关配置、优化定制网上容易找到非常多的资料，但基本的配置，还是建议直接看官方文章：

（ NexT 主题 GitHub 上其 wiki 页面关于主题设置教程）

本文会介绍 NexT 主题大部分的基本配置修改以及优化定制博客。

网上比较全面的修改指南，供参考：

2016-04-07

2018-05-01

2017-05-24

……

(0) 主题设置/动态背景/显示当前浏览进度

(1) 主题设置

主题设定：打开主题配置文件，搜索 scheme 关键字。你会看到有四行 scheme 的配置。我选择了 scheme: Pisces，下面是我的设置：

# Schemes#scheme: Muse#scheme: Mistscheme: Pisces#scheme: Gemini复制代码

Muse：默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白

Mist：Muse 的紧凑版本，整洁有序的单栏外观

Pisces：双栏 Scheme，小家碧玉似的清新

Gemini：左侧网站信息及目录，块+片段结构布局

(2) 动态背景

目前 NexT 主题有 4 种动态背景：

Canvas-nestthree_wavescanvas_linescanvas_sphere复制代码

设置方法很简单，直接设置里需要的动态背景为true。

(3) 显示当前浏览进度

修改themes/next/_config.yml， scrollpercent 值由 false 改为 true：

# Scroll percent label in b2t buttonscrollpercent: true复制代码

(1) 关于文章所属「分类」和「标签」的设置

之前我使用的别的主题，只要在 source 文件夹下新建的文章前面按如下格式表明所属分类和标签：

title: 自学编程成功概率有多少可能date: 2017-05-26 19:57:47tags: [编程,感悟]categories: 技术 复制代码

但是在 NexT 主题下的设置的步骤如下：

先hexo new page categories新建 categorier 文件夹，其中会自动生成一个index.md文件，修改（即添加一行）为：

---title: categoriesdate: 2018-01-23 17:14:51type: "categories"---复制代码

同理，「标签」也一样，hexo new page tags，生成 tags 文件夹，其中会自动生成一个index.md文件，修改为：

---title: tagsdate: 2018-01-23 17:14:51type: "tags"---复制代码

然后写的博客文章，表明所属「分类」和拥有哪些「标签」，官方文档所说的格式如下：

categories:- Diarytags:- PS3- Games复制代码

但是我亲测，如下也是可以的：

categories: 技术tags: [编程,感悟]复制代码

另外，对于 NexT 这个主题，对于「关于」这个菜单和上面新建分类和标签一样，也是需要手动创建文件夹的，hexo new page about，这样会生成 about 文件夹，同时自动生成index.md文件，然后可以在这个.md文件中写上自我个人介绍。（亲测过，index.md这个文件的名字不能修改，否则「关于」菜单出错）

关于这部分的设置，官方文档称其为「Front-matter」，「Front-matter」是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---title: Hello Worlddate: 2013/7/13 20:46:25---复制代码

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数	描述	默认值
layout	布局
title	标题
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章网址

(2) 添加本地添加搜索菜单

安装 hexo-generator-searchdb 插件：npm install hexo-generator-searchdb --save

打开站点配置文件找到 Extensions 在下面添加（其实，新增以下内容到任意位置即可）

search:      path: search.xml      field: post      format: html      limit: 10000复制代码

打开主题配置文件找到 Local search，将 enable 设置为 true，启动本地搜索功能，这样就能在页面可以看到搜索菜单了：

# Local searchlocal_search:  enable: true复制代码

(3) 添加文章字数统计、阅读时长（next主题已经集成）

Hexo 提供了 hexo-wordcount 插件，新版本的 next 中集成了这一点，只需要安装插件然后开启功能就 ok。

第一步：安装 word_count 插件，在博客根目录下打开终端：npm install hexo-wordcount --save

第二步：在主题配置文件 Blog\themes\next\config.yml 中打开 post_wordcount 统计功能：

# Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount:  item_text: true  wordcount: true # 单篇 字数统计  min2read: true # 单篇 阅读时长  totalcount: false # 网站 字数统计  separated_meta: true复制代码

如果仅仅只是打开 wordcount、min2read，部署之后会发现文章的【字数统计】和【阅读时长】后面没有对应的 xxx 字，xx 分钟等字样，只有光秃秃的数字在那里。

解决方案：找到 \themes\next\layout_macro\post.swig 文件，将“字”、“分钟” 字样添加到如下位置即可。

     {
   { wordcount(post.content) }} 字    ...     {
   { min2read(post.content) }} 分钟复制代码

然后才可以看到显示：阅读时长 ≈ 2 分钟，但若是不需要显示 ≈ ，就修改这个地方：

{% if theme.post_wordcount.item_text %}        {
   { __('post.min2read') }} ≈ {% endif %}复制代码

把这里的≈删除即可。

注：如果想要在文章中使用，可以这样插入 <i class="fa fa-smile-o" style="font-size:28px;color:#FF8247;"></i> 即可使用。

参考：

(4) 设置友情链接

在主题配置文件添加，示例：

# titlelinks_title: Linkslinks:  MacTalk: http://macshuo.com/  Title: http://example.com/复制代码

另外，侧边栏友情链接及菜单等旁边的图标，可以到找到自己喜欢的图标然后复制到相应代码中，也可以到这里找：。

(5) 设置侧边栏头像

编辑主题的 _config.yml，新增字段 avatar，值设置成头像的链接地址。

其中，头像的链接地址可以是：

完整的互联网 URL，例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460

站点内的地址，例如：
- /uploads/avatar.jpg 需要将你的头像图片放置在 站点的 source/uploads/（可能需要新建uploads目录）
- /images/avatar.jpg 需要将你的头像图片放置在 主题的 source/images/ 目录下。

(6) 设置订阅微信公众号

注：此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后。

在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。将公众号二维码存放于博客source/uploads/目录下。然后编辑主题配置文件，示例如下：

# Wechat Subscriberwechat_subscriber:  enabled: false  qcode: /uploads/wechat.jpg  description: 欢迎扫描二维码关注公众号一起成长~复制代码

(7) 开启打赏

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。只需要主题配置文件中填入微信和支付宝收款二维码图片地址即可开启该功能。打赏功能配置示例：

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！wechatpay: /path/to/wechat-reward-imagealipay: /path/to/alipay-reward-image复制代码

我的操作：把收款二维码存放在了 NexT 主题的source/uploads/目录下，然后配置如下：

# Reward  赞赏  reward_comment: 觉得文章对您有帮助请我喝杯咖啡吧^_^ wechatpay: /uploads/wechatpay.jpgalipay: /uploads/alipay.jpg复制代码

(8) 添加RSS订阅功能

RSS(Really Simple Syndication) 简易信息聚合，在互联网上被广泛采用的内容包装和投递协。是一种描述同步网站内容的格式，使用 xml 格式。当网站内容更新时，可以通过订阅 RSS 源在 RSS 阅读器上获取更新的信息。大多数内容提供的网站都会提供 RSS 订阅的功能，方便用户去获取最新的内容。

这里主介绍怎么给自己的 hexo 博客添加 RSS 源。

①在 hexo 的根目录下执行命令：

npm install hexo-generator-feed --save复制代码

②在主题配置文件 /theme/next/_config.yml 文件中配置该插件：

feed:    type: atom    path: atom.xml    limit: 20    hub:    content:    content_limit:    content_limit_delim: ' '复制代码

参数的含义：

type: RSS的类型(atom/rss2)path: 文件路径,默认是atom.xml/rss2.xmllimit: 展示文章的数量,使用0或则false代表展示全部hub:content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为falsecontent_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.复制代码

此外还有一种方法，就是在 next 主题的 _config.yml 文件中有个 rss 的配置，直接设置为 true 就可以了。

配置好之后运行 hexo g就可以找到你博客的 pubilc 文件夹下发现 atom.xml 文件了，然后运行 hexo 服务就可以在个人站点处看到 RSS 的订阅图标了,点击这个图标就可以出现 RSS 订阅的地址,就可以添加到你的 RSS 阅读器方便查看博客的最新文章。

参考：

(9) 文章字数统计、阅读时长开启和关闭，以及使用图标还是文本

打开 NexT 主题配置文件 _config.yml，修改：

post_wordcount:  item_text: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示  wordcount: true  min2read: true  totalcount: false  separated_meta: false # 是否换行显示 字数统计 及 阅读时长复制代码

参考：

另外，如果想要把「发表于」、「分类于」、「阅读时长」修改为英文，可以打开 \themes\next\languages\zh-Hans.yml 文件，修改 posted、visitors 等值为英文，如下：

post:  created: 创建于  modified: 更新于  sticky: 置顶  posted: Posted on #发表于  visitors: Visitors #阅读次数   in: In #分类于  read_more: 阅读全文  untitled: 未命名  toc_empty: 此文章未包含目录  wordcount: 字数统计  min2read: 阅读时长  totalcount: Site words total count复制代码

遇到的问题

我在配置过程中有被官方文档坑了，目前猜测是官方文档没及时更新原因。在此，我记录下遇到的坑：

1）菜单图标显示异常

问题：「首页」、「分类」、「标签」等这些菜单旁边的图标都显示是问号，未显示正常图标，我按照官方示例配置是这样的：

menu:  home: /   categories: /categories/    tags: /tags/    archives: /archives/    about: /about/      #schedule: /schedule/ || calendar  #sitemap: /sitemap.xml || sitemap  #公益: /404/ || heartbeat# Enable/Disable menu icons.    menu_icons:  enable: true  home: home  about: user  categories: th  tags: tags复制代码

网上很多文章写的都是上面那样的配置，但后来找到原因了，真正的配置是下面这样的：

menu:  home: / || home  archives: /archives || archive  categories: /categories || th  tags: /tags || tags  about: /about || user  menu_icons:  enable: true复制代码

原来 NexT 这个主题中的「菜单设置」被注释掉的那些配置样例，才是正确的配置。OS：官方文档真是坑人啊。

2）友情链接图标显示异常

问题：「友情链接」图标未正常显示。

官方文档包括网上很多文章写的都是如下：

social:  GitHub: https://github.com/yourname  邮箱: mailto:test@gamil.comsocial_icons:  enable: true  icons_only: false  transition: false  GitHub: github  邮箱: envelope复制代码

但正确配置其实是如下，和菜单配置类似：

social:  GitHub: https://github.com/yourname || github  邮箱: mailto:test@gamil.com || envelopesocial_icons:  enable: true  icons_only: false  transition: false复制代码

二、第三方服务及其他修改

添加第三方服务，官网文档：。

评论系统

数据统计与分析

内容分享服务

搜索服务

其他服务

(1) 在线联系（DaoVoice）★

参考：（含全站总字数、DaoVoice 在线联系等等）。

首先在注册账号，注册完成后会得到一个 app_id，记下这个 app_id 的值，然后打开 /themes/next/layout/_partials/head.swig，写下如下代码：

{% if theme.daovoice %}  {% endif %}复制代码

接着打开主题配置文件，在最后写下如下代码：

# Online contact daovoice: truedaovoice_app_id: 这里填你的获得的 app_id复制代码

注1：安装成功后可以在 DaoVoice 控制台上的聊天设置里设置聊天窗口样式。

注2：我的 DaoVoice 账户注册使用的 GitHub 账户。

(2) 评论Disqus和文章显示评论数——已更换为LeanCloud的Valine评论功能★

Disqus 官网：（本人使用的是谷歌账号注册和登录）

NexT 主题集成 Disqus 评论，可以打开 NexT 配置文件 _config.yml 搜索「disqus」可以找到。

一开始我采用了 Disqus 评论，操作参考：。在完成 Disqus 网站注册和配置后（如何配置就不说了，看链接），打开 NexT 主题配置文件 config.yml 文件。

①大于等于 5.1.1 版本，将 disqus 下的 enable 设定为 true，同时提供你的 shortname，count 用于指定是否显示评论数量：

disqus:  enable: true  shortname:  count: true复制代码

enable 和 count 都设置为 true 后，这样你的所有文章会显示评论数，及页面下面会自动加载 Disqus 的评论插件。

②小于 5.1.1 版本，设定 disqus_shortname 的值即可：

disqus_shortname: shortname复制代码

接下来就可以进入后台管理设置你的评论了。

——update：2019-02-14 已弃用 Disqus 评论。参考了知乎文章：，采用了 Valine，不用登陆就可以用。

顺便提一下关于几个评论系统的介绍：多说和网易云已经倒下了，其次畅言需要备案，Disqus， Hypercomments 和 LiveRe 都是国外的，加载速度贼慢。

Valine 设置步骤：

先需要去注册一个账号：

注册完以后需要创建一个应用，名字可以随便起，然后 进入应用 -> 设置 -> 应用key，获取你的 appid 和 appkey。

拿到你的 appid 和 appkey 之后，打开主题配置文件 _config.yml 搜索 valine，填入 appid 和 appkey。

我的配置：

valine: enable: true appid: 你的appid     appkey: 你的appkey  notify: false # mail notifier , https://github.com/xCss/Valine/wiki verify: false # Verification code placeholder: Just go go # comment box placeholder avatar: mm # gravatar style    guest_info: nick,mail,link # custom comment header pageSize: 10 # pagination size复制代码

另外：如果提示安全问题，请参考网上添加安全域名。即在 Leancloud -> 设置 -> 安全中心 -> Web 安全域名，把你的域名加进去。

(1) Valine邮件提醒

Valine 官方提供的邮件提醒功能是基于Leancloud的密码重置邮件提醒，操作步骤如下：

进入 -> 选择你的评论所存放的应用 -> 设置 -> 邮件模板，按下图设置好用于重置密码的邮件主题>然后保存：

修改邮件主题：你在的评论收到了新的评论

修改内容：将下面的代码复制到“内容”中，并将其中的你的网址首页链接改为你的网址首页链接。

Hi, {
     {username}}
    你在 {
     {appname}} 的评论收到了新的回复，请点击查看：
马上查看
复制代码

点击“保存”按钮

修改 NexT 主题配置文件，搜索 valine（快速定位），将其中的notify改为true。

设置完成后：

发表评论需要像下面这样的验证

如果评论者 A 评论文章时候留下了邮箱，那么其他人比如 B，点击回复 A 的时候，那么 A 的邮箱就会收到相应的邮件通知，提示：

注意：点击查看，会跳转到评论的博客主页，而不是对应的评论文章。

注意事项：

- 发送次数过多，可能会暂时被Leancloud 屏蔽邮件发送功能- 由于`邮件提醒`功能使用的“Leancloud的密码重置邮件提醒”，只能传递`昵称`、`邮箱`两个属性，所以邮件提醒链接`无法直达指定文章页`。请悉知。- 开启`邮件提醒`会默认开启`验证码`选项。- 该功能目前还在测试阶段，谨慎使用。- 目前`邮件提醒`正处于测试阶段，仅在`子级`对存在邮件地址的`父级`发表评论时发送邮件复制代码

参考：

(2)文章显示评论数问题：

**注意，换为 Valine 后，发现文章的评论数不显示，**尝试了改动某处看是否能解决问题，发现解决了。操作这样的：把 disqus 的评论关闭，即设置主题配置文件下的 disqus 下的 enable 为 false，即可正常显示评论数。

(3)文章阅读次数（注：使用的LeanCloud）★

①打开 LeanCloud 官网，进入注册。完成邮箱激活后，点击头像，进入控制台页面，创建一个新应用(类型为JavaScript SDK)，点击应用进入；

②创建名称为 Counter 的 Class；

③修改配置文件，编辑网站根目录下的 _config.yml 文件，添加如下：

leancloud_visitors:  enable: true  app_id: 你的app_id  app_key: 你的app_key复制代码

其中，app_id 和 app_key 在你所创建的应用的设置->应用Key中。

注：为了保证应用的统计计数功能仅应用于自己的博客系统，你可以在应用->设置->安全中心的Web安全域名中加入自己的博客域名，以保证数据的调用安全。

参考：

(4 动态背景、点击出现桃心效果、去除文章底部带#号的标签

修改模板 /themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将#换成：

复制代码

参考：

(5) 更改正文和代码的字体/更改内容区域的宽度

(1) 更改正文和代码字体的样式和大小

NexT 从 5.0.1 版本开始提供一个字体定制特性。以下的修改将覆盖source/css/_variables/base.styl「字体定制」的特性。编辑主题下的 source/css/_variables/custom.styl 文件，新增两个变量：

// 正文字体的大小$font-size-base = 16px// 代码字体的大小$code-font-size = 14px复制代码

注1：代码字体我设置的为 14px，正文字体设置的为 16px，字体族设置的为 $font-family-base = Lato,"PingFang SC","Microsoft YaHei",sans-serif。

注2：关于代码大小设置，除了可以修改主题下的 source/css/_variables/custom.styl 文件，还可以通过修改同目录下的 source/css/_variables/base.styl 文件达到同一目的，base.styl 会覆盖 custom.style 的修改。

// Code & Code Blocks// --------------------------------------------------$code-font-family               = $font-family-monospace$code-font-size                 = 15px复制代码

另外，代码大小设置还可以直接改样式文件``source/css/_common/_vendor/highlight/hilight.styl`：

$code-block  background: highlight-background  margin: 20px 0  padding: 15px  overflow: auto  font-size 15px //$code-font-size;    // 改这里  color: highlight-foreground  line-height:  $line-height-code-block复制代码

参考：

(2) 修改代码区主题

新版的 Next 主题卡得很严，需要这样修改。需要动的地方有：主题的 _config.yml 文件，站点的 _config.yml 文件。

先在站点的配置文件中，搜索hightlight：

highlight:  enable: true  line_number: true  auto_detect: false  tab_replace:复制代码

文字自动检测默认不启动，所以改成 true 使其起作用。看英文应该能明白什么意思。解释下，line_number 表示是否显示代码行号，auto_detect 表示是否对未标识哪种语言的代码进行自动检测，tab_replace 表示是否替换 tab 为空格。附上一个关于 Hexo 的站点及主题配置文件常见配置项的中文解释，我放在文章附录部分。

注意：我有把 auto_detect 设置为了 true，但 hexo s 生成博客时报错：TypeError: Cannot set property 'lastIndex' of undefined，后来网上找到了同样遇到该问题的人，链接：，根据文章说，将站点配置文件 _config.yml 中的 highlight 选项的 auto_detect 设为 false，完美解决。确实如此。

再到主题的配置文件找到 highlight_theme: normal，注释显示有五种显示主题可用，分别是：

normalnightnight eightiesnight bluenight bright复制代码

选择什么要看个人审美了。

(3) 更改内容区域的宽度

NexT 对于内容的宽度的设定如下：

700px，当屏幕宽度 < 1600px

900px，当屏幕宽度 >= 1600px

移动设备下，宽度自适应

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

// 修改成你期望的宽度$content-desktop = 700px// 当视窗超过 1600px 后的宽度$content-desktop-large = 900px复制代码

注，当你使用 Pisces 风格时可以用下面的方法，我即采用的如下设置：

//当你使用 Pisces 风格时可以用下面的方法，在 source/css/_variables/custom.styl 中添加$main-desktop = 1200px$content-desktop = 950px复制代码

参考官网文档：

(6) 添加自定义菜单

以新建「相册」菜单为例：在博客目录下的 source 文件夹下新建名为 photo 文件夹，然后在 photo 文件夹下新建一个文件，然后在该文件填写：

---title: 相册date: 2018-04-16 22:14:07type: "photo"---复制代码

然后打开主题配置文件 _config.yml，在 menu 中添加：

menu:  home: / || home  archives: /archives || archive  categories: /categories || th  tags: /tags || tags  #添加了「相册」菜单  相册: /photo || camera复制代码

解释下：这里的「相册」是博客中显示的菜单名称，紧跟的 photo 要和前面文件的 type 值一致，|| 后面的菜单的图标，图标名称来自于，若没有配置图标，默认会使用问号图标。

参考：

(7) 添加音乐/视频

1）添加单曲音乐

进入的官网，搜索歌曲，点开歌曲，点击「生成外链播放器」生成外链，直接拿来用就行。iframe 插件可以在代码中设置宽高等参数，auto 为设置是否自动播放。flash 不可以自己设置参数。

自动播放示例：

复制代码

嵌入不自动播放只需要把以上代码中的 auto 改为 =0 即可。

2）添加歌单

如果想要加入歌单，就需要找到歌单或者自己创建歌单，热后点击歌单，找到并点击进去「生成外链播放器」，其余操作就和上面一样了。不过，若歌单有变化的话，这个外链的歌曲同样跟着变。示例：

复制代码

3）添加视频

打开视频网站，比如优酷、YouTube 等。以优酷为例，打开某个视频后，点击「分享」，再复制 iframe 代码粘贴到 Markdown 文章即可。示例：

复制代码

(8) 设置标题样式（为浅蓝色）

进入主题目录 hexo\themes\next\source\css\_common\components\post\ 修改 post.sty 文件，在配置的后面添加下面的代码。该文件是博文的样式表。

/*添加下面的CSS代码来修改博客标题样式*/.page-post-detail .post-title {  font-size: 26px;  text-align: center;  word-break: break-word;  font-weight: $posts-expand-title-font-weight  background-color: #b9d3ee;  border-radius:.3em;  line-height:1em;  padding-bottom:.12em;  padding-top:.12em;  box-shadow:2px 2px 7px #9fb6cd;  +mobile() {    font-size: 22px;  }}/*添加上面的CSS代码来修改博客标题样式*/@import "post-expand";@import "post-collapse";@import "post-type";@import "post-title";复制代码

注意：如果想把主页标题样式一同修改，可以用把 .page-post-detail 去掉。

参考：（各种优化，很全面）

(9) 设置文章封面图片

如果只是插入本地图片作为文章封面，即在博客首页的时候会显示文章的封面图片，进入这篇文章的详细页面后，将不显示这张图片。

按如下方式操作：

1）修改 \themes\next\layout\_macro\post.swing 文件。将如下代码复制：

{% if post.summary_img  %}  
        
       
    
{% endif %}复制代码

添加到下图所示的位置:

2）在新建的文章添加一个字段属性：summary_img。summary_img 的值是图片的路径，如：

---title: CSS 各种Hack手段date: 2017-06-25 03:25:24categories: 前端tags: [CSS]comments: falsesummary_img: /images/css-hack-1.png---复制代码

当然也可以不设置summary_img的图片路径，即也就不会显示封面图。

PS：这里有个注意点，亲测，图片存放的文件夹只能新建在 source 目录下。

参考文章：

(10) 网页加载进度条★

打开 /themes/next/layout/_partials/head.swig 文件，在文件末尾添加如下代码：


    复制代码

然后，打开 /themes/source/css/_custom/custom.styl 文件，在文件末尾添加如下代码：

/*网页加载条*//* This is a compiled file, you should be editing the file in the templates directory */.pace {  -webkit-pointer-events: none;  pointer-events: none;  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;}.pace-inactive {  display: none;}.pace .pace-progress {  background: #1e92fb;  position: fixed;  z-index: 2000;  top: 0;  right: 100%;  width: 100%;  height: 3px;}.pace .pace-progress-inner {  display: block;  position: absolute;  right: 0px;  width: 100px;  height: 100%;  box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92;  opacity: 1.0;  -webkit-transform: rotate(3deg) translate(0px, -4px);  -moz-transform: rotate(3deg) translate(0px, -4px);  -ms-transform: rotate(3deg) translate(0px, -4px);  -o-transform: rotate(3deg) translate(0px, -4px);  transform: rotate(3deg) translate(0px, -4px);}.pace .pace-activity {  display: block;  position: fixed;  z-index: 2000;  top: 15px;  right: 15px;  width: 14px;  height: 14px;  border: solid 2px transparent;  border-top-color: #e90f92;  border-left-color: #e90f92;  border-radius: 10px;  -webkit-animation: pace-spinner 400ms linear infinite;  -moz-animation: pace-spinner 400ms linear infinite;  -ms-animation: pace-spinner 400ms linear infinite;  -o-animation: pace-spinner 400ms linear infinite;  animation: pace-spinner 400ms linear infinite;}@-webkit-keyframes pace-spinner {  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}@-moz-keyframes pace-spinner {  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }}@-o-keyframes pace-spinner {  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }}@-ms-keyframes pace-spinner {  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }}@keyframes pace-spinner {  0% { transform: rotate(0deg); transform: rotate(0deg); }  100% { transform: rotate(360deg); transform: rotate(360deg); }}/*网页加载条 END*/复制代码

参考：

另外，还看到一个方法，参考：

编辑主题配置文件搜索pace，将其值改为ture就可以了，选择一款你喜欢的样式。

# Progress bar in the top during page loading.pace: ture# Themes list:#pace-theme-big-counter#pace-theme-bounce#pace-theme-barber-shop#pace-theme-center-atom#pace-theme-center-circle#pace-theme-center-radar#pace-theme-center-simple#pace-theme-corner-indicator#pace-theme-fill-left#pace-theme-flash#pace-theme-loading-bar#pace-theme-mac-osx#pace-theme-minimal# For example# pace_theme: pace-theme-center-simplepace_theme: pace-theme-minimal复制代码

(11) 底部：显示(或隐藏)底部"强力驱动"和版本

打开 themes/next/_config.yml 文件，将 powered 设置为 true，显示“强力驱动”；将 enable 设置为 true，显示版本信息。

# 页脚footer:  # Specify the date when the site was setup.  # If not defined, current year will be used.  since: 2018  # Icon between year and copyright info.  # icon: user  icon: sun-o  # If not defined, will be used `author` from Hexo main config.  copyright:  # -------------------------------------------------------------  # Hexo link (Powered by Hexo).-  powered: true+  powered: false  theme:    # Theme & scheme info link (Theme - NexT.scheme).-    enable: true+    enable: false    # Version info of NexT after scheme info (vX.X.X).    version: true复制代码

参考：（各种定制优化，非常全面）

如果需要修改，可以参考下节 (12) 的内容。

(12) 底部：设定站点建立时间和作者名称

(1) 设定站点建立时间

since: 2013复制代码

其中，网站页面会在 - 后面的年份会自动根据当前年份显示。参考：

(2) 修改站点时间后面的作者名称

找到 \themes\next\layout\_partials\下面的footer.swig文件，打开可以发现如下语句：

第一个框，是底部的站点时间后面的作者名称，如果想加东西，一定要在双大括号外面写。如：xxx{

{config.author}}，当然你要是想改彻底可以变量都删掉，看个人意愿。

(3) 顺带补充其他——修改底部"强力驱动"和版本信息

第二个框，是底部的 “由Hexo驱动” 的 Hexo 链接，先给删掉防止跳转，如果想跳转当然也可以自己写地址，至于中文一会处理。注意删除的时候格式不能错，只把<a>标签这部分删除即可，留着两个单引号''，否则会出错。在我所使用的 next 版本删除 <a> 标签后结果如下：

{% if theme.footer.powered %}  
    
     {#  #}{
   { __('footer.powered', '') }}{##}
    
{% endif %}复制代码

第三个框，是更改底部的“主题-Next.XX”，这个比较爽直接将- 后面</div> 之前的都删掉，，删掉之后在上一行 - 后面可以随意加上你想显示的东西，不要显示敏感信息哟，请自重。在我所使用的 next 版本删除 - 后面的对应代码的结果如下：

{% if theme.footer.theme.enable %}  
    
     {
   #  #}{
    { __('footer.theme') }} — 
    
{% endif %}复制代码

注意，我这里的— 对应 -，这里后面可以加上自己想要添加的内容，比如：

Hosted By GitHub Page复制代码

接下来，处理剩余的中文信息。找到这个地方\themes\next\languages\ 下面的语言文件zh-Hans.yml（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）打开之后，如图：

看到了吧，这个就是传值传过去的，你想显示什么就在这里面大肆的去改动吧。其实在第二个框中，就可以把值都改掉，不用接受传值的方式，完全自己可以重写。不过我不建议那样做，因为传值这样只要是后续页面需要这几个值那么就都会通过取值去传过去，要是在刚才 footer 文件中直接写死，后续不一定哪个页面需要传值，但是值为空了或者还是原来的，可就尴尬了。所以还是这样改动吧。

参考：

(13) 底部：添加网站已运行时间

在themes/layout/_parrials/footer.swing 中添加：


     复制代码

参考：

(14) 底部：添加访问人数和访问量(使用的不蒜字统计)、全站总字数

(1) 添加人数和访问量

不蒜子是号称极简网页计数器，事实上也是如此，仅仅需要两步即可完成统计，分别为引入不蒜子 JS 和显示统计数，为访问量统计与访问人数统计。

①引入不蒜子 JS

打开 \themes\next\layout_partials\footer.swig 文件，在顶部添加如下代码：

复制代码

②显示统计数

访问量统计：

算法a：pv 的方式，单个用户连续点击 n 篇文章，记录 n 次访问量。

    本站总访问量次复制代码

访问人数统计：

算法b：uv的方式，单个用户连续点击 n 篇文章，只记录 1 次访客数。

  本站访客数人次复制代码

接着在合适的地方添加需要显示的统计数字代码（同上文件），我是在如下位置添加的：


    
    	
     	
     	  访问人数：	 | 		
     	
     	  总访问量：	 | 		
     	
     	
     博客全站共 {
   { totalcount(site) }} 字
    
	{% if theme.footer.custom_text %}  
    
     {#  #}{
   { theme.footer.custom_text }}{##}
    
{% endif %}复制代码

注：之前就是使用的该方式添加的访问人数、访问量，但后来发现博客并不显示了，猜测可能是服务商关闭或是别的什么问题。

参考：

(2) 添加博客全站字数统计

添加单篇文章的字数统计，参考「(3) 添加文章字数统计、阅读时长（next主题已经集成）」小节内容。

底部添加全站总字数，方法类似。先安装：npm install hexo-wordcount --save，打开 /themes/next/layout/_partials/footer.swig 在合适位置添加相应代码，我的和不蒜字统计在一起。

添加在别的地方，参考：

!!!最后，根据 (11)、(12)、(13) 、(14) 节的的修改后的结果：

(15) 设置文章加密访问

打开 themes/next/layout/_partials/head.swig文件，在 ``之前插入代码：

复制代码

然后写文章时加上password: xxx，如：

---title: 2018date: 2018-10-25 16:10:03password: 123456---复制代码

参考：（非常全面~）

(16) 文章末尾添加"本文结束"标记/文章末尾追加版权信息

参考：

(17) 取消文章目录对标题的自动编号和取消目录

(1) 取消文章目录对标题的自动编号

修改 NexT 主题配置文件 _config.yml，搜索 number ，值改为 false。

(2) 取消目录

如果想干脆取消目录，修改 NexT 主题配置文件 _config.yml，搜索 toc: ，修改 toc 下的 enable 值改为 false。

toc:  enable: false  number: false复制代码

参考：

(18) 在右上角或者左上角实现fork me on github

点击或者挑选自己喜欢的样式，并复制代码。例如，我是使用的一款右上角的，复制如下代码：

然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig 文件中（放在 <div class="headband"></div> 的下面），并把 href 改为你的 GitHub 地址。

参考：

(19) 底部大改版：添加自定义版权等信息、访问人数/次、网站运行时间等信息★

注：已对「(12) 设定站点建立时间」、「(13) 添加网站已运行时间」做的修改做了更换；以及隐藏了底部"强力驱动"和版本内容（如何隐藏见该文 (11) 节操作）。

(1) 底部添加自定义版权信息

注：如上，左侧是之前的，右侧是修改后的。

打开 \themes\next\layout\_partials\ 文件夹下的 footer.swig 文件。现把修改后的代码摘入如下，方便复制：


    
     {##}{% set current = date(Date.now(), "YYYY") %}{##}
     Copyright  
     © {% if theme.footer.since and theme.footer.since != current %}
     {
   { theme.footer.since }} - {% endif %}{##}
     {
   { current }}  
             
     {
   { theme.footer.copyright || config.author }} . All Rights Reserved.  {% if theme.post_wordcount.totalcount %}    
     |    
                   {% if theme.post_wordcount.item_text %}      
     {
   { __('post.totalcount') }}:    {% endif %}    
     {#    #}{
   { totalcount(site, '0,0.0a') }}{#  #}  {% endif %}
    
复制代码

这是效果：

这里使用的是「华文隶书」字体，你也可以通过修改face=STLiti 换为别的字体。要注意的是，当你这里使用了「华文隶书」字体，别人访问该网页的电脑或手机若没有安装该字体，则不会显示此字体样式。我自己在手机端访问，就发现不会显示此字体样式。

**但一定要别人在没有安装「华文隶书」字体的电脑或手机上显示该字体样式，有办法吗？**答案是有的。只需要把该字体放在 NexT 主题源码中，比如 \themes\next\source\images\ 文件夹下。

电脑安装了 Office，会自动安装一些字体，包括「华文隶书」。如何安装字体：

方法1：双击下载好的 ttf 文件，点击「安装」即可。

方法2：复制下载好的 ttf 文件，粘贴到 C:\Windows\Fonts 会自动安装字体。

卸载字体：进入 C:\Windows\Fonts 选择需要卸载的字体删除即可。

(2) 底部添加访问人数和人次，以及网站运行时间

打开 \themes\next\layout\_partials\ 文件夹下的 footer.swig 文件，添加如下内容：


        复制代码

再打开 \themes\next\layout\_third-party\analytics\ 文件夹下的 busuanzi-counter.swig 文件，删除全部内容，粘贴如下代码：

{% if theme.busuanzi_count.enable %}
      
       {% if theme.busuanzi_count.total_visitors %}    
                 人次    |    
          {
   { totalcount(site) }}字,    载入天数...载入时分秒...|      {% endif %}  {% if theme.busuanzi_count.total_views %}    
                 次      {% endif %}
    
{% endif %}复制代码

注：这里同上一样，使用了「华文隶书」字体。

最后在打开 next 主题配置文件 _config.yml 找到 busuanzi_count，修改为如下：

busuanzi_count:  enable: true  total_visitors: true  total_visitors_icon: user #图标  total_views: true  total_views_icon: eye  post_views: false  post_views_icon: eye复制代码

记得 enable 设置为 true。

(3) 备案信息

打开 /themes/next/layout/_layout.swig 文件，添加如下代码：

注：如上，左侧是之前的，右侧是添加的代码。

现把添加后的代码摘入如下，方面复制：


    
         {% include '_partials/footer.swig' %}    {% include '_third-party/analytics/analytics-with-widget.swig' %}    
         
             
      赣公网安备 xxxxxxxxxxxx号        
      |
      赣ICP备xxxxx号    
     
     {% block footer %}{% endblock %}
    
复制代码

其中，备案信息开头的图片存放在 \themes\next\source\images\ 文件夹下。

效果：

!!!最后的博客底部效果，如下图：

如果没有备案，不想底部显示备案信息，可以考虑显示其他，比如相同位置添加如下代码：


    
    
         Powered by 
     Hexo,Theme by     
     NexT.     Hosted by 
     GitHub Page
    
复制代码

!!!最后博客底部效果，如图：

(20) 左侧添加社交链接和协议

打开 next 主题配置文件_config.yml ，找到 social_icons，设置 icons_only 和 transition 为 true：

social_icons:  enable: true  icons_only: true # false  transition: true  # false复制代码

然后 hexo s 预览可以看到：

再打开 \themes\next\layout\_macro\ 文件夹下的 sidebar.swig 文件，在如下两处添加代码：

注：如上，左侧是之前的，右侧是修改后的。

先把两处改动摘入如下：

    
         {% set sidebarURL = link.split('||')[0] | trim %}     复制代码

{% endif %}
    {% if theme.sidebar.copyright %}
    
     
    
{% endif %}{# Blogroll #}复制代码

其中，svg 文件存放在 \themes\next\source\images\ 文件夹下。

效果：

(21) 关于页面样式的修改，如链接的颜色、回顶部按钮样式、底部页码等等

打开 \themes\next\source\css\_custom\ 文件夹下的 custom.styl 文件，添加如下内容，修改内容已有注释写明：

// 更改文中链接的颜色.post-body a {  color: $orange;  text-decoration: none;  border-bottom: 1;  &:hover {    color: $blue;    //text-decoration: underline;  }}// 右下角返回顶部按钮样式.back-to-top:hover {    color: rgb(136, 255, 13);	background-color: rgba(0, 0, 0, 0.75); //black}// 文章```代码块顶部样式.highlight figcaption {    margin: 0em;    padding: 0.5em;    background: #eee;    border-bottom: 1px solid #e9e9e9;}.highlight figcaption a {    color: rgb(80, 115, 184);}//修改文章内code样式code {color:#c7254e;background:#f9f2f4;border:1px solid #d6d6d6;}// [Read More]按钮样式: 黑底绿字.post-button .btn:hover {	    color: rgb(136, 255, 13) !important;	background-color: rgba(0, 0, 0, 0.75); //black}// 页面底部页码.pagination .page-number.current {	    border-radius: 100%;    background-color: rgba(100, 100, 100, 0.75);}// 页面底部页码, 去除鼠标置于上方时，数字上方的线.pagination .prev, .pagination .next, .pagination .page-number {    margin-bottom: 10px;    border: none;	color: rgb(1, 1, 1);}// 页面底部页码，鼠标置于上方，黑底绿字.page-number:hover,.page-number:active{	color: rgb(136, 255, 13);	border-radius: 100%;    //background-color: rgba(255, 0, 100, 0.75); //品红	background-color: rgba(0, 0, 0, 0.75); //black}复制代码

关于页面的很多设置都可以在此设置。

除了上面这些，我还设置了其他很多，比如页面底部页码、网页加载条、返回顶部按钮、左侧信息栏等样式。可参考：、。查看效果：

另外在网上有看到别人的博客有个页面效果——文章之间、以及文章与下面分页之间有隔横，这个效果样式一直想拿到，觉得那样的更好看。后面联系到了博客作者，问了这事，他说是用的最新版的 NexT 主题，默认就是这样。再然后我找到了 NexT 版本更新说明的博客网站发现它也是那样的效果（最新源码：），看来真是新版 NexT 默认样式。前端我只会一点，不会改啊，忧桑QAQ，只能这样了，日后有时间在探究吧~

(22) 更换博客背景图

打开 \themes\next\source\css\_custom\ 文件夹下的 custom.styl 文件，添加如下代码：

//背景图body {     background-image: url(/images/background.jpg);    background-attachment: fixed; // 不随屏幕滚动而滚动fixed,scroll,inherit    background-repeat: no-repeat; // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺    background-size: cover; // contain等比例铺满屏幕 //cover拉伸铺满    background-position: bottom;//x,y轴调整    +mobile(){      //background-position: 0% -20%;https://i.loli.net/2018/12/29/5c270a0523154.jpg      //https://i.loli.net/2018/12/29/5c270fc2bfcad.png      background-image: url(https://ziyuan.lruihao.cn/images/bg_cell.png);      background-size: cover;    }}复制代码

其中，背景图片为 background-image 后面的 url 地址，即存放在 \themes\next\source\images\ 文件夹下。

(23) 设置博客的图标favicon

第一步：首先要有一个常见格式名（如.jpg, .png等）的图片作为备选 favicon，选择一个 favicon 制作网站完成制作，例如、、，最好设置为 32x32，除了自己制作，当然也可以去一些网站上找，如：。

第二步：将favicon.ico文件放在网站根目录下的 source 文件夹，如 /themes/next/source/images 文件夹下，并且修改配置文件：

favicon:  small: /images/favicon-16x16-next.png #小图标 默认的NexT  medium: /images/favicon.ico	#中图标 默认NexT  apple_touch_icon: /images/apple-touch-icon-next.png #苹果触摸图标  safari_pinned_tab: /images/logo.svg #safari固定标签复制代码

可以看到有四种效果，一般我们只需将 medium 换成我们自己图标路径就行了。然后刷新网站，就可以看到效果了。效果：

参考：

(99) 第三方服务整合的比较全面的DEMO欣赏

「关于」页面特别地还有个网易音乐播放，不错，另外，博客最底部的优化的不错，打算借鉴。

三、博客速度/SEO优化

(1) SEO

参考：

(2) 速度优化

注：关于速度的优化，本人还未实践…

参考：

四、主题制作

附录-配置文件说明

Hexo 的各种通用的配置都是在博客根目录行下的 _config.yml 文件中设置的。下面介绍一些常用的配置项：

# Site 基本信息title: Ruikye                      # 博客标题，如左上角显示subtitle: ruikye 的个人博客         # 博客副标题description: 移动开发技术分享博客     # 用于搜索引擎搜索到的描述信息author: 零雨の夜                    # 博客署名，一般会现在在博客的最下方，rg: ©2014 零雨の夜email: xxx@xxx.com                # 可不填language: zh-CN                   # 让博客支持中文...# Writing...highlight:              # 代码高亮  enable: true          # 开启代码高亮  line_number: false    # 是否显示行号  tab_replace: true     # 是否替换 tab 为空格...# Pagination## Set per_page to 0 to disable paginationper_page: 1             # 文章分页时，每页最多显示文章数，eg: 我的博客在首页和归档页最多只显示一篇文章pagination_dir: page    # 分页目录...# Extensions## Plugins: https://github.com/hexojs/hexo/wiki/Plugins## Themes: https://github.com/hexojs/hexo/wiki/Themestheme: bs-light         # 这里配置博客的主题风格，主题安装在 themes/ 目录下，这里的值就是主题的文件夹名字 exclude_generator:plugins:- hexo-generator-feed   # 安装、启用的插件，这里是启动 RSS 订阅的插件# Deployment## Docs: http://hexo.io/docs/deployment.htmldeploy:  type: github                                                  # 博客托管服务器类型  repository: https://github.com/rakkang/rakkang.github.io.git  # 托管服务器地址  brach: master                                                 # 博客使用的代码分支复制代码

除了 Hexo 的通用配置外，每个主题还有各自的配置文件，主题的配置文件放在：themes/[xxx]/_config.yml, 如：themes/bs-light/_config.yml，下面以 bs-light 为例：

# 导航栏，如右上角的显示，Tips: RSS 栏是插件添加的不再这里menu:  首页: /                 # 格式是：[显示标签]:[索引目录]  存档: /archives# 文章右边的小部件widgets:# search/tag/category/recent_posts/tagcloud   ----> 这里是 bs-light 的可用小部件- search                 # 搜索框- recent_posts           # 最近发布的文章- category               # 存档目录- tagcloud               # 文章的标签集合# 如果在文章的 *.md 中使用 
    ，那么之后的内容不会在首页显示，而是显示 阅读全文 的链接，显示可以更改# 如：更多，查看原文等excerpt_link: 阅读全文# 博客的社交分享，eg: 博客底部的两个图标social:# key weibo/twitter/google/github/stackoverflow/rss# value url# e.g github: https://github.com/DaiXiang  github: https://github.com/rakkang  rss: /atom.xml...cnzz_analytics: true     # 博客的访问统计，这里使用 CNZZ 的统计# google_analytics:# rss:# comment_provider:      # 评论功能，一般使用国内的 多说评论# Facebook comment复制代码

update：2018-01-30

update：2019-02-13 标题由「Hexo之NexT主题的配置及遇到的问题」改为了「NexT主题的优化定制修改指南.」；增加了很多内容，如「2.第三方服务及其他修改」这节内容；其他地方做了一些删减和修改。

update：2019-02-14 补充完善和添加了很多内容。

update：2019-02-15 添加了「添加RSS订阅功能」、「取消文章目录对标题的自动编号和取消目录」等小节、以及站点底部和页面样式的一些修改等

update：2019-02-17 修改了一点页面样式；增加了「三、博客速度/SEO优化」节；增加了博客 favicon