next主题优化

目录

实现字数统计和阅读时长功能 增加Valine评论功能 修改文章底部带#的标签
实现Daovoice在线聊天功能 Error:Deployer not found: git 文章最后加结束语
添加文章版权声明 addthis share工具添加

实现字数统计和阅读时长功能

  1. 博客根目录运行git输入命令行
    npm install hexo-symbols-count-time --save

  2. 打开博客根目录,在最下方添加

1
2
3
4
5
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

参考自大佬LixT

增加Valine评论功能

  1. 进入leancloud官网注册登录控制台

  2. 创建一个应用,名字随便写。找到appkey中的appIDappkey

  3. 在主题配置文件中找到Valine
    valine:

    enable: false  #false改成true
    appid:   #复制粘贴应用中的appid
    appkey:  #复制粘贴应用中的appkey
    

其它的默认即可

修改文章底部带#的标签

  1. 用文本编辑器打开post.swig。路径themes\next\layout\ _macro\post.swig

  2. 找到
    rel="tags">#</a>
    这部分代码

  3. #替换成<i class="fa fa-tags"><i/>。注意空格

    想要什么icon就去fontawesome找。只要把相应图标的英文替换掉tags即可

  4. 重新hexo s刷新页面

实现Daovoice在线聊天功能

  1. 进入Daovoice官网注册登录。

  2. 进到Daovoice面板,点击左侧边栏的应用设置-- 安装到网站。在下方的代码中会看到app_id: "xxxx"字样。

  3. 打开 themes/next/layout/_partials/head/head.swig 文件中最下方加入如下代码:

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}

在主题配置文件_config.yml,添加如下代码:

# DaoVoice 
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id
  1. 回到Daovoice控制面板,点击聊天设置可以对聊天图标的颜色及位置进行设置。

此功能设置摘自#LixT#。

Error:Deployer not found: git

博客根目录打开运行窗口,输入

npm install –save hexo-deployer-git

文章最后加结束语

  1. \themes \next \layout \_macro中新建passage-end-tag.swig文件,添加代码至该文件:


    -------------本文结束感谢您的阅读-------------

  2. 打开\themes \next \layout \_macro \post.swig文件,在post-body
    后,post-footer前,添加以下代码

<div>
  {% if not is_index %}
	    {% include 'passage-end-tag.swig' %}
	  {% endif %}
</div>
  1. 打开主题配置文件_config.yml,在末尾加入
 #文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

添加文章版权声明

  1. 打开post.swig。路径themes\ next \layout \_macro \post.swig
  2. 找到END POST BODY,找到post-copyright字眼,把该段所有代码换成
1
2
3
4
5
{% if theme.post_copyright.enable and not is_index %}
<div>
{% include 'post-copyright.swig' with { post: post } %}
</div>
{% endif %}
  1. themes\next\layout\_macro目录下新建post-coyright.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
{% set ccLicense = theme.creative_commons.license | lower %}
{% set ccIcon = '<i class="fa fa-fw fa-creative-commons"></i>' %}
{% set ccText = ccLicense | upper %}
{% if ccLicense === 'zero' %}
{% set ccType = 'publicdomain/zero/1.0/' %}
{% else %}
{% set ccType = 'licenses/' + ccLicense + '/4.0/' %}
{% endif %}
{% set ccURL = 'https://creativecommons.org/' + ccType %}

<ul class="post-copyright">
<li class="post-copyright-author">
<strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>{#
#}{{ post.author || author }}{#
#}</li>
<li class="post-copyright-link">
<strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
{% set postURL = post.url || post.permalink %}
{{ next_url(postURL, postURL, {title: post.title}) }}
</li>
<li class="post-copyright-license">
<strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>{#
#}{{ __('post.copyright.license_content', next_url(ccURL, ccIcon + ccText)) }}{#
#}</li>
</ul>
  1. 打开主题配置文件,在post板块加入如下代码

    #Declare license on posts
    post_copyright:
    enable: true
    license: CC BY-NC-SA 4.0

查看文章是否出现版权声明

addthis share工具添加

  1. addthis share官网注册账号,添加分享工具,设置成自己想要的样式。

  2. 主题根目录下,打开文件add-this.swig,路径layout\_partials\share,全选替换成如下代码

1
2
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-###"></script>

注意:###填写你自己的代码。

  1. 主题根目录下,打开layout\_macro,新建post-addthis.swig文件,然后写入如下代码
1
2
3
<div ><b>分享到</b></div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_share_toolbox_oslc"></div>
  1. 打开主题配置文件,搜素addthis share修改或添加如下代码
1
2
3
post_addthis: 
enable: true
add_this_id: #此处填写你自己的ID

如图

  1. 打开主题根目录下layout\_macro,找到post.swig在你想要添加分享按钮的地方加入如下代码块
1
2
3
4
5
{% if theme.post_addthis.enable and not is_index %}
<div>
{% include 'post-addthis.swig' %}
</div>
{% endif %}

手机端效果如下

-------------本文结束感谢您的阅读-------------
koakie wechat
扫码加好友
给我一点更新的动力吧,谢谢各位看官