Hexo + NexT 深度个性化配置 (2020.1 更新)

发表于 更新于 分类于 阅读次数： 本文字数： 5.9k 阅读时长 ≈ 5 分钟

2020.11 更新

升级版本至 Hexo v5.2.0, Next v8.0.2。部分操作产生变化，已更新。

2020.1 更新

所有操作均在Hexo v4.2.0, NexT v7.7.0 版本上验证。如有版本变化，请根据实际情况对部分步骤进行相应修改

前言

最近重新拾起博客，更新，域名迁移，重新配置，优化。这一套下来我真的，脑阔都大了！！
于是非常自觉的弹出了这么一个想法，我在这个过程中所有的操作都记录下来。一来，方便未来知道自己究竟改过些什么，其次，也可以给他人一个参考。有些前人已经踩进去过的泥潭就没有必要再去踩一遍啦！！

由于Hexo和NexT的更新还是比较频繁的，变化的幅度也相当大。所以文章的内容可能不经意间就out了。其实，归根结底，所有的博客只能是作为一个引导，具体的操作永远会因为各种各样的原因而不能照搬。希望大家可以先仔细阅读官方的文档，这样可以对Hexo+NexT有更深的理解。Hexo的官方文档相对而言比较残旧，直接完全按照官方文档来做是会遇到一头包的。NexT的官方文档相对好很多，但需要跟上更新速度。

Hexo 和 NexT本地安装

这部分网上教程茫茫多。所以懒得写了。。。哈哈！没想到吧！
大多数情况跟着官方文档直接操作即可。nodeJS跟npm的安装有时会比较tricky。

站点配置

对于站点配置，我们大多对[站点主目录]/_config.yml文件进行修改。

Github Pages部署自定义域名

我图省事儿，就直接将博客部署在Github Pages上。同时，我又正好有一个自己的域名，所以就想要使用自己的域名。有办法吗？？？当然！
现在Github Pages对于自定义域名有很好的支持，并且支持HTTPS。具体操作参见这篇教程。
很清楚，照做就好了。

如果之前对域名使用过其他的CDN服务，请先取消CDN服务。否则，你使用HTTPS访问自己的域名时，浏览器左侧的小锁会没法锁上！

修改文章永久链接

默认的永久链接格式是/year/month/day/title/这样的形式。感觉有些冗余，也不美观。所以我对其进行修改：
在主题配置文件中搜索**permalink:**，并对其进行配置。以下是我使用的配置，仅供参考：
(这里使用到了hexo-abbrlink这个插件，需要通过npm install hexo-abbrlink --save安装。) 

1
2
3
4
5
6
7
8
9
10
11
12
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://upwnothing.github.io
root: /
permalink: :lang/:abbrlink/
abbrlink: 
  alg: crc32 #算法：crc16(default), crc32
  rep: hex   #进制：dec(default), hex
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

双语博客配置

详见利用Hexo框架搭建中英文双语网站

添加About页面

待完善

添加个性化404页面

其实如果像我一样在Github Page上部署网页，Github有提供统一的404页面。当然，如果希望可以对404页面进行个性化改造，那么就需要稍许折腾一番。
一种是直接在source目录下创建一个404.html文件，并将你想要的样式以及HTML源码都添加到这个文件中。同时在站点配置文件_config.yml中，配置skip_render:

1
2
3
4
5
6
7
8
9
10
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
  - "404.html"

也可以通过hexo new page 404来创建一个与博客整体风格一致的404页面，然后编辑source/404/index.md。网上很容易搜到有许多使用腾讯公益的404页面源码。

添加Sitemap

为自己的网站配置sitemap，可以有效地提升SEO。具体方法如下：

安装hexo-generator-sitemap和hexo-generator-baidu-sitemap。 

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

并在站点配置文件_config.yml的末尾添加： 

1
2
3
4
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

图片懒加载配置

注意！！不推荐在站点配置中设置图片懒加载。该功能其实已经集成在NexT主题中，如何启用详见:在NexT中启用Lazyload

