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('<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
标签:function,Hexo,博客,next,themes,copyBtn,background,Next,css 来源: https://www.cnblogs.com/kevens/p/14401939.html