写在前面

(1) 什么是 Hexo：官网传送门

(2) Hexo 官网：Hexo.io

(3) Hexo 主题的选择：

  • 官网：Themes | Hexo
  • GitHub：Themes · hexojs
  • 知乎：有哪些好看的 Hexo 主题？

本人使用的版本为：

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

hexo version 的信息如下：

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

一、主题基本配置

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

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

  • 主题配置 - NexT 使用文档
  • 主题配置参考 · iissnan/hexo-theme-next Wiki（ NexT 主题 GitHub 上其 wiki 页面关于主题设置教程）

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

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

  • 2016-04-07 Hexo站点、NexT主题修改全记录
  • 2018-05-01 关于Hexo6.0搭建个人博客(进阶篇)
  • 2017-05-24 hexo的next主题个性化配置教程
  • ……

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

(1) 主题设置

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

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

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

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

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

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

(2) 动态背景

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

Canvas-nest
three_waves
canvas_lines
canvas_sphere

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

(3) 显示当前浏览进度

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

# Scroll percent label in b2t button
scrollpercent: true

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

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

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

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

  1. 先hexo new page categories新建 categorier 文件夹，其中会自动生成一个index.md文件，修改（即添加一行）为：
---
title: categories
date: 2018-01-23 17:14:51
type: "categories"
---

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

---
title: tags
date: 2018-01-23 17:14:51
type: "tags"
---
  1. 然后写的博客文章，表明所属「分类」和拥有哪些「标签」，官方文档所说的格式如下：
categories:
- Diary
tags:
- PS3
- Games

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

categories: 技术
tags: [编程,感悟]

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

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

---
title: Hello World
date: 2013/7/13 20:46:25
---

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

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

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

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

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

search:path: search.xmlfield: postformat: htmllimit: 10000
  1. 打开主题配置文件找到 Local search，将 enable 设置为 true，启动本地搜索功能，这样就能在页面可以看到搜索菜单了：
# Local search
local_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-wordcount
post_wordcount:item_text: truewordcount: true # 单篇 字数统计min2read: true # 单篇 阅读时长totalcount: false # 网站 字数统计separated_meta: true

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

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

<span title="{{ __('post.wordcount') }}">{{ wordcount(post.content) }} 字
</span>...
<span title="{{ __('post.min2read') }}">{{ min2read(post.content) }} 分钟
</span>

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

{% if theme.post_wordcount.item_text %}<span class="post-meta-item-text">{{ __('post.min2read') }} &asymp;</span>{% endif %}

把这里的&asymp;删除即可。

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

参考：Hexo添加字数统计、阅读时长、友情链接

(4) 设置友情链接

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

# title
links_title: Links
links:MacTalk: http://macshuo.com/Title: http://example.com/

另外，侧边栏友情链接及菜单等旁边的图标，可以到 图标库 找到自己喜欢的图标然后复制到相应代码中，也可以到这里找：Font Awesome，一套绝佳的图标字体库和CSS框架。

(5) 设置侧边栏头像

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

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

  1. 完整的互联网 URL，例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460
  2. 站点内的地址，例如：
    • /uploads/avatar.jpg 需要将你的头像图片放置在 站点的 source/uploads/（可能需要新建uploads目录）
    • /images/avatar.jpg 需要将你的头像图片放置在 主题的 source/images/ 目录下。

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

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

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

# Wechat Subscriber
wechat_subscriber:enabled: falseqcode: /uploads/wechat.jpgdescription: 欢迎扫描二维码关注公众号一起成长~

(7) 开启打赏

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

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

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

# Reward  赞赏
reward_comment: 觉得文章对您有帮助请我喝杯咖啡吧^_^
wechatpay: /uploads/wechatpay.jpg
alipay: /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: atompath: atom.xmllimit: 20hub:content:content_limit:content_limit_delim: ' '

参数的含义：

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

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

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

参考：为hexo博客添加RSS订阅功能

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

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

post_wordcount:item_text: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示wordcount: truemin2read: truetotalcount: falseseparated_meta: false # 是否换行显示 字数统计 及 阅读时长

参考：Hexo Next主题开启字数统计及阅读时长

另外，如果想要把「发表于」、「分类于」、「阅读时长」修改为英文，可以打开 \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: truehome: homeabout: usercategories: thtags: tags

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

menu:home: / || homearchives: /archives || archivecategories: /categories || thtags: /tags || tagsabout: /about || usermenu_icons:enable: true

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

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

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

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