前面提到过，由于网站是搭建在Github Pages上，服务器不在国内，所以对于一些图片很多的文章，文章加载会非常慢。为了解决这个问题，我们可以启用图片懒加载功能。

图片懒加载可以有效地提升网站性能和用户体验。其原理是仅先加载用户可见部分的图片，其余的都暂时先不加载。

首先安装hexo-lazyload-image插件：

1
npm install hexo-lazyload-image --save

再在站点配置文件_config.yml中添加上下列内容：

1
2
3
4
5
6
# Lazyload Image
## npm install hexo-lazyload-image --save
lazyload:
  enable: true
  onlypost: false  # 设置为true，那么只有page和post页面中的图片会使用LazyLoad
  loadingImg: # /images/loading.gif    # 默认为空，加上图片地址可以自定义加载时显示的图片

使用Hexo-lazyload-image方法启用图片懒加载时，如果同时也启用了Fancybox拓展，那么可能会造成冲突。
而使用NexT集成的Lazyload库则不会与Fancybox产生冲突。缺点则是，NexT主题中的Lazyload无法配置onlypost与loadingImg。

主题配置

默认的NexT主题配置文件为：blog/themes/next/_config.yml。
但是,！目前NexT的更新都是通过git pull的方式来获取的，每次更新需要花费很大的精力来解决冲突。
这显然不是一种科学的方法。对此，官方提出的解决方法为:

  1. 不需要修改blog/themes/next/_config.yml，而是将全部主题配置都置于Hexo站点配置文件blog/_config.yml下。所有的主题配置都放置在theme_config:后，并缩进两个空格。
  2. 不需要修改blog/themes/next/_config.yml，而是将全部主题配置都置于blog/themes/_data/next.yml下。

具体的使用方法官方文档写得非常明确了。我这边选择的是第一种方法。
所以，对于需要修改的配置项，我们要做的是：

  1. 在blog/themes/next/_config.yml中找到相关配置，并复制。
  2. 粘帖到blog/_config.yml中的theme_config:下方，并调整缩进为两个空格。
  3. 在blog/_config.yml中修改对应的配置项。

这些步骤我在下文都会用”修改主题配置文件“代替。请务必先理解这句话对应的操作是这三步。

Hexo 5.0 开始，又有另一种主题配置文件的设置方法被采用。^1 可以在站点根目录中存放一个_config.[theme].yml的配置文件，用来取代原来主题目录下的_config.yml文件。
优先级最高的为主目录_config.yml文件中，theme_config下的配置信息。上面所说的_config.[theme].yml其次，主题目录下的配置文件优先级最低。

基础配置

一些一看就懂的配置项，在这里一笔带过。

网站图标

在主题配置文件中将对应项的值修改为图片路径即可。

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml
  • favicon效果
    favicon效果

网站页脚配置

since:设置后，页脚会显示为[开始年份] - [当前年份]。保持默认配置不变则仅显示当前年份。

icon默认是user小人。官方推荐使用红心(heart)，可以在fontawesome中找自己喜欢的替换即可。我使用了小爪子，animated设置为true可以开启动画效果。也可以自己设置颜色。

powered:和theme配置项则用来配置是否在页脚显示Hexo和NexT的名字以及版本号。

Beian可以用来显示网站的公安备案信息。我这边没有这个需求。

  • 页脚效果
    页脚效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2017

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: paw
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#808080"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:

  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: true

  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

侧边栏头像配置

在主题配置文件中修改如下：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/icon.jpeg
  # If true, the avatar will be dispalyed in circle.
  rounded: true      # 头像显示为圆形
  # If true, the avatar will be rotated with the cursor.
  rotated: true       # 设置为true时，鼠标移动到头像上时头像会旋转一圈
  • 侧边栏头像效果
    侧边栏头像效果

添加背景动态效果

Canvas-nest安装配置

进入themes/next目录,执行命令： 

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

