Hexo搭建与Next8.02主题设置（二）

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

接着上篇继续

添加字数统计与阅读时长

安装插件

在命令行博客根目录执行以下命令

1
npm install hexo-symbols-count-time --save

修改站点配置文件

  • 在站点文件中添加以下内容：
1
2
3
4
5
6
7
symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

修改主题配置文件

  • 修改主题配置文件中symbols_count_time字段内容：
1
2
3
4
5
6
symbols_count_time:
  separated_meta: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4
  wpm: 275

代码块主题

  • 涵盖一键复制，代码块mac主题，代码块背景颜色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: tomorrow-night
    dark: tomorrow-light
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

打赏功能

把需要的收款码放到/themes/next/source/images里面。
在主题配置文件搜索reward_settings修改：

1
2
3
4
5
6
7
8
9
10
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  #comment: Donate comment here.

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #bitcoin: /images/bitcoin.png

版权信息

搜索creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false #首页边栏是否显示
  post: true #文章底部是否显示
  language:

标签样式

默认的标签前面是一个#号，我们把它改成标签的符号。

打开主题配置文件更改tag_icon字段

1
2
3
- tag_icon: false
+ tag_icon: true

评论系统

参考：小丁的个人博客

添加本站运行时间

修改/blog/themes/next/layout/_partials/footer.njk文件，在末尾加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<br /> #换行
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("04/21/2019 15:54:40");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

站点访问人数和总访问量

修改next主题配置文件，搜索busuanzi_count：

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

文章尾部添加本文结束标记

在博客根目录/source/_data下新建post-body-end.njk文件写入以下内容：

1
2
3
<div>
  <div class="end-slogan" style="text-align:center;font-size:22px;letter-spacing:10px;user-seclect:none;color:#bbb">----------- 本文结束啦<i class="fa fa-star"></i>感谢您阅读-----------</div>		
</div>

然后在主题配置文件中取消注释：

1
2
3

- #postBodyEnd: source/_data/post-body-end.njk
+ postBodyEnd: source/_data/post-body-end.njk

隐藏底部主题信息

在主题配置文件中找到powered字段：

1
2
3
- powered: true
+ powered: false

开启底部爱心动态效果

在主题配置文件中animated字段：

1
2
- animated: false
+ animated: true

未完待续

参考博客