[mcj]hexo-next安装教程

版本信息

hexo：

hexo: 3.8.0
hexo-cli: 1.1.0
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.8.0
node: 8.12.0
v8: 6.2.414.66
uv: 1.19.2
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2p
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

---

next： 6.0.6
npm： 6.4.1
cnpm：

cnpm@6.0.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.5.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@8.12.0 (D:\Program Files\nodejs\node.exe)
npminstall@3.18.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.16299
registry=https://registry.npm.taobao.org

设置步骤

1 设置阅读次数，并改为热度

新版本的next主题已经集成了LeanCloud，所以需要修改的地方很少，首先打开模版配置文件，然后找到leancloud_visitors:，把false改为true，然后填上LeanCloud的id和key

leancloud_visitors:
  enable: true
  app_id:
  app_key: 
  # LeanCloud Counter Security Plugin (beta, currently under the testing).
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in lc counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
  security: false
  betterPerformance: false

这样就打开了，不过这样的话，默认文字是：阅读次数，打开/next/languages/zh-CN.yml，把里面的阅读次数改为热度

打开/next/layout/_macro/post.swig，修改{# LeanCould PageView #}部分为：

 {% if theme.leancloud_visitors.enable %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{__('post.views')}}&#58;</span>
{% endif %}
<span class="leancloud-visitors-count"></span>
<span>℃</span>
</span>
{% endif %}

完成！

2 打开评论功能

这个版本的next也集成了评论功能，具体：
打开模版配置文件，找到valine，设置为true，然后填上LeanCloud的id和key即可开启。

valine:
  enable: true
  appid:  
  appkey:  
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

它会自动在Lean中添加一个Comment的类。

完成！

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

实现效果图

具体实现方法

点击这里 或者 这里挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码：

然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址

4 添加动态背景

就像这种的：

具体设置可以看这篇：
【mcj】next主题如何添加动态背景

5 实现点击出现桃心效果

具体实现方法
在网址输入如下

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

<!– 页面点击小红心 –>

<script type=”text/javascript” src=”/js/src/love.js”></script>

6 修改文章底部的那个带#号的标签

具体实现方法
修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成<i class=”fa fa-tag”></i>

7 在每篇文章末尾统一添加“本文结束”标记

在路径 \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-paw"></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

到此,就大功告成了.

8 修改作者头像并旋转

最新版6.6已经集成了头像旋转功能，搜索avatar，然后将rotated置为true即可。

头像设置打开 主题配置文件 找到Sidebar Avatar字段

# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径，只需把你的头像命名为header.jpg（随便命名）放入themes/next/source/images中，将avatar的路径名改成你的头像名就OK啦！

旋转：打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

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

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

9 修改“代码块自定义样式

具体实现方法
打开\themes\next\source\css\_custom\custom.styl,向里面加入：(颜色可以自己定义)

// Custom styles.
code {
    color: #ff5151;
    background: #f0f0f0;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

10 主页文章添加阴影效果

没用这个，因为用了之后，文章间距会很大

打开\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);
  }

11 网站底部字数统计

切换到根目录下，然后运行如下代码

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>

12 实现统计功能

输入：npm install hexo-symbols-count-time --save

然后，打开站点配置文件，输入：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

再打开模版配置文件

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 5
  wpm: 200

然后重启服务

13 添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件，添加红框上的代码

代码如下：

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

不过现在next 6 已经集成了，直接在模版配置文件中找到：pace:，把false改为true，然后进入：E:\01 个人文档\荔枝面条\07 学习资料\07 代码\mcj686pages\themes\next\source\lib 输入：
git clone https://github.com/theme-next/theme-next-pace pace重新生成即可。

14 在文章底部增加版权信息

在目录 next/layout/_macro/下添加 my-copyright.swig：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
        });
    });  
