Ming-Blog
0%

Posted on Edited on In
Symbols count in article: 2.4k

hexo 个人博客基于 NexT 主题的基本配置和定制优化

添加版权协议

先在主题配置文件中开启相关字段

1
themes\next\_config.ymlcreative_commons: by-nc-sa

取消文章目录中的数字编号

1
2
3
4
themes\next\_config.yml

toc:
  number: false  # 关闭目录中的数字编号

默认情况下文章的多级目录会被折叠，需要点击才能触发下级菜单的展开，并且同时只能展开一个目录分支，这会造成看文章点击目录很不方便，所以本站点设置了展开全部目录层级，这里需要新建一个自定义样式文件themes\next\source\css\_custom\custom.styl，然后添加以下代码。

1
2
3
4
5
6
themes\next\source\css\_custom\custom.styl

# TOC目录默认全部展开
.post-toc .nav .nav-child {
  display: block;
}

因为这里是第一次新建自定义样式文件，还需要做如下修改，在themes\next\layout\_layout.swig文件中引入刚才新建的文件

1
2
3
4
5
6
7
8
9
# themes\next\layout\\_layout.swig

      {% include '_third-party/exturl.swig' %}
      {% include '_third-party/bookmark.swig' %}
      {% include '_third-party/copy-code.swig' %}

+     {% include '_custom/custom.swig' %}
    </body>
  </html>

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

### 修改博客字体

在 [Google Fonts](https://www.google.com/fonts) 上找到心仪的字体，然后在主题配置文件中为不同的应用场景配置字体：

```yml
# themes\next\_config.yml

font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family:

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family:

页面加载进度条

当网络不好的时候可能会在打开站点或跳转文章时出现短暂的白屏，此时如果能有加载进度提示将会提高用户操作体验。

在根目录下执行以下命令安装相关依赖：

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

在主题配置文件中设置 pace: true。

默认提供了多种主题的进度条加载样式，有顶部提示的，有中间提示的，还有全页面遮挡提示的，默认进度条就非常合适。

添加评论功能

在此使用valine，简洁美观，支持Markdown语法。同样需要 LeanCloud 的 App ID 和 App Key。在主题的配置文件中修改如下。

1
2
3
4
5
6
7
8
9
10
11
themes\next\_config.ymlvaline:
  enable: true
  appid:  ***<app_id***
  appkey: ***<app_key>***
  notify: false  # 收到新评论是否邮件通知
  verify: false  # 是否开启验证码
  placeholder:  # 默认填充文字
  avatar: mm  # 设置默认评论列表
  guest_info: nick,mail  # 评论区头部表单
  pageSize: 10  # 每页评论数
  visitor: true  # 同时开启文章阅读次数统计

添加打赏功能

启用主题配置文件中的打赏相关字段，并将个人收款码图片置于 themes\next\source\images\ 目录下，注意保持图片命名与配置文件中一致：

1
2
3
themes/next/source/css/_custom/custom.stylreward_comment:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.jpg

关闭悬停收款码上的文字抖动效果，可以在自定义样式文件中添加以下代码：

1
2
3
4
themes/next/source/css/_custom/custom.styl//关闭打赏收款码的文字抖动效果
#QR > div:hover p {
  animation: none;
}

注意原博客中，添加reward字段来控制 是否在本文章中添加打赏信息，然后修改文章布局模板中相关的判定条件将会导致网站首页变成归档，生成静态文件也会报错，故而在此没有采用。

添加图片灯箱

添加灯箱功能，实现点击图片后放大聚焦图片，并支持幻灯片播放、全屏播放、缩略图、快速分享到社交媒体等，该功能由 fancyBox 提供.

在根目录下执行以下命令安装相关依赖：

1
git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox

在主题配置文件中设置 fancybox: true 即可。