对hexo中Next主题的DIY

DIY Next主题

总要有点追求，年轻人。

在搭建好了自己的博客之后，发现网上有很多大神都自己DIY了这个Next主题。于是我翻阅了好几篇文章还有Hexo和Next的官方文档之后，开始着手进行这个主题的DIY。

文章主页添加阴影

打开\themes\next\source\css\_custom\custom.styl，向里面加入：

.post {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }

在右上角或者左上角实现fork me on github

→字母版
→图案版
挑选自己喜欢的样式，并复制代码。然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址。

添加动态背景

如果next主题在5.1.1以上的话就可以简单点设置，直接在主题配置文件_config.yml中找到canvas_nest: false或者three_waves:false，把它相应改为true就行了（注意分号后面要加一个空格）。

实现点击界面出现桃心效果

在网址输入如下
http://7u2ss1.com1.z0.glb.clouddn.com/love.js
然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

1 2	<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script>

在网站底部加上访问量

打开主题配置文件\themes\next\_config.yml，在其中找到busuanzi_count，将参数enable改为true。接着在文件\themes\next\layout\_partials\footer.swig中的合适位置上加上如下参考代码，

<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>

网站底部字数统计

在命令行使用npm安装hexo-wordcount

1	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>

实现统计功能

在命令行使用npm安装hexo-wordcount

1	npm install hexo-wordcount --save

然后在主题的配置文件_config.yml中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

参考来源（感谢~）

http://blog.csdn.net/qq_33699981/article/details/72716951
http://www.cduyzh.com/hexo-settings-4/