Hexo个人博客Next主题配置
添加评论功能
可用的评论系统大概有：
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('