Afauria's Blog

丘山月夜的博客

0%

NexT主题配置手册

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 9.7k 阅读时长 ≈ 9 分钟
NexT主题配置手册，进阶玩法

前言

博客效果如图：

博客效果

基础配置

列举部分功能，没有介绍到的可以参考主题配置文件中的注释。

添加README.md文件

在Hexo目录下的source根目录下添加一个README.md文件，修改站点配置文件_config.yml，将skip_render参数的值设置为skip_render: README.md，跳过渲染该文件

更换Schema

NexT内置了四套主题，这里叫Scheme（用一送四很划算），修改主题配置文件的scheme字段：Muse、Mist、Pisces、Gemini

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置头像

修改avatar字段，设置头像链接地址，如：

  1. 使用完整的互联网URI：avatar: http://example.com/avatar.png
  2. 使用相对路径，放置到 source/images/路径下：avatar: /images/avatar.png

设置菜单项

修改主题配置文件的menu字段

格式为菜单项名称（会匹配翻译）: 链接 || Font Awesome图标

注：旧版本路径 ||中间有空格，升级Hexo之后跳转404，url链接多了个%20，表示空格，需要删除

示例配置

1
2
3
4
5
6
7
8
9
menu:
  home: /|| home
  about: /about/|| user
  tags: /tags/|| tags
  categories: /categories/|| th
  archives: /archives/|| archive
  schedule: /schedule/|| calendar
  sitemap: /sitemap.xml|| sitemap
  #commonweal: /404/|| heartbeat

菜单项的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml 。

例如修改简体中文配置文件：languages/zh-Hans.yml，或者添加自定义的字段other：

1
2
3
4
5
6
7
8
9
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  other: 其他

生成分类、标签和关于页面

首先修改主题配置文件的menu菜单项，将tags和categories的注释去掉

标签

hexo new page tags：在站点/source/目录下会生成新的文件夹tags，在该文件夹下会有一个index.md文件，头信息修改如下，不需要加正文内容

1
2
3
4
title: tags
date: 2018-04-04
type: "tags"
comments: false

分类

同理，将tags换成categories即可

关于

同理，自行编辑文章内容，不需要加type

添加动态背景

修改主题配置文件 themes/next/_config.yml，不同动态背景，值为true应用：

1
2
3
4
5
6
7
8
9
10
11
canvas_nest: false
three_waves: false
canvas_lines: false
canvas_sphere: false

# Only fit scheme Pisces
canvas_ribbon:
  enable: false
  size: 300
  alpha: 0.6
  zIndex: -1

修改文章底部标签图标

默认文章底部的标签带#号，改为图标

修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成<i class="fa fa-tag"></i>

设置网站的图标Favicon

在EasyIcon中找一张（32*32）的ico图标,或者去别的网站下载或者制作，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：

1
2
3
4
5
6
7
favicon: 
	small: /images/favicon.ico
	medion: /images/favicon.ico
	#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

去掉NexT自带的文章目录序号

NexT会为文章自动加上目录序号，如果自己的文章里面已经加了序号，不需要自动加的话，则修改主题配置文件

去掉文章目录序号

进阶配置

添加搜索功能

NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。Swiftype和Algolia都只有一段时间的试用期，可以采用Hexo提供的Local Search，原理是通过hexo-generator-search插件在本地生成一个search.xml文件，搜索的时候从这个文件中根据关键字检索出相应的链接。

安装插件

1
2
3
cd hexo
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save

修改站点配置文件：

search:
path: search.xml
field: post
format: html
limit: 10000

修改NexT主题配置文件：

local_search:
​ enable: true

【踩坑】：启用搜索功能之后，使用hexo serve运行正常，点击按钮弹出搜索框，发布到GitPage，搜索框直接显示到搜索按钮旁边了。

打开浏览器开发者工具，找到html元素，查看本地和GitPage页面差异，发现两者main.css样式不同，GitPage上搜素框css样式丢失

解决：hexo clean清除之前的编译结果，hexo g -d重新部署

添加站点地图sitemap

为了让博文被google或百度检索，需要使用hexo的sitemap功能。

  1. 安装插件，自动生成站点地图：sitemap.xml、baidusitemap.xml
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
  1. hexo g -d生成并发布博客之后，可以通过博客地址/sitemap.xml、博客地址/baidusitemap.xml访问站点地图文件