其实就是下载canvas-next动态效果的js文件，并添加到source/lib目录下。

在_config.yml中，在theme_config:下添加: 

1
2
3
4
5
6
7
canvas_nest:
  enable: true 
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

enable后面5行可以根据自己的需要进行修改。如果认为默认的参数都不错的话，那么就可以直接省略这几行。

Next 8.0.2 之后，Canvas_nest不再被原生支持。所以需要在hexo/source/_data/下创建footer.njk文件
在文件中添加<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>，并将其中的参数修改为自己想要的值。
最后再在主题配置文件中，修改custom_file_path，将footer: source/_data/footer.njk的注释删除即可。

添加相关文章推荐功能

该功能需要安装依赖的插件Hexo-Related-Popular-Posts： 

1
npm install hexo-related-popular-posts --save

再在_config.yml中对主题进行配置：

1
2
3
4
5
6
7
8
9
10
11
related_posts:
  enable: true
  # Custom header, leave empty to use the default one 设置推荐区块的标题
  title:     
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

启用Hexo NexT本地搜索

NexT主题中，搜索功能支持多种搜索服务，其中最常用的是本地搜索和Algolia搜索两种。

  • Algolia搜索借助Algolia提供的SaaS搜索服务，实现文档的搜索功能。
  • 本地搜索通过hexo-generator-searchdb插件，在本地生成search.xml。该文件作为一个小型的数据库，配合js脚本实现了本地搜索的功能。

首先，安装插件： 

1
npm install hexo-generator-searchdb --save

再修改配置文件_config.yml，启用本地搜索功能： 

1
2
3
4
5
6
7
8
9
10
11
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

代码块样式修改

在主题配置theme_config下添加：

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: solarized dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: false
    # Available values: default | flat | mac
    style: mac

本来的注释中就已经有了比较详细的说明，所以就不多做介绍了。根据自己的需要设置即可。

代码块效果图

文章页面阅读进度显示

返回页面顶部按钮

在主题配置theme_config下添加：

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

启用后，可以在页面右下角显示一个返回页面顶部的小按钮。如果scrollpercent设置为true，则在这个按钮中会显示页面的阅读进度数值。

back2top效果图

而sidebar设置为true时，该按钮将与侧边栏结合到一起：

back2top侧边栏效果图

页面顶部进度条

在主题配置中直接找到reading_progress。将其添加到站点配置文件_config.yml中的theme_confg下。

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

但是，尝试一次以后发现并没有产生效果。后来，经过搜索发现，该功能同样依赖theme-next-reading-progress拓展来实现。由于默认配置文件中的注释里没有提到，所以我一开始完全没意识到需要安装。 

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

通过上述命令完成安装即可。

开启文章页面加载进度条

2021.09.02 更新： Theme-Next在版本8.7.1的更新中将该插件引入作为默认的进度条插件

与阅读进度条类似，首先安装拓展theme-next-pace： 

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

安装完成后，在主题配置theme_config下添加配置： 

1
2
3
4
5
6
7
8
9
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: center-radar

主题theme:可以设置为自己喜欢的样式，这里我设置为了 center-radar 的样式。在这个页面可以看到所有样式的demo。

顺带提一下，当前版本的NexT没有办法在配置文件中直接修改该组件的颜色，如果你觉得组件的颜色与自己的博客无法搭配，那么可以进入到themes/next/source/lib/pace/pace-theme-[你要用的主题].min.css，找到 border-color:#29d 将RGB变量修改为你需要的颜色。

站点首页不显示文章全文

其实，最佳的方法是在文章中间加入<!-- more -->来精确控制文章的摘要预览。
同时，NexT还提供了 Auto Excerpt 的功能来实现对文章的自动截取。
在主题的配置文件中可以找到excerpt_description: true。这项在当前版本是默认开启的。所以我们不需要进行额外配置。

启用评论模块

详见为Hexo NexT 添加评论系统

开启赞赏功能

NexT 主题还内置了打赏的功能。首先在theme_config下，添加 

