Next主题常用信息设置（二）

| | 阅读数 次
字数统计: 1.1k 字 | 阅读时长 ≈ 4 分钟

本篇文章紧接着上文（Next主题常用信息设置（一））继续讲解Next主题常见字段的设置。

一、前言

在本文中，将分享对Next主题进行背景设置、侧边栏设置、文章字数统计功能设置、打赏功能开启、启用版权说明等功能。后续文章会讲解其他功能设置的，大家可以常回家看看哦。

二、侧边栏设置

之前对侧边栏的友情链接、社交网站链接等功能进行了设置。本次将分享设置侧边栏的位置、距离以及是否开启回到顶部功能。关键代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

  # Back to top in sidebar (only for Pisces | Gemini).
  b2t: false

  # Scroll percent label in b2t button.
  scrollpercent: false
由于我是采用的Pisces，所以只分享了有关Pisces的部分。其实这部分的设置一般为默认即可。回到顶部功能一般是另外进行设置的，并不会放在侧边栏中。

三、背景设置

Next主题内置了几种背景特效，我实测了一下，效果还是不错的，挺炫酷的。而且设置起来超级简单。几种背景动画方式如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: false
  size: 300
  alpha: 0.6
  zIndex: -1
注意这几种背景动画方式只能同时设置一个，即只能有一个为true的状态。并且开启背景动画稍微有一点点的影响页面加载和响应速度，大家可以酌情使用。

四、开启文章字数统计功能

要开启字数统计功能，首先先安装相应插件：hexo-wordcount。在项目根目录下打开GitBash，输入以下命令，即可安装hexo-wordcount插件：

1
npm install hexo-wordcount --save
然后打开主题配置文件，进行如下设置即可：
1
2
3
4
5
6
post_wordcount:
  item_text: true      # 是否显示文字
  wordcount: true      # 是否开启字数统计
  min2read: true       # 是否显示阅读时长
  totalcount: false    # 是否显示网站总字数，通常设为false
  separated_meta: true # 是否折行显示
按照以上配置的设置效果如下图所示：

五、添加打赏功能

创作不易，原创更是值得鼓励。现在越来越多的博客系统推出了打赏功能，Next主题也当然支持。以下是我的示例代码：

1
2
3
4
# Reward
reward_comment: 创作十分不易，原创更应鼓励
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
效果图如下所示：reward_comment参数是显示在打赏按钮上面的描述文字，wechatpay和alipay则是微信支付和支付宝支付所对应的收款二维码。注意以上我的两个二维码图片地址位于blog/themes/next/source/images/下。注意鼠标放到二维码图片上，下方的文字默认有一个晃动效果，不太美观。要取消该效果的话，打开blog\themes\next\source\css\_common\components\post\post-reward.styl文件，删除以下代码即可：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
#bitcoin:hover p {
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
@keyframes roll {
    from {
      transform(rotateZ(30deg));
    }
    to {
      transform(rotateZ(-30deg));
    }
}

六、添加版权功能

Next主题允许我们在文章末尾添加我们的版权信息，相关代码设置如下所示：

1
2
3
4
5
# Declare license on posts
post_copyright:
  enable: false # 启用版权，改为true即可
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
以下是启用版权声明的示意图：

七、总结

本文讲解了Next主题的侧边栏设置、打赏信息设置、版权声明、字数统计等功能，我们的网站实用性得到了进一步提升。下一篇文章将讲述如何在Next主题引入来必力LiveRe评论系统。

八、相关链接

--本文结束 感谢阅读--
创作十分不易，原创更应鼓励