social:GitHub: https://github.com/yourname邮箱: mailto:test@gamil.com
social_icons:enable: trueicons_only: falsetransition: falseGitHub: github邮箱: envelope

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

social:GitHub: https://github.com/yourname || github邮箱: mailto:test@gamil.com || envelope
social_icons:enable: trueicons_only: falsetransition: false

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

添加第三方服务，官网文档：第三方服务集成 - NexT 使用文档。

  • 评论系统
  • 数据统计与分析
  • 内容分享服务
  • 搜索服务
  • 其他服务

(1) 在线联系（DaoVoice）★

参考： hexo的next主题个性化教程:打造炫酷网站（含全站总字数、DaoVoice 在线联系等等）。

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

{% if theme.daovoice %}<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")daovoice('init', {app_id: "{{theme.daovoice_app_id}}"});daovoice('update');</script>
{% endif %}

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

# Online contact
daovoice: true
daovoice_app_id: 这里填你的获得的 app_id

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

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

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

Disqus 官网：https://disqus.com/ （本人使用的是谷歌账号注册和登录）

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

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

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

disqus:enable: trueshortname:count: true

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

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

disqus_shortname: shortname

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

——update：2019-02-14 已弃用 Disqus 评论。参考了知乎文章：Hexo（NexT 主题）评论系统哪个好？ - 知乎，采用了 Valine，不用登陆就可以用。

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

Valine 设置步骤：

  1. 先需要去注册一个账号：Leancloud官网，点我注册

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

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

我的配置：

valine:enable: trueappid: 你的appid    appkey: 你的appkey notify: false # mail notifier , https://github.com/xCss/Valine/wikiverify: false # Verification codeplaceholder: Just go go # comment box placeholderavatar: mm # gravatar style   guest_info: nick,mail,link # custom comment headerpageSize: 10 # pagination size

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

(1) Valine邮件提醒

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

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

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

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

    <p>Hi, {{username}}</p>
<p>你在 {{appname}} 的评论收到了新的回复，请点击查看：
</p>
<p><a href="你的网址首页链接"style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

  3. 点击“保存”按钮

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

设置完成后：

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

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

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

注意事项：

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

参考：NexT主题设置Valine评论系统邮件提醒

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

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

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

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

②创建名称为 Counter 的 Class；

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

leancloud_visitors:enable: trueapp_id: 你的app_idapp_key: 你的app_key

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

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

参考：

  • 为NexT主题添加文章阅读量统计功能
  • Hexo之NexT主题优化（4）-添加文章访问数和站点访问数
  • Hexo的NexT主题个性化：添加文章阅读量

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

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

<i class="fa fa-tag"></i>

参考：2018最新版Hexo博客Next主题6.0配置优化