1
2
3
4
5
6
7
8
9
10
11
12
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  # 设置为True, 那么打赏按钮会默认显示在每篇文章的底部
  enable: true
  animation: true  # 开启动画效果
  # comment: #加入显示的打赏用语 
reward:
  wechatpay: /images/wechatpay.png #微信支付 
  alipay: /images/alipay.png  #支付宝
  # bitcoin: /images/bitcoin.png  #比特比

然后将微信支付，支付宝的收款二维码图片保存为上述的路径。重新生成后就可以在文章底部看到打赏的按钮了。

启用Lazyload图片懒加载

首先在主题配置文件中，配置 

1
lazyload: true

并添加本地js第三方库：

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

或者，也可以直接在主题配置中启用第三方CDN

1
2
vendors:
  lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js

在hexo cl && hexo g之后，进入自己的网页，随意对任一图片进行”审查元素”.

如果你的img元素中包含data-loaded="true",那就说明Lazyload已经生效。

Lazyload效果

启用Fancybox图片效果

首先在主题配置文件中，配置 

1
fancybox: true

并添加本地js第三方库(Fancybox2 或 Fancybox3 任选一个)：

1
2
3
cd themes/next
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox   # install Fancybox 3.x
git clone https://github.com/theme-next/theme-next-fancybox source/lib/fancybox    # install Fancybox 2.x

或者，也可以直接在主题配置中启用第三方CDN (同样根据自己的需要选择版本)

1
2
3
4
5
6
7
8
vendors:
  # FancyBox
  jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  # jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js
  # fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.js
  # fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css

在hexo cl && hexo g之后，进入自己的网页，就可以看到网页上的图片都可以点开放大浏览了。

Fancybox3效果

配置第三方CDN

对于这一部分的内容，其实前面在插件介绍中也已经有所涉及了。NexT提供了CDN配置的功能，如果你对某个插件进行了CDN的配置，那么页面在加载时，将会从CDN来下载相关的js脚本。如果配置为空，则会在本地目录读取对应的文件。
在加载页面时，可以在Chrome中按F12进入开发者菜单，点击Network标签，可以看到页面在加载时，哪些文件耗费了比较长的时间。如果启用了一些比较大的插件，如Busuanzi，Valine,那么使用CDN来加载静态文件，可以有效地加速页面的加载速度。

在主题配置文件themes/next/_config.yml中，搜索vendors:即可找到第三方CDN的配置项。

1
2
3
vendors:
  # Internal path prefix.
  \_internal: lib

这里定义了如果某插件的CDN没有进行配置，那么就会在themes/next/source/lib/目录下，加载插件所需的静态文件。

然后根据自己启用插件的情况，将需要的行添加到主题配置themes_config下。这里贴出我启用的配置，仅供参考：

1
2
3
4
5
6
7
8
9
10
11
vendors:
  fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
  jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
  valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
  pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
  pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
  canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js

添加文章评分功能

在主题配置文件themes/next/_config.yml中搜索rating，找到相关的配置。将其添加到主题配置theme_config下：

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:     # <app_id>
  color:  fc6423

根据注释说明打开https://widgetpack.com ,首页点击”Rating”，然后点击页面中间红色的”Get it Free”。页面会跳转到注册页面，注册帐号。

点开左上角菜单，选择 Rating -> Setting ，可以把 Vote via 修改成 Device或是IP address。这样用户无需登录就可以打分。

菜单中 Site -> Setting ，可以将Private勾上。

NexT内置主题样式美化

这一部分其实主要是对样式进行自定义修改，基本思路就是在自定义的样式文件中加入对应元素的css属性设置。

侧边栏圆角

打开themes/next/source/css/_variables/Gemini.styl，根据启用的不同主题，选择相应的文件。这里修改的是Gemini.styl。
在文件中修改代码：

1
2
$border-radius-inner   = 0 0 10px 10px;
$border-radius         = 10px;

参考文档：