Google检索

  1. 登录Google Search Console
  2. 点击立即使用，输入域名或xxx.github.io验证资源。
  3. 选择HTML标记验证，如下图
  1. 如果使用NexT主题，可以直接修改主题配置文件，google_site_verification: xxx，填入content中的内容。（原理是自动帮我们在生成的静态html文件head中添加<meta>）
  2. hexo g -d重新生成并发布博客
  3. 回到Google Search Console，点击验证
  4. 添加站点地图文件sitemap.xml，如下图。过一段时间会在概述中显示被索引的情况

百度检索

  1. 登录【百度资源管理平台-用户中心-站点管理】
  2. 点击添加网站，输入博客地址
  3. 选择HTMl标签验证
  4. 如果使用NexT主题，可以直接修改主题配置文件，baidu_site_verification: xxx，填入content中的内容。
  5. hexo g -d重新生成并发布博客
  6. 回到百度资源页面完成验证
  7. 添加站点地图文件baidusitemap.xml，如下图。过一段时间可以查看索引数据

添加博客字数统计

  1. 安装插件：npm i hexo-symbols-count-time --save
  2. 修改站点配置文件
1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true # 文章字数
  time: true   # 文章阅读时长
  total_symbols: true   # 站点总字数
  total_time: true  # 站点总阅读时长
  exclude_codeblock: false   # 排除代码字数统计
  awl: 4   # 平均单词长度
  wpm: 275   # 平均每分钟阅读单词数
  suffix: "mins." # 时长单位
  1. 修改主题配置文件
1
2
3
4
symbols_count_time:
  separated_meta: false   # 是否另起一行
  item_text_post: true
  item_text_total: true

【踩坑】：配置之后发现文章字数始终为空，打印post.length为undefined。最终发现因为先安装了hexo-wordcount，卸载之后需要执行hexo clean清除缓存

添加站点访问统计

修改主题配置文件，页脚会出现访问量。会和Live2d冲突。可以使用valine的visitor进行字数统计，见下文添加评论系统

1
2
busuanzi_count:
  enable: true

添加评论系统

注：Next新版本不再内置Valine

使用Valine（基于LeanCloud云服务）作为评论系统。（也可以用Disqus、Gitalk、Livere、畅言等）

看别人用Gitalk也挺不错的，还可以将评论发到issue，及时收到通知。缺点是需要登录GitHub账号，可能会劝退一拨人

由于busuanzi统计站点访问量会和Live2d插件冲突，因此使用Valine visitor进行访问统计。（会和leancloud_visitors冲突，打开一个就行）

步骤如下：

  1. 注册LeanCloud账号，实名认证
  2. 进入控制台，创建应用
  3. 在【设置-应用凭证】中找到appId和appKey
  4. 【设置-安全中心】可以配置Web安全域名，避免别人拿到appId和appKey之后使用
  5. 在LeanCloud控制台【数据存储-结构化数据】中创建Class，起名为Counter，如下图。（Comment为评论记录，Counter为访问记录）

  1. 修改主题配置文件，如下
1
2
3
4
5
6
7
8
9
10
11
valine:
  enable: true
  appid: "第3步中的appId" # Your leancloud application appid
  appkey: "第3步中的appKey" # Your leancloud application appkey
  placeholder: "欢迎交流讨论" # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: true # 文章阅读统计
  comment_count: true # 文章评论

配置Live2d卡通人物

  1. 安装npm install --save hexo-helper-live2d，具体配置见官网说明hexo-helper-live2d
  2. 安装动画model，如npm install live2d-widget-model-koharu，可以到live2d-widget-models挑选自己喜欢的model，效果见hexo live2d插件 2.0 !
  3. 将下述配置拷贝到根目录_config.yml中，不能拷到主题配置中，否则不生效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-koharu
  display:
    position: right
    width: 250
    height: 500
  mobile:
    show: true
    scale: 0.5
  react:
    opacity: 0.7

右上角配置Fork me on GitHub入口

方法1：

  1. 到GitHub Corners或者GitHub Ribbons选择喜欢的图标，copy相应的代码
  2. 将代码粘贴到themes/next/layout/_layout.swig文件中(放在body的内即可)
  3. 修改href链接为想要跳转的地址，如GitHub主页

方法2：修改主题配置文件

1
2
3
github_banner:
	enable: true
  permalink: https://github.com/Afauria

添加每日一言/今日诗词

  1. 在layout或者md文档中添加下面代码。我是将今日诗词添加到了关于页面，将每日一言添加到了侧边栏：/themes/next/layout/_partials/sidebar/site_overview.swig中
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
<!--今日诗词-->
<div class="poem-wrap">
  <div class="poem-border poem-left"></div>
  <div class="poem-border poem-right"></div>
  <div class="poem-title">念两句诗</div>
  <p id="poem">挑选中...</p>
	<p id="info"></p>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <script defer>
    jinrishici.load(function(result) {
      poem.innerHTML = result.data.content
      info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
  });
  </script>
