添加评论功能

可用的评论系统大概有：

HyperComments：https://www.hypercomments.com （来自俄罗斯的评论系统，使用谷歌账号注册。）

来必力：https://livere.com （来自韩国，使用邮箱注册。）

畅言： http://changyan.kuaizhan.com （安装需要备案号。）

Gitment： https://github.com/imsun/gitment （有点小bug，比如说每次需要手动初始化，登录时会跳到主页。。）

Valine: https://github.com/xCss/Valine 

来必力使用方法

打开来必力官网：
https://livere.com，
注册，点击上方的安装，选择免费的city版本。并点击现在安装。

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="*************">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

复制其中的uid字段。
打开主题目录下的 blog/themes/next/_config.yml 配置文件，定位到 livere_uid 字段，粘贴上刚刚复制的UID。

Next主题背景设置

添加背景

在 NEXT 预留的自定义样式文件themes/next/source/css/-custom/custom.style中修改

// 添加背景图片
body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;

    /*这是设置底部文字, 看个人需要修改*/
     #footer > div > div {
        color:#eee;
    }
   /* .main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    opacity: 0.5;
    min-height: 500px;
}*/
/*.bg_content {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}*/
//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

}
// Custom styles.

透明背景

内容部分

在themes\next\source\css_schemes\Pisces_layout.styl 文件 .content-wrap 标签下 background: white修改为：

background: rgba(255,255,255,0.3); //0.3是透明度

菜单栏

在themes\next\source\css_schemes\Pisces_layout.styl 文件 .header-inner 标签下 background: white修改为：

background: rgba(255,255,255,0.3); //0.3是透明度

站点概况

在 themes\next\source\css_schemes\Pisces_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为：

background: rgba(255,255,255,0.3); //0.3是透明度

然后修改博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .sidebar 标签下 background: $body-bg-color修改为：

background: rgba(255,255,255,0.3); //0.3是透明度

按钮背景

themes\next\source\css_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;

next主题设置首页显示预览

themes/next目录，用文本编辑器打开_config.yml文件
搜索"auto_excerpt",找到如下部分：

 auto_excerpt:
 enable: false
 length: 150

把enable改为对应的false改为true

Hexo添加标签和分类

首先打开theme/next/_config.yml，找到如下配置，删除”categories”和“tags”前的注释符#。

menu:
 home: / || home
 about: /about/ || user
 tags: /tags/ || tags
 categories: /categories/ || th
 archives: /archives/ || archive
 #schedule: /schedule/ || calendar
 #sitemap: /sitemap.xml || sitemap
 #commonweal: /404/ || heartbeat

进入博客根目录下，执行如下两条命令：

$ hexo create page tags
$ hexo create page categories

打开要分类的文章，在文件头添加“tags”标签或“categories”进行分类。

title: hexo 添加标签和分类 
date: 2019-10-01 09:01:56
categories: 
- hexo
- tags
tags:
- hexo
- tags

完成后hexo g,hexo s。

统计访客数

在\themes\next_config.yml中找到busuanzi_count:
并进行更改：

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 浏览
  page_pv_footer: 次

添加文章结束标识

在路径 /themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
    {% endif %}
</div>

打开 themes/next/layout/_macro/post.swig 文件,添加：

<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
 </div>

然后打开主题配置文件 _config.yml,在末尾添加：

passage_end_tag:
enabled: true```



## 添加代码复制
下载插件clipboard.js 。打开 themes/next/source/lib/ ,新建文件夹 clipboard。把下载 clipboard.js下的 src 文件夹下的文件拖动到 clipboard文件夹下。打开 themes/next/source/js/src/ ,新建文件 custom.js ,代码如下:
``` bash
//此函数用于创建复制按钮
function createCopyBtns() {
    var $codeArea = $("figure table");
    //查看页面是否具有代码区域，没有代码块则不创建 复制按钮
    if ($codeArea.length > 0) {
        //复制成功后将要干的事情
        function changeToSuccess(item) {
             $imgOK = $("#copyBtn").find("#imgSuccess");
                if ($imgOK.css("display") == "none") {
                    $imgOK.css({
                        opacity: 0,
                        display: "block"
                    });
                    $imgOK.animate({
                        opacity: 1
                    }, 1000);
                    setTimeout(function() {
                        $imgOK.animate({
                            opacity: 0
                        }, 2000);
                    }, 2000);
                    setTimeout(function() {
                        $imgOK.css("display", "none");
                    }, 4000);
                };
        };
        //创建 全局复制按钮，仅有一组。包含：复制按钮，复制成功响应按钮
        //值得注意的是：1.按钮默认隐藏，2.位置使用绝对位置 position: absolute; (position: fixed 也可以，需要修改代码)
        $(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
        //创建 复制 插件，绑定单机时间到 指定元素，支持JQuery
        var clipboard = new Clipboard('#copyBtn', {
            target: function() {
                //返回需要复制的元素内容
                return document.querySelector("[copyFlag]");
            },
            isSupported: function() {
                //支持复制内容
                return document.querySelector("[copyFlag]");
            }
        });
        //复制成功事件绑定
        clipboard.on('success',
            function(e) {
                //清除内容被选择状态
                e.clearSelection();
                changeToSuccess(e);
            });
        //复制失败绑定事件
        clipboard.on('error',
            function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        //鼠标 在复制按钮上滑动和离开后渐变显示/隐藏效果
        $("#copyBtn").hover(
            function() {
                $(this).stop();
                $(this).css("opacity", 1);
            },
            function() {
                $(this).animate({
                    opacity: 0
                }, 2000);
            }
        );
    }
}
//感应鼠标是否在代码区
$("figure").hover(
    function() {
        //-------鼠标活动在代码块内
        //移除之前含有复制标志代码块的 copyFlag
        $("[copyFlag]").removeAttr("copyFlag");
        //在新的（当前鼠标所在代码区）代码块插入标志：copyFlag
        $(this).find(".code").attr("copyFlag", 1);
        //获取复制按钮
        $copyBtn = $("#copyBtn");
        if ($copyBtn.lenght != 0) {
            //获取到按钮的前提下进行一下操作
            //停止按钮动画效果
            //设置为 显示状态
            //修改 复制按钮 位置到 当前代码块开始部位
            //设置代码块 左侧位置
            $copyBtn.stop();
            $copyBtn.css("opacity", 0.8);
            $copyBtn.css("display", "block");
            $copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
            $copyBtn.css("left", -$copyBtn.width() - 3);
        }
    },
    function() {
        //-------鼠标离开代码块
        //设置复制按钮可见度 2秒内到 0
        $("#copyBtn").animate({
            opacity: 0
        }, 2000);
    }
);
//页面载入完成后，创建复制按钮
$(document).ready(function() {
  createCopyBtns();
});

打开 themes/next/layout/_custom/ ,新建文件 custom.swig ，代码如下:

<script type="text/javascript" src="/lib/clipboard/clipboard.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>

修改文件 themes/next/layout/_layout.swig ,在标签 上面插入代码:

{% include '_custom/custom.swig' %}

参考：https://zhuanlan.zhihu.com/p/30836436
https://www.jianshu.com/p/efbeddc5eb19
https://blog.csdn.net/zgcr654321/article/details/86751765