</script>
{% endif %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig，在代码

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加增加如下代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import "my-post-copyright"

保存重新生成即可。
如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---
title: 前端小项目：使用canvas绘画哆啦A梦
date: 2017-05-22 22:53:53
tags: canvas
categories: 前端
copyright: true
---

小技巧：如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

然后记得修改hexo配置文件中的url为网站地址：
url: http://mcj686.gitee.io

完成。

15 隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用或者隐藏之间的代码即可，或者直接删除。位置如下：

 {% if config.symbols_count_time.total_time %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    {% if theme.symbols_count_time.item_text_total %}
      <span class="post-meta-item-text">{{ __('post.total_time') }}&#58;</span>
    {% endif %}
    <span title="{{ __('post.total_time') }}">{#
    #}{{ symbolsTimeTotal(site, theme.symbols_count_time.awl, theme.symbols_count_time.wpm) }}{#
  #}</span>
  {% endif %}
</div>

{% if theme.seo %}
  {% set nofollow = ' rel="external nofollow"' %}
{% endif %}

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '爱生活，爱娜娜?') }}{#
#}</div>
{% endif %}

16 添加密码功能

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

17 添加分享功能

进到next目录，然后：
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

完成之后，打开模版配置文件，设置：

18 添加萌萌哒宠物

首先安装插件：npm install --save hexo-helper-live2d
然后，选个宠物，比如miku
将以下代码添加到主题配置文件_config.yml，修改miku：

# 添加萌萌哒宠物 
live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-miku
  display:
    position: right
    width: 140
    height: 260
  mobile:
    show: true

然后下载模型，模型名称可以到这里参考，一些模型的预览可以在这里。

所有模型列表如下：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save 
live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save l
ive2d-widget-model-haru)live2d-widget-model-haruto
live2d-widget-model-hibikilive2d-widget-model-hijik
ilive2d-widget-model-izumilive2d-widget-model-koharu
live2d-widget-model-mikulive2d-widget-model-ni-j
live2d-widget-model-nicolive2d-widget-model-nietzsche
live2d-widget-model-nipsilonlive2d-widget-model-nito
live2d-widget-model-shizukulive2d-widget-model-tororo
live2d-widget-model-tsumikilive2d-widget-model-unitychan
live2d-widget-model-wankolive2d-widget-model-z16

19 博文置顶

首先：
npm install hexo-generator-index --save
然后，修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后，打开/layout/_macro/post.swig，找到<div class=”post-meta”>，在下面添加：

          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=7D26CD>置顶</font>
            <span class="post-meta-divider">|</span>
          {% endif %}

在文章中添加 top 值，数值越大文章越靠前，如：

---
title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

20 添加打赏功能

先生成微信和支付宝的二维码，然后，把图片放到next/source/images下 ，找到主题配置文件，在最后加上：

# Reward
reward_comment: 写作不易，您的打赏是我写作的动力！！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

21 DaoVoice 在线联系

参考此文：
https://hoxis.github.io/hexo-next-daovoice.html

22 浏览页面的时候显示当前浏览进度

打开themes/next/_config.yml，搜索关键字scrollpercent，把false对划线true

23 本地搜索

首先安装：npm install hexo-generator-searchdb --save

然后：打开themes/next/config.yml，搜索关键字localsearch，设置为true。

24 文章顶部显示更新时间

打开主题配置文件config.yml，关键字搜索updatedat设置为true：

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: ture
  categories: true

参考：https://www.jianshu.com/p/ae3a0666e998

25 给代码块增加复制功能

下载clipboard.min.js
保存文件clipboard.js / clipboard.min.js ，目录如下：\next\source\lib\clipboard

然后，在.\themes\next\source\js\src目录下，创建clipboard-use.js，文件内容如下：

/*页面载入完成后，创建复制按钮*/
!function (e, t, a) { 
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

在.\themes\next\source\css_custom\custom.styl样式文件中添加下面代码：

//代码块复制按钮
.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;
}