</div>
<!--每日一言-->
<div class="poem-side">
  <div id="hitokoto">loading...</div>
  <div id="hitokotofrom"></div>
  <script defer>
  fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
       	hitokoto.innerHTML = data.hitokoto
    	if(data.from_who != null) {
      	  hitokotofrom.innerHTML ='——' + data.from_who + ' 《' + data.from + '》'
      	} else {
	  hitokotofrom.innerHTML ='——《' + data.from + '》' 
      }
    })
    .catch(console.error) 
	</script>
</div>
  1. 在/themes/next/source/css中添加下面的css样式，也可自行修改样式
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.poem-wrap {
    position: relative;
    width: 730px;
    max-width: 80%;
    border: 2px solid #797979;
    border-top: none;
    text-align: center;
    margin: 80px auto;
}
.poem-wrap .poem-title {
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: bold;
    line-height: 1.5;
    margin: 20px 0 15px;
    font-size: 30px;
    position: relative;
    margin-top: -20px;
    display: inline-block;
    letter-spacing: 4px;
    color: #797979;
}
.poem-wrap p {
    width: 70%;
    margin: auto;
    line-height: 30px;
    color: #797979;
}
.poem-wrap p#poem {
    font-size: 25px;
}
.poem-wrap p#info {
    font-size: 15px;
    margin: 15px auto;
}
.poem-border {
    position: absolute;
    height: 2px;
    width: 27%;
    background-color: #797979;
}
.poem-right {
    right: 0;
}
.poem-left {
    left: 0;
}
@media (max-width: 685px) {
    .poem-border {
        width: 18%;
    }
}
@media (max-width: 500px) {
    .poem-wrap {
        margin-top: 60px;
        margin-bottom: 20px;
        border-top: 2px solid #797979;
    }
    .poem-wrap h1 {
        margin: 20px 6px;
    }
    .poem-border {
        display: none;
    }
}
.poem-side {
    transform: translateX(0px);
    color: #f5f5f5;
    bottom: 100px;
    position: absolute;
    width: 90%;
    margin: 0px 5%;
}
.poem-side div#hitokoto {
    font-size: 15px;
    text-align: left;
}
.poem-side div#hitokotofrom {
    font-size: 12px;
    text-align: right;
}

添加文章置顶功能

  1. 安装插件
1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
  1. 在需要置顶的文章头部中添加top: true
  2. 配置置顶图标：修改next/layout/_macro/post.swig文件，在<div class="post-meta">中添加下面代码

新版本改到了next/layout/_partials/post/post-meta.njk中

1
2
3
4
5
6
7
8
9
10
11
<div class="post-meta">
{% if post.top %}
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="far fa-thumb-tack" style="color:#7D26CD"></i>
    </span>
  <font color=7D26CD>置顶</font>
  </span>
{% endif %}
  <!--省略..-->
</div>

置顶图标无法显示？

由于next主题使用的fontawesome图标只有all.min.css，不包含fa-thumb-tack（图钉）图标。需要手动下载fontawesome图标，替换next/source/lib/font-awesome下的文件夹。

这里就不引入了，换成fa-fire（火）或者fa-bolt（闪电）图标，能看懂就行

修改归档页面文章数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install --save hexo-generator-index
npm install --save hexo-generator-archive

# 修改站点配置文件
# 首页配置
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# 归档页面配置
archive_generator:
  per_page: 30
  order_by: -date

问题记录

NexT升级

Hexo升级之后使用NexT会出现一些错误，原来NexT版本为5.1.4，需要升级为V7+。

本文配置基于V5，升级之后部分配置需要相应修改。

参考升级说明

toArray报错

hexo g生成报错，不影响使用

1
2
ERROR Template render error: (e:\GitPageBlog\AkiyamaBlog\themes\next\layout\post.swig)
Error: Unable to call `post["categories"]["toArray"]`, which is undefined or falsey

修改themes/next/layout/_macro/post.swig文件，去掉post.categories.toArray()和post.tags.toArray()中的toArray()

注：回来补充，不能去掉toArray()，否则文章开头的分类和标签无法显示……估计和node版本有关系

结语

参考资料：

  1. Hexo官方文档和NexT官方文档
  2. Hexo博客Next主题个性设置集锦
  3. Hexo+NexT 主题配置备忘
  4. hexo博客添加搜索功能
  5. hexo(next)——每日一言、今日诗词
  6. Hexo博客+Next主题深度优化与定制
  7. hexo博客站点sitemap的使用

欢迎关注我的其它发布渠道