写在前面
这是关于 Hexo 博客三篇博文的第二篇。关于 Hexo 博客 NexT 主题的简要美化和一些简单插件的添加使用。后续可能还会继续添加更新其他功能的操作说明。
美化
添加 fork me on github
实现效果
具体实现方法
点击这里或者这里挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码：
然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的 github 地址
在每篇文章末尾添加「致谢」
实现效果
具体实现方法
在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">------------- 本文结束 <i class="fa fa-heart"></i> 感谢您的阅读 -------------</div>
{% endif %}
</div>
接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：
代码如下：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打开主题配置文件（_config.yml)，在末尾添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。
设置侧边栏社交小图标
实现效果
具体实现方法
6.0 NexT版本之后，主题配置文件中的social社交地址后面跟这种格式即可添加小图标，为Font-Awesome，但必须要在前面加fa。需要什么图标在Font-Awesome官网查询对应的class并添加即可。
在网站底部加上访问量
实现效果
具体实现方法
打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话：
代码如下：
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
然后再合适的位置添加显示统计的代码，如图：
代码如下：
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
在这里有两中不同计算方式的统计代码：
- pv的方式，单个用户连续点击n篇文章，记录n次访问量
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
- uv的方式，单个用户连续点击n篇文章，只记录1次访客数
<span id="busuanzi_container_site_uv">
本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>
添加之后再执行hexo d -g，然后再刷新页面就能看到效果
网站底部字数统计
实现效果
具体实现方法
切换到根目录下，然后运行如下代码
$ npm install hexo-wordcount --save
然后在/themes/next/layout/_partials/footer.swig开始加上：
代码如下：
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
隐藏网页底部 powered By Hexo
打开themes/next/layout/_partials/footer.swig,使用
<!--
-->
隐藏之间的代码即可，或者直接删除。位置如图：
文章加密访问
实现效果
具体实现方法
打开themes->next->layout->_partials->head.swig文件，在以下位置插入这样一段代码：
代码如下：
<script>
(function () {
if ('{{ page.password }}') {
if (prompt('请输入文章密码') !== '{{ page.password }}') {
alert('密码错误！');
if (history.length === 1) {
location.replace("https://evenyao.com"); // 这里替换成你的首页
} else {
history.back();
}
}
}
})();
</script>
然后在要加密的文章上添加password属性，后面则是跟想要设置的密码，类似这样：
就可以达到上面 gif 的效果了
为博客添加小狗插件
实现效果
具体实现方法
在终端切换到你的博客的路径里，然后输入如下代码：
npm install -save hexo-helper-live2d
然后在在 hexo 的 _config.yml中添加参数：（具体配置可以看官方文档）
# 小狗插件
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-wanko
display:
position: left
width: 75
height: 100
mobile:
show: true
添加 DaoVoice 在线联系
实现效果
具体实现方法
首先在 daovoice 注册账号,邀请码是0f81ff2f，注册完成后会得到一个 app_id :
记下这个 app_id的值，然后打开
/themes/next/layout/_partials/head.swig,写下如下代码：
{% 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 %}
接着打开主题配置文件，在最后写下如下代码：
# Online contact
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id
重新 hexo g ，hexo s 就能看到效果了。
安装成功后可以在DaoVoice 控制台上的聊天设置里设置聊天窗口样式
博文显示缩略
实现效果
具体实现方法
在博文想要开始缩略的地方填入
<!--more-->
即可在这个地方分割
修改边栏头像为圆形框
实现效果
具体实现方法
打开位于 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 的文件，修改如下：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
opacity: hexo-config('avatar.opacity') is a 'unit' ? hexo-config('avatar.opacity') : 1;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
扩展：
继续添加如下代码可以让鼠标指向头像的时候，让头像框旋转
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
opacity: hexo-config('avatar.opacity') is a 'unit' ? hexo-config('avatar.opacity') : 1;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
transition: 1.4s all;
}
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}
右下角显示当前浏览百分比
实现效果
具体实现方法
打开 themes/next/_config.yml ，搜索关键字 scrollpercent 。把 false 改为 true。
边栏添加背景图 和 推荐阅读
实现效果
具体实现方法
- 背景图实现方法：
找到themes\next\source\css\_custom\custom.styl文件
添加如下代码：
.sidebar {
background: url([https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg](https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg "https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg")) no-repeat !important;
background-size: cover !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
}
- 推荐阅读 实现方法：
在主题配置文件中将# Blog rolls做如下配置即可
# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
#Title: http://example.com/
MDN web docs: https://developer.mozilla.org/zh-CN/
Web前端导航: http://www.alloyteam.com/nav/
Vue.js 文档: https://cn.vuejs.org/v2/guide/
Google 前端开发基础: http://wf.uisdc.com/cn/
添加网易云音乐播放器
实现效果
具体实现方法
在 网易云音乐网页版 中登录并创建歌单，然后选择生成外联播放器
找到下面的HTML代码，复制到next\.layout\_custom\sidebar.swig里面，并细微的进行修改代码即可
我的播放器代码如下：
只需要修改auto=1之前的地址即可
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=0&id=2357518522&auto=1&height=66"></iframe>
添加来必力评论模块
实现效果
具体实现方法
先到来 必力官网 注册账户
经过一系列设置之后，在代码管理里面找到自己的uid
然后在主题配置文件中设置来必力的uid即可
livere_uid: "MTAyxxxxxxNDk1Ng==" //填写来必力注册之后的uid即可
设置博文置顶
实现效果
具体实现方法
卸载原有的插件，安装另一个版本
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
然后在需要置顶的文章的标题栏中加上top: true即可。比如下面这篇文章：
这个时候置顶功能已经实现了，我们再编辑next/layout/_macro 目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码即可达到之前图中的效果
代码
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=ff6800>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
添加 JavaScript 3D library 背景效果
实现效果
具体实现方法
参考 JavaScript 3D library - Github
- cd 到相应的目录
$ cd themes/next
$ ls
- 用 git 命令克隆项目到文件目录
$ git clone https://github.com/theme-next/theme-next-three source/lib/three
- 在 NexT
_config.yml当中设置即可
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false
网友评论