(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-blockbackground: highlight-backgroundmargin: 20px 0padding: 15pxoverflow: autofont-size 15px //$code-font-size;    // 改这里color: highlight-foregroundline-height:  $line-height-code-block

参考：代码字体大小怎么改？ · Issue #306 · iissnan/hexo-theme-next

(2) 修改代码区主题

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

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

highlight:enable: trueline_number: trueauto_detect: falsetab_replace:

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

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

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

normal
night
night eighties
night blue
night 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

参考官网文档：

  • 常见问题 - NexT 使用文档

(6) 添加自定义菜单

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

---
title: 相册
date: 2018-04-16 22:14:07
type: "photo"
---

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

menu:home: / || homearchives: /archives || archivecategories: /categories || thtags: /tags || tags#添加了「相册」菜单相册: /photo || camera

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

参考：hexo高阶教程：next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式，打造属于你自己的定制化博客

(7) 添加音乐/视频

1）添加单曲音乐

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

自动播放示例：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=350 height=86 src="//music.163.com/outchain/player?type=2&id=185678&auto=1&height=66"></iframe>

border="0" width="350" height="86" src="//music.163.com/outchain/player?type=2&id=185678&auto=1&height=66">

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

2）添加歌单

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

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=450 src="//music.163.com/outchain/player?type=0&id=2637966813&auto=1&height=430"></iframe>

border="0" width="530" height="450" src="//music.163.com/outchain/player?type=0&id=2637966813&auto=1&height=430">

3）添加视频

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

<iframe height=498 width=510 src='http://player.youku.com/embed/XMTU0ODEwMzM3Ng==' frameborder=0 'allowfullscreen'></iframe>

(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-weightbackground-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 去掉。

参考：hexo框架基于next主题定制（各种优化，很全面）

(9) 设置文章封面图片

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

按如下方式操作：

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

{% if post.summary_img  %}<div class="out-img-topic"><img src={{ post.summary_img }} class="img-topic"></div>
{% endif %}

添加到下图所示的位置:

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

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

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

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

参考文章：

  • Hexo 图片插入
  • Hexo-NexT搭建个人博客（五）——插入封面

(10) 网页加载进度条★

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

<!-- 网页加载条 -->
<script src="https://neveryu.github.io/js/src/pace.min.js"></script>

然后，打开 /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*/

参考：Hexo-NexT搭建个人博客（五） | Never_yu’s Blog

另外，还看到一个方法，参考：Hexo-NexT配置超炫网页效果 - 简书

编辑主题配置文件搜索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-simple
pace_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: usericon: sun-o# If not defined, will be used `author` from Hexo main config.copyright:# -------------------------------------------------------------# Hexo link (Powered by Hexo).
-  powered: true
+  powered: falsetheme:# Theme & scheme info link (Theme - NexT.scheme).
-    enable: true
+    enable: false# Version info of NexT after scheme info (vX.X.X).version: true

参考：Hexo+NexT 打造一个炫酷博客 - 掘金（各种定制优化，非常全面）

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

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

(1) 设定站点建立时间

这个时间将在站点的底部显示，例如 © 2013 - 2015。编辑主题配置文件 _config.yml，新增字段 since：

since: 2013

其中，网站页面会在 - 后面的年份会自动根据当前年份显示。参考：设定站点建立时间 · iissnan/hexo-theme-next Wiki

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

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

第一个框，是底部的站点时间后面的作者名称，如果想加东西，一定要在双大括号外面写。如：xxx{{config.author}}，当然你要是想改彻底可以变量都删掉，看个人意愿。

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

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

{% if theme.footer.powered %}<div class="powered-by">{##}{{ __('footer.powered', '') }}{#
#}</div>
{% endif %}

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

{% if theme.footer.theme.enable %}<div class="theme-info">{##}{{ __('footer.theme') }} &mdash; </div>
{% endif %}

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

<a herf="https://pages.github.com/">Hosted By GitHub Page</a>

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

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

参考：Hexo Next底部powered by的logo栏更改以及注意事项（附官方文档,文末有福利链） - 掘金

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

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

<!--添加网站的运行时间-->
<span id="sitetime"> <br></span>
<script language="javascript">function siteTime(){window.setTimeout("siteTime()", 1000);var seconds = 1000var minutes = seconds * 60var hours = minutes * 60var days = hours * 24var years = days * 365var today = new Date()var todayYear = today.getFullYear()var todayMonth = today.getMonth()var todayDate = today.getDate()var todayHour = today.getHours()var todayMinute = today.getMinutes()var todaySecond = today.getSeconds()var t1 = Date.UTC(2017,4,18,11,00,00)var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)var diff = t2-t1var diffYears = Math.floor(diff/years)var diffDays = Math.floor((diff/days)-diffYears*365)var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)document.getElementById("sitetime").innerHTML=" 本站已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒<br>"}siteTime()
</script>

参考：Hexo和Next主题的相关设置（持续更新） - 简书

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

(1) 添加人数和访问量

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

①引入不蒜子 JS

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

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

②显示统计数

访问量统计：

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

<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

访问人数统计：

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

<span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

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

<!-- 不蒜字统计 -->
<div><i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">访问人数：<span id="busuanzi_value_site_uv"></span></span>&nbsp;|&nbsp;<i class="fa fa-eye"></i><span id="busuanzi_container_site_pv">总访问量：<span id="busuanzi_value_site_pv"></span></span>&nbsp;|&nbsp;<!-- 添加博客全站总字数统计--><i class="fa fa-pencil"></i><span class="post-count">博客全站共 {{ totalcount(site) }} 字</span>
</div>{% if theme.footer.custom_text %}<div class="footer-custom">{##}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}

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

参考：

  • Hexo+Github博客小功能之添加不蒜子访问统计
  • Hexo搭建属于自己的博客

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

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

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

添加在别的地方，参考：Hexo-NexT配置超炫网页效果 - 简书

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

(15) 设置文章加密访问

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

<script>(function(){if('{{ page.password }}'){if (prompt('请输入密码') !== '{{ page.password }}'){alert('密码错误');history.back();}}})();
</script>

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

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---

参考：最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析 | 遇见西门（非常全面~）

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

参考：Hexo+NexT 打造一个炫酷博客 - 掘金

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

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

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

(2) 取消目录

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

toc:enable: falsenumber: false

参考：hexo的NexT主题，怎么取消“文章目录”对标题的自动编号？

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

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

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

参考：hexo的next主题个性化配置教程 - SegmentFault 思否

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

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

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

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

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

<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}<font color=black face=STLiti>Copyright &nbsp;</font><font color=black>&copy;</font> {% if theme.footer.since and theme.footer.since != current %}<font color=black face=STLiti>{{ theme.footer.since }} - </font>{% endif %}{#
#}<font color=black face=STLiti><span itemprop="copyrightYear">{{ current }}</span></font><span class="with-love"><i class="fa fa-{{ theme.footer.icon }}"></i></span><span class="author" itemprop="copyrightHolder"style="font-family:STLiti;color:black;">{{ theme.footer.copyright || config.author }} . All Rights Reserved.</span>{% if theme.post_wordcount.totalcount %}<span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-area-chart"></i></span>{% if theme.post_wordcount.item_text %}<span class="post-meta-item-text">{{ __('post.totalcount') }}&#58;</span>{% endif %}<span title="{{ __('post.totalcount') }}">{##}{{ totalcount(site, '0,0.0a') }}{##}</span>{% endif %}
</div>

这是效果：

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

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

电脑安装了 Office， 会自动安装一些字体，包括「华文隶书」。如何安装字体：下载和安装自定义字体以便在 Office 中使用 - Office 支持

  • 方法1：双击下载好的 ttf 文件，点击「安装」即可。
  • 方法2：复制下载好的 ttf 文件，粘贴到 C:\Windows\Fonts 会自动安装字体。

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

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

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

<!--此处为建站时间 --><script>var now = new Date();
function createtime() { var grt= new Date("04/17/2017 20:01:01");now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML =dnum+"&thinsp;天"; document.getElementById("times").innerHTML = hnum + "&thinsp;时" + mnum + "&thinsp;分" + snum + "&thinsp;秒";
}
setInterval("createtime()",250);
</script>

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

{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count"><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>{% if theme.busuanzi_count.total_visitors %}<font color=DarkSlateGray face=STLiti><span class="site-uv" title="访问人数"><i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i><span class="busuanzi-value" id="busuanzi_value_site_uv"></span>人次</span><span class="post-meta-divider">|</span></font><font color=DarkSlateGray face=STLiti><span title="总字数"><i class="fa fa-edit"></i>&ensp;<span class="post-count">{{ totalcount(site) }}</span>字,</span><span id="timeDate" title="网站运行时间">载入天数...</span><span id="times" title="网站运行时间">载入时分秒...</span><span class="post-meta-divider">|</span></font>{% endif %}{% if theme.busuanzi_count.total_views %}<font color=DarkSlateGray face=STLiti><span class="site-pv" title="总访问量"><i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i><span class="busuanzi-value" id="busuanzi_value_site_pv"></span>次</span></font>{% endif %}
</div>
{% endif %}

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

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

busuanzi_count:enable: truetotal_visitors: truetotal_visitors_icon: user #图标total_views: truetotal_views_icon: eyepost_views: falsepost_views_icon: eye

记得 enable 设置为 true。

(3) 备案信息

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

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

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

<div class="footer-inner">{% include '_partials/footer.swig' %}{% include '_third-party/analytics/analytics-with-widget.swig' %}<!--备案等自定义↓--><divstyle="font-family:STLiti;display:inline-block;height:20px;line-height:20px;"><a target="_blank" href="" ><img src="/images/gov.png"style="float:left;"/>赣公网安备 xxxxxxxxxxxx号</a><span class="post-meta-divider"style="color: #555;">|</span><span><a href="http://www.miitbeian.gov.cn" target="_blank">赣ICP备xxxxx号</a></sapn></div> {% block footer %}{% endblock %}
</div>

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

效果：

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

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

<!--版权等自定义↓--><divstyle="font-family:Courier New;display:inline-block;height:20px;line-height:20px;">Powered by <a target="_blank" href="https://hexo.io/zh-cn/index.html">Hexo</a>,Theme by <a target="_blank" href="https://theme-next.iissnan.com/">NexT</a>. Hosted by <a target="_blank" href="https://pages.github.com/">GitHub Page</a>
</div>

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

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

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

social_icons:enable: trueicons_only: true # falsetransition: true  # false

然后 hexo s 预览可以看到：

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

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

先把两处改动摘入如下：

<span class="links-of-author-item"><! --增加的下面这行 悬浮显示文字-->{% set sidebarURL = link.split('||')[0] | trim %} <a href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name + ' &rarr; ' + sidebarURL }}">

{% endif %}<! --增加的下面这部分，知识共享协议 -->
{% if theme.sidebar.copyright %}
<div class="cc-license motion-element" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="external nofollow noopener noreferrer" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a></div>
{% 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
}

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

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

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

(22) 更换博客背景图

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

//背景图
body { background-image: url(/images/background.jpg);background-attachment: fixed; // 不随屏幕滚动而滚动fixed,scroll,inheritbackground-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.pngbackground-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 制作网站完成制作，例如 FavIcon from Pics、比特虫、favicon制作 - 在线工具，最好设置为 32x32，除了自己制作，当然也可以去一些网站上找，如：EasyIcon。

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

favicon:small: /images/favicon-16x16-next.png #小图标 默认的NexTmedium: /images/favicon.ico #中图标 默认NexTapple_touch_icon: /images/apple-touch-icon-next.png #苹果触摸图标safari_pinned_tab: /images/logo.svg #safari固定标签

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

参考：关于Hexo6.0搭建个人博客(进阶篇)

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

  • 博採眾長

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

  • Vincent Qin

  • wustxiao’s blog

  • Zack’s Blog

  • 进击的学霸的博客

三、博客速度/SEO优化

(1) SEO

参考：hexo 博客 seo 优化

(2) 速度优化

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

参考：

  • Hexo博客-Next性能优化之路 | Waber’s Blog
  • Hexo博客之速度优化 - 简书
  • hexo next主题深度优化(六)，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度

四、主题制作

  • 从零开始制作 Hexo 主题
  • 写一个自己的Hexo主题

附录-配置文件说明

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

# Site 基本信息
title: Ruikye                      # 博客标题，如左上角显示
subtitle: ruikye 的个人博客         # 博客副标题
description: 移动开发技术分享博客     # 用于搜索引擎搜索到的描述信息
author: 零雨の夜                    # 博客署名，一般会现在在博客的最下方，rg: &copy;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 pagination
per_page: 1             # 文章分页时，每页最多显示文章数，eg: 我的博客在首页和归档页最多只显示一篇文章
pagination_dir: page    # 分页目录
...
# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: bs-light         # 这里配置博客的主题风格，主题安装在 themes/ 目录下，这里的值就是主题的文件夹名字
exclude_generator:
plugins:
- hexo-generator-feed   # 安装、启用的插件，这里是启动 RSS 订阅的插件
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy: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 中使用 <!-- more -->，那么之后的内容不会在首页显示，而是显示 阅读全文 的链接，显示可以更改
# 如：更多，查看原文等
excerpt_link: 阅读全文
# 博客的社交分享，eg: 博客底部的两个图标
social:
# key weibo/twitter/google/github/stackoverflow/rss
# value url
# e.g github: https://github.com/DaiXianggithub: https://github.com/rakkangrss: /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

（Ⅱ）NexT主题的优化定制修改指南相关推荐

  1. wordpress主题修改_更改WordPress主题的10个步骤指南

    wordpress主题修改 Changing your WordPress theme is, on the surface, a very easy process: find a theme, i ...

  2. findBug 错误修改指南

    FindBugs错误修改指南  1. EC_UNRELATED_TYPES Bug: Call to equals() comparing different types Pattern id: EC ...

  3. TVM yolov3优化代码修改（编译运行OK）

    TVM yolov3优化代码修改(编译运行OK) yolov3_quantize_sample.py 附https://github.com/makihiro/tvm_yolov3_sample代码: ...

  4. open wrt 跟换主题_Openwrt编译进阶-修改密码、路由连接数、时区及主题

    默认中文,添加并默认主题 修改feeds/luci/libs/web/root/etc/config 1 option lang auto 改为 1 option lang zh_cn 并添加 1 2 ...

  5. 华为主题包hwt下载_华为主题太丑？修改方式它来了

    昨天写了一个换图标的,很多朋友们都在私信和我要APP 看着大家这么热情,我就再写个修改主题的吧 其实今天要教大家的不仅仅是修改主题,大家也可以自己创建主题 在此还是希望大家先征得主题作者的同意再进行修 ...

  6. Hive-CDH参数修改指南--增加自定义参数--命令行显示当前数据-查询结果显示表头(类似修改源生Hive的hive-site.xml文件)

    Hive-CDH参数修改指南(类似修改源生Hive的hive-site.xml文件) 问题描述 默认配置下,每次启动Hive都要手动输入配置选项,才能实现:在命令行显示当前数据库(set hive.c ...

  7. 社区热议淘宝开源的优化定制JVM版本：Tabao JVM

    9月18日,淘宝核心系统部专用计算组的王峥(花名:长仁)在微博上宣布: \ \ jvm.taobao.org上线,开源基于OpenJDK vm的优化定制JVM版本:TaobaoJVM \ \ 在jvm ...

  8. MISRA-C 2012修改指南介绍及示例

    导言 随着对汽车电子嵌入式软件的重视程度不断提高,为减少软件的缺陷,汽车工业软件可靠性协会MISRA(Motor Industry Software Reliability Association)提 ...

  9. 计算机三级数据库数据仓库与数据挖掘（二）、数据仓库、面向主题、不可直接修改、批量访问、数据的粒度级设计、决策支持、元数据、封锁粒度、维护策略、实时维护、延时维护、快照维护、

    14.在具有数据仓库的企业数据环境中,数据仓库数据一般都具有许多特点,下列都属于其特点的是 A.面向主题.不可直接修改.批量访问 B.面向主题.可直接修改.性能要求较为宽松 C.集成的.可直接修改.批 ...

  10. 基于echarts定制修改的k线图工具

    基于echarts定制修改的k线图工具 注:百度echarts拷贝下来的k线图框架,根据需求自己修改制作的k线图工具 前端代码: <!DOCTYPE html> <html lang ...

最新文章

  1. 原来女孩要的不是真爱，而是关爱...
  2. mysql相邻行数据计算的自定义变量@和Lead窗口函数的具体案例适应版本mysq5.7 mysql8.0
  3. Java instead of 用法_我又不是你的谁--java instanceof操作符用法揭秘
  4. Vue 框架-05-动态绑定 css 样式
  5. OpenCV中VideoCapture判断isOpened()时总是返回false
  6. 一文读懂类加载机制 --- ClassLoader
  7. c++的提示类未定义_推荐一款适合初学者的C/C++IDE
  8. python 求点集的距离矩阵
  9. java实现打印功能_Js 打印功能的实现（Java）
  10. Altera下载器使用说明 Intel（Altera）FPGA高速下载器线PL-USB2-BLASTER中文详细使用手册
  11. 李永乐复习全书线性代数 第三章 向量
  12. 输入大写字母，将大写字母转换为小写字母
  13. C语言深度剖析笔记1
  14. 字节跳动问我计算机网络，我一口气全答对！
  15. 华氏摄氏度与摄氏度的换算
  16. ie测试兼容的软件,IE系列浏览器兼容性测试点整理
  17. 三门问题的计算机模拟,三门问题（Monty Hall problem）的代码模拟
  18. 红米 12C earth Fastboot 线刷包 root TWRP 刷入magisk recovery卡刷
  19. pycharm专业版许可证申请（特定人群)
  20. 计算机和游戏建立不了连接,两台未联网的Win7电脑如何建立局域网游戏

热门文章

  1. linux系统忘记密码之破解密码
  2. Word解决：以下内容无法保存在未启用宏的文档中: ●VBA工程 请单击“否“返回”另存为“对话框，然后在文件类型“下拉框中选择一种启用宏的文件类型。是否继续将其另存为未启用宏的文档?
  3. mysql XA 分布式事务、DTM TCC事务（多语言支持）
  4. 富瑞和SMBC Group宣布结成战略联盟来推动增长
  5. 计算机组成原理中rr,计算机组成原理作业~第四章.doc
  6. samba服务端配置和客户端使用【含windows共享文件到linux】
  7. 中国广电即将放号，感受到压力的中国移动率先推出19元5G套餐
  8. 苹果库乐队怎么玩_苹果手机如何自定义铃声？这个方法最简单。
  9. 真核生物基因结构 mRNA结构
  10. c语言回溯法解决倒桥本分数式,回溯法 经典题目 八皇后 桥本分数