Hexo+Coding搭建免费博客之Next主题设置（二）
本文转载自： https://www.93bok.com
前言
或许是对默认的东西没有好感，总觉得默认的主题是很丑很丑的，完美控是接受不了这个东东的，还好hexo是可以修改主题的。这里首推NexT主题，
精于心，简于形标语说的是真的不错。使用NexT主题的人比较多，这也说明这个主题确实很成熟了。优化，配置，扩展很多都集成了，比较简单。博文重质量，弄的太花哨确实没啥用。。。
一、安装Next主题
安装的过程很简单，就一行代码，不过要先进入博客根目录
cd /data/
git clone https://github.com/theme-next/hexo-theme-next themes/next
以上代码的意思是，从https://github.com/theme-next/hexo-theme-next将next主题下载到当前目录的theme/next文件夹中**
二、启用主题
修改站点配置文件（注意一下，这里分为站点配置文件和主题配置文件，下边的文章内容注意看我说的是站点配置文件还是主题配置文件，因为这两个文件的命名相同，但是所在位置却不同）
vim /data/_config.yml
三、设置主题外观
Scheme
是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：
Muse
默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist
Muse 的紧凑版本，整洁有序的单栏外观
Pisces
双栏 Scheme，小家碧玉似的清新
Gemini
左侧网站信息及目录，块+片段结构布局
这次是修改主题配置文件（找到下图的位置，想使用哪个外观就去掉之前的#即可）
vim /data/themes/next/_config.yml
四、设置语言
编辑
站点配置文件，将language设置成你所需要的语言，这里我选择zh-CN，语言选择可以在这看到/data/themes/next/languages/
vim /data/_config.yml
五、修改站点标题，副标题，描述等
编辑
站点配置文件
vim /data/_config.yml
上图是我修改的内容，我们Ctrl+C停掉Hexo之后再启动一次预览效果
六、设置菜单
菜单配置包括4个部分，第一是菜单名称，第二是菜单链接，第三是菜单项的显示文本，第四是菜单项对应的图标，Next主题使用的是Font Awesome提供的图标，Font Awesome提供了600+的图标，可以满足绝大多数的场景，同时不用担心图标显示模糊的问题
编辑主题配置文件
vim /data/themes/next/_config.yml
注释：
预览下效果
七、添加“分类”模块
1、新建一个分类页面
cd /data/
hexo new page categories
2、你会发现你的source文件夹下多了categories/index.md，打开index.md文件，修改如下
vim /data/source/categories/index.md
---
title: 分类
date: 2018-08-02 11:43:06
type: "categories"
---
3、编辑主题配置文件，找到menu字段，将categories取消注释
4、往后写文章，要注明categories，如下图，就会自动创建分类名，并把文章加入到对应的分类中
八、点击出现彩色桃心效果
1、在以下目录创建love.js文件，然后把下边的所有代码粘贴进去
vim /data/themes/next/source/js/src/love.js
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
2、编辑以下文件，在文件末尾加入以下代码
vim /data/themes/next/layout/_layout.swig
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
然后你就会发现，当你点击站点页面的时候，会有一些彩色桃心弹出来
九、添加文章分享功能（百度分享不支持https）
编辑主题配置文件加入以下代码
vim /data/themes/next/_config.yml
baidushare:
type: button
然后看一下效果，文章底部会多出分享的按钮
十、侧边栏设置
侧栏设置包括：侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等
编辑
主题配置文件，找到sidebar字段
十一、主页文章加阴影
vim /data/themes/next/source/css/_custom/custom.styl
// 主页文章添加阴影效果
.post {
margin-top: 5px;
margin-bottom: 20px;
padding: 5px;
-webkit-box-shadow: 0 0 20px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 20px rgba(202, 203, 204, .5);
}
效果如下图，文章之间多了阴影效果
十二、设置网站图标
默认的网站图标是一个N，当然是需要定制一个了，你可以去网站自己找图标，或者自己制作一个，比如我就是自己制作的，将其放在/data/themes/next/source/images/里面，然后去主题配置文件中修改如下
vim /data/themes/next/_config.yml
修改前：
修改后：
修改前效果
修改后效果
十三、添加搜索功能
1、安装 hexo-generator-searchdb 插件
cd /data/
npm install hexo-generator-searchdb --save
2、编辑站点配置文件找到Extensions字段添加如下内容
vim /data/_config.yml
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
3、编辑主题配置文件找到Local search字段，将enable设置为true
vim /data/themes/next/_config.yml
4、查看效果
十四、添加站点访问计数
编辑以下文件，在下图位置添加下面代码
vim /data/themes/next/layout/_partials/footer.swig
<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
<span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>
查看效果
十五、在每篇文章末尾统一添加版权标记
1、创建文件并添加以下代码
vim /data/themes/next/layout/_macro/passage-end-tag.swig
<div>
{% if not is_index %}
<div style="text-align:center;color: #FF0000;font-size:14px;">版权声明：本文属于原创文章</i></div>
<div style="text-align:center;color: #FF0000;font-size:14px;">转载请注明：www.93bok.com原创文章+本文链接，谢谢合作！！</i></div>
{% endif %}
</div>
2、编辑以下文件，在下图位置添加以下代码
vim /data/themes/next/layout/_macro/post.swig
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
3、编辑主题配置文件，在末尾添加以下代码
vim /data/themes/next/_config.yml
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
4、查看效果
十六、添加阅读全文按钮
因为在你的博客主页会有多篇文章，如果你想让你的文章只显示一部分，多余的可以点击阅读全文来查看，那么你需要在你的文章中添加
<!--more-->
十七、添加“关于”模块
1、新建一个“关于”页面
cd /data/
hexo new page about
2、你会发现你的source文件夹下有了about/index.md，打开index.md文件即可编辑关于你的信息，可以随便编辑。
3、打开 主题配置文件 找到menu，将about取消注释
十八、文章添加密码
修改以下文件
vim /data/themes/next/layout/_partials/head/head.swig
添加代码
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误！');
history.back();
}
}
})();
</script>
在该位置添加：
然后往后写文章的时候在头部写上如下：
十九、隐藏网站底部的powered By Hexo/强力驱动
编辑文件：
vim /data/themes/next/layout/_partials/footer.swig
添加的标识隐藏掉
二十、网站底部字数统计
cd /data/
npm install hexo-wordcount –save
然后修改：
vim /data/themes/next/layout/_partials/footer.swig
添加以下代码
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
位置如下：
二十一、侧边栏弹出设置
我这里把侧边栏弹出关闭
vim /data/themes/next/_config.yml
前边加上#号即可
二十二、文章置顶
效果如下图
1、卸载原有插件，安装另一个版本
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
2、编辑
vim themes/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 %}
如下图：
往后写文章，在顶部写上top: true即可实现
二十三、打赏
如图：
1、把微信和支付宝的打赏的图片上传到服务器的如下位置/data/themes/next/source/images/
2、编辑主题配置文件
vim themes/next/_config.yml
定位到reward
修改如下代码
# Reward
reward_comment: 如果此文为您解决燃眉之急或是带来些许明朗，不妨打赏小的一份狗粮
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png
如图
二十四、修改字体大小
vim /data/themes/next/source/css/_variables/base.styl
定位到font-size-base字段
修改：
二十五、开启版权功能
1、 修改主题配置文件
vim /data/themes/next/_config.yml
2、 定位到post_copyright字段
3、 将enable后边的false改为true
二十六、增加备案号
vim /data/themes/next/layout/_partials/footer.swig
<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
<span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
<span class="post-meta-divider">|</span>
<a href="http://www.miitbeian.gov.cn" target="_blank">桂ICP备17009723号</a>
</div>
二十七、增加友情链接
编辑主题配置文件
vim /data/themes/next/_config.yml
定位到Blog rolls
修改如下
********************过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。********************