在.\themes\next\layout_layout.swig文件中，添加引用（注：在 swig 末尾或 body 结束标签（</body>）之前添加）：

  <!-- 代码块复制功能 -->
  <script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script>  
  <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

26 新建404界面

在站点根目录下，输入hexo new page 404，在默认Hexo站点下/source/404/index.md

如果你不想编辑属于自己的404界面，可以显示腾讯公益404界面，代码如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

27 静态资源压缩（未采用）

在站点目录下：
cnpm install gulp@3.9.1 -g
cnpm install gulp@3.9.1

然后，安装插件：

cnpm install gulp-minify-css --save
cnpm install gulp-uglify --save
cnpm install gulp-htmlclean --save
cnpm install gulp-imagemin --save

在Hexo站点下添加gulpfile.js文件，文件内容如下：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
  return gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
  .pipe(htmlclean())
  .pipe(htmlmin({
    removeComments: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }))
  .pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', function() {
    gulp.src('./public/demo/**/*.*')
        .pipe(imagemin({
           optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
           progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
           interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
           multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('./public/uploads'));
});
// 默认任务
gulp.task('default', [
  'minify-html','minify-css','minify-js','minify-images'
]);

需要只在每次执行generate命令后执行gulp就可以实现对静态资源的压缩，完成压缩后执行deploy命令同步到服务器：

hexo g
gulp
hexo d

28 修改背景

内容板块透明
博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .content-wrap 标签下 background: white修改为：
background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景
博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .header-inner 标签下 background: white修改为：
background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景
博客根目录 themes\next\source\css_schemes\Pisces_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为：
background: rgba(255,255,255,0.7); //0.7是透明度

然后修改博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .sidebar 标签下 background: $body-bg-color修改为：
background: rgba(255,255,255,0.7); //0.7是透明度

按钮背景
博客根目录 themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;

29 设置置顶标志

打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到<div class=”post-meta”>标签下，插入如下代码：

          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=7D26CD>置顶</font>
            <span class="post-meta-divider">|</span>
          {% endif %}

30 添加分类

使用： hexo new page categories 新建一个 分类 页面。
主题的 _config.yml 文件中的 menu 中进行匹配

menu:
  home: /      //主页
  categories: /categories //分类        （添加此行即可）
  archives: /archives   //归档
  tags: /tags   //标签                  
  about: /about   //关于

31 添加标签云

下载tagcanvas.js
放入对应目录
将下载的 tagcanvas.js 放入主题目录 themes/NexT/source/js/custom/tagcanvas.js，custom 为新建文件夹。

新建标签云文件，引用 js
在 themes/NexT/layout/_partials 下建一个 plugin 文件夹，在该目录下 touch 一个名为 tagcanvas.swig 的文件，并写入如下内容：

<div class="tags" id="myTags">
  <canvas width="350" height="350" id="my3DTags">
    <p>Anything in here will be replaced on browsers that support the canvas element</p>
  </canvas>
</div>
<div class="tags" id="tags">
  <ul style="display: none">
    {{ tagcloud({
      min_font: 30,
      max_font: 50,
      amount: 999,
      color: true,
      start_color: '#8B0A50',
      end_color: '#0000CD',
    }) }}
  </ul>
</div>
<script type="text/javascript" src="/js/custom/tagcanvas.js"></script>
<script type="text/javascript" >
  window.onload = function() {
    try {
/*       TagCanvas.Start('my3DTags','tags',{
        textFont: 'Georgia,Optima',
        textColour: null,
        outlineColour: 'black',
        weight: true,
        reverse: true,
        depth: 0.8,
        maxSpeed: 0.05,
        bgRadius: 1,
        freezeDecel: true
      }); */
      TagCanvas.Start('my3DTags','tags', {
          textFont: 'Impact,"Arial Black",sans-serif',
          textColour: null,
          textHeight: 25,
          weight: true,
          dragControl: true,/* 拖动效果*/

          /* more options */
          });


    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('myTags').style.display = 'none';
    }
  };
