External-Brain
0%

Hexo博客主题优化

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

1. 设置菜单

打开主题配置文件即themes/next下的_config.yml，查找menu，将前面的#删除就行了：

1
2
3
4
5
6
7
8
9
10
menu:
  home: / || home                      #首页
  archives: /archives/ || archive      #归档
  categories: /categories/ || th       #分类
  tags: /tags/ || tags                 #标签
  about: /about/ || user               #关于
  resources: /resources/ || download   #资源
  #schedule: /schedule/ || calendar    #日历（**干啥用？**）
  #sitemap: /sitemap.xml || sitemap    #站点地图，供搜索引擎爬取（为爬虫指路增加网站重要内容页面的收录）
  #commonweal: /404/ || heartbeat      #腾讯公益404（寻找丢失儿童）

“||”前面的是目标链接，后面的是图标名称，next使用的图标全是图标库 - Font Awesome 中文网这一网站的，有想用的图标直接在fontawesome上面找图标的名称就行。resources是我自己添加的。

新添加的菜单需要翻译对应的中文，打开theme/next/languages/zh-CN.yml，在menu下设置：（新版next主题自带翻译）

1
2
3
4
5
6
7
8
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  resources: 资源
  search: 搜索

在根目录下打开Git Bash，输入如下代码：

1
2
3
4
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"

此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件，每个文件中有一个index.md文件，修改内容分别如下：（type指向该文件夹类型吧，不确定是不是这个作用）

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
---
title: 分类
date: 2020-02-10 22:07:08
type: "categories"
comments: false
---

---
title: 标签
date: 2020-02-10 22:07:08
type: "tags"
comments: false
---

---
title: 关于
date: 2020-02-10 22:07:08
type: "about"
comments: false
---

---
title: 资源
date: 2020-02-10 22:07:08
type: "resources"
comments: false
---

注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

2. 设置建站时间

打开主题配置文件即themes/next下的_config.yml，查找since：

1
2
3
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2020-02   #建站时间

5. 设置动态背景

5.1 canvas nest 风格

效果图：

img

在themes/next目录下打开Git Bash，输入：

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

打开主题配置文件即themes/next下的_config.yml，找到canvas-nest，将enable：false改为true：（如果找不到canvas-nest，可能是文件修改了，试试将下面的代码复制粘贴到themes/next中）可行

1
2
3
4
5
6
7
8
9
10
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
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

5.2 JavaScript 3D library风格

在themes/next目录下打开Git Bash，输入：

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

打开主题配置文件即themes/next下的_config.yml，找到three，这里有三种风格，可以试一下看看喜欢哪种风格，直接将false改为true就行了

1
2
3
4
5
6
7
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

8. 添加顶部加载条

在themes/next目录下打开Git Bash，输入：

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

打开主题配置文件即themes/next下的_config.yml，找到pace，将enable：false改为true，你还可以选择类型（theme）：flash、minimal、bounce比较喜欢

1
2
3
4
5
6
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: minimal

9. 设置预览摘要

next（v7.7.1）已经没有如下代码：

1
2
3
auto_excerpt:
  enable: true
  length: 150

所以不需要设置，只要我们在文章中插入 ，该标签之上的是摘要，之后的内容不可见，需点击全文阅读按钮：

1
<!-- more -->

10. 设置侧边栏显示效果

侧边栏指的是menu下面那一块

打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：

1
2
3
4
5
6
7
8
9
10
sidebar:
  # Sidebar Position. #设置侧边栏位置
  position: left
  #position: right

  #  - post    默认显示模式
  #  - always  一直显示
  #  - hide    初始隐藏
  #  - remove  移除侧边栏
  display: post

14. 显示文章字数和阅读时长

我一开始失败了，在站点配置文件末尾加上代码后测试报错，发现是安装代码不对

从根目录Blog打开Git Bash，执行下面的命令，安装插件：

1
npm install hexo-wordcount --save #错误安装代码，下方正确不报错
1
2
npm install hexo-word-counter
hexo clean

然后打开站点配置文件，在文件末尾加上下面的代码：

1
2
3
4
5
6
symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计

效果如下图：

img

15. 显示站点文章总字数（另一种统计站点总字数的方法）

可以，但是只能显示全站字数，不能显示单篇文章

从根目录Blog打开Git Bash，执行下面的命令，安装插件：

1
npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

参考文献：https://zhuanlan.zhihu.com/p/106060640
https://hexo-next.readthedocs.io/zh-cn/latest/next/advanced/%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1/