</script>

使用 tagcanvas.swig
在 themes/NexT/layout/page.swig 中作如下修改：

替换红框中原来位置的 div 标签为如下：

{# tagcanvas plugin 球型云标签 #}
{% include '_partials/plugin/tagcanvas.swig' %}

参考：http://www.goat1000.com/tagcanvas-styling.php
https://www.vanjay.cn/2017/03/19/%E4%B8%BA-NexT-%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E7%90%83%E5%BD%A2%E6%A0%87%E7%AD%BE%E4%BA%91/

32 添加百度站长统计

先准备一些代码。站长统计，注册并获取统计代码

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2586cc1b1fabe0c7aa7bdf26441f973b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

修改底栏:找到\themes\next\layout_partials\footer.swig文件,加入上面这段代码

33 增加rating评星

https://widgetpack.com
在这里注册，然后会有一个ID号，然后在主题配置文件中找rating，设为true，然后把id’填上就行了。

34 加入已运行时间

首先在文件~/blog/themes/next/layout/_custom/sidebar.swig中加入下面代码，Date的值改为你自己的：

<div id="days"></div>
</script>

<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/27/2017 15:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();

</script>

然后修改~/blog/themes/next/layout/_macro/sidebar.swig：

{# Blogroll #}

{% if theme.links %}

  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
    <div class="links-of-blogroll-title">

      <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>

      {{ theme.links_title }}&nbsp;

      <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
    </div>
    <ul class="links-of-blogroll-list">

      {% for name, link in theme.links %}
        <li class="links-of-blogroll-item">

          <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
        </li>

      {% endfor %}
    </ul>

{# 移动到这下面 #}

{% include '../_custom/sidebar.swig' %}
  </div>

{# 原位置 #}

{% endif %}

这样就可以了，当然，要是不喜欢颜色，感觉不好看，就可以在上文所提的custom.styl加入：

// 时间

#days {
    display: block;
    color: rgba(34, 244, 246, 0.75);
    font-size: 13px;
    margin-top: 15px;
}

35 使用hexo-neat压缩静态页面

为什么要压缩页面静态资源
对于个人博客来说，优化页面的访问速度是很有必要的，如果打开你的个人站点，加载个首页就要十几秒，页面长时间处于空白状态，想必没什么人能够忍受得了吧。我个人觉得，如果能把页面的加载时间控制在三四秒内，就很不错了。

那么怎么提高hexo这个静态博客的页面加载速度呢？可以从以下的几个方面去入手：
将js文件尽可能放置到body的闭合标签之前，因为在加载或者引入js文件时是阻塞式的，如果我们在页面的最开始就引入这些js文件，而这些文件又比较大，会造成页面在渲染时长时间处于白屏状态。
尽量避免去引用访问速度非常低下的cdn或者图片，可以改用访问速度更快的cdn，或者将难以迅速加载的图片保存到自己的站点目录下，以免在加载图片时耗费了大量的时间，最后还加载不出来。
对页面的静态资源进行压缩，包括css、js和html等文件。我们自己添加的css和js文件为了可读性，往往会有很多换行和空格，这些对于浏览器来说并没什么卵用，甚至还会降低渲染页面的速度。至于html文件，由于Markdown转成html的bug，会导致页面存在大量的空白，如果你查看下页面的源代码，就会发现这些大量的空白符，十分难看。这也会造成页面渲染的性能问题。
hexo的压缩静态资源插件
网上有很多相关的博文，常规的做法是使用gulp来进行压缩，gulp是Node.js下的自动构建工具，通过一列的task执行步骤进行自动流程化处理。

使用这种方法会比较麻烦，每次压缩时还需要输入额外的命令，比较繁琐，个人不是很喜欢，有兴趣的可以去自己了解下相关的东西。这篇教程里很多详细的说明，里边有说到gulp的使用，绝对的精品文章。

这里我选择的是由rozbo大佬开发的hexo-neat压缩插件，配置简单，无需额外命令，你只要使用原本的调试三连或者部署三连就可以自动帮你完成静态资源的压缩！

如何使用hexo-neat
在站点根目录下安装hexo-neat

npm install hexo-neat --save
cnpm install clean-css --save
cnpm install --save html-minifier
cnpm install --save stream-to-array

为站点配置文件添加相关配置
下边是我自己站点的相关配置，直接添加到站点配置文件_config.yml的末尾就可以。可以安装自己的需求去自定义配置，不过有些注意事项，可以参考我后文的踩坑记录。

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

hexo-neat插件踩坑记录
由于在使用hexo-neat插件时，可以在命令窗口中看到各个文件的压缩率，于是我就开始捣鼓跳过哪些文件可以让效率更高。在鼓捣了一段时间之后，记录下使用该插件的一些注意事项，避免日后重蹈覆辙，也希望能对各位看官有所帮助。

跳过压缩文件的正确配置方式
如果按照官方插件的文档说明来配置exclude，你会发现完全不起作用。这是因为配置的文件路径不对，压缩时找不到你配置的文件，自然也就无法跳过了。你需要给这些文件指定正确的路径，万能的配置方式如下：

neat_css:
  enable: true
  exclude:
    - '**/*.min.css'

压缩html时不要跳过.md文件
.md文件就是我们写文章时的markdown文件，如果跳过压缩.md文件，而你又刚好在文章中使用到了NexT自带的tab标签，那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。

当初为了找到这个原因花了我两个晚上的时间，简直是夜不能寐。

压缩html时不要跳过.swig文件
.swig文件是模板引擎文件，简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件，那么你将会发现，你的所有页面完全没有起到压缩的效果，页面源代码里依然存在着一大堆空白。

36 站点地图

站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。
先安装一下，打开你的hexo博客根目录，分别用下面两个命令来安装针对谷歌和百度的插件

cnpm install hexo-generator-sitemap --save
cnpm install hexo-generator-baidu-sitemap --save

在博客目录的_config.yml中添加如下代码

Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

baidusitemap:
path: baidusitemap.xml
sitemap:
path: sitemap.xml

在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了

安装问题记录

ERROR Plugin load failed: hexo-neat

有一天突然不能使用cnpm安装软件了，安装的每一个文件夹左下角都有箭头，即无法访问

于是重新安装hexo-neat，结果出现如下错误：

ERROR Plugin load failed: hexo-neat
Error: Cannot find module 'any-promise'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
..................................
INFO  Start processing
INFO  Files loaded in 609 ms
INFO  0 files generated in 1.65 s

按照此https://github.com/mozilla/sign-addon/issues/111处指导，重新安装any-promise和thenify-all，结果可以了。

无法排除某个文件夹

由于demo演示需要，有些文件夹不需要渲染，之前使用的是在文件头添加一段说明，但是这种方法有个弊端，就是如果用iframe标签的话，萌萌哒插件会多次出现，且每个html都要重新修改。

修改方法为找到站点配置文件，里面有个skip_render，在后面加上排除目录即可。
参考如下链接：
https://www.maoxuner.cn/2017/03/10/hexo-skip-render.html

参考链接

【hexo】hexo安装

https://app.yinxiang.com/shard/s65/nl/15403086/5429a6b9-5cd5-4e3d-897d-d7645422720a?title=hexo

【hexo】从零开始制作 Hexo 主题

https://app.yinxiang.com/shard/s65/nl/15403086/9ac44c05-a3e3-4522-8340-5976fef14f1a

【hexo】生成sitemap站点地图

https://app.yinxiang.com/shard/s65/nl/15403086/e858c369-4346-4497-84e1-8926d88bf1e3

【hexo】如何写一个自己的hexo主题

https://app.yinxiang.com/shard/s65/nl/15403086/bc208c54-fabf-4fdc-b037-9ddf92ca4796