前言

好久没更新了, 因为懒- -
前面介绍了Hexo的一些基本搭建→基于Hexo+github+coding搭建个人博客——基础篇(从菜鸟到放弃)
对于追求装X的博主来说, 基本的搭建是满足不了的, 接下来整理了一下各方面的细节优化, 包括页面字体大小、配色、背景、SEO(搜索引擎优化)、域名绑定、DNS域名解析实现负载均衡等.
关于NexT主题的很多配置、插件都可以在官方文档找到答案, 那么博主只是整理了一些官方没怎么提及的细节优化.

解决Hexo命令fs.SyncWriteStream问题

请看解决Hexo命令fs.SyncWriteStream问题

高度定制优化篇

集成Mod分享组件

Step1、获取 AppKey
在 Mob 注册账号后, 点击头像进入后台, 选择 shareSDK 添加一个 Web应用:

Step2、在主题配置文件中添加配置:

1
2
3

mob_share:
  enable: true
  appkey: ********

Step3、在next/layout/_partials/share/里面添加mob_share.swig:

<!--MOB SHARE BEGIN-->
<div class="-hoofoo-share-title">分享到: </div>
<div class="-hoofoo-share-buttons">
    <div class="-mob-share-weibo -hoofoo-share-weibo -hoofoo-share-ui-button"><i class="fa fa-weibo" aria-hidden="true"></i></div>
    <div class="-mob-share-weixin -hoofoo-share-weixin -hoofoo-share-ui-button"><i class="fa fa-weixin" aria-hidden="true"></i></div>
    <div class="-mob-share-qq -hoofoo-share-qq -hoofoo-share-ui-button"><i class="fa fa-qq" aria-hidden="true"></i></div>
    <div class="-mob-share-twitter -hoofoo-share-twitter -hoofoo-share-ui-button"><i class="fa fa-twitter" aria-hidden="true"></i></div>
    <div class="-hoofoo-share-more -hoofoo-share-ui-button -mob-share-open"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>
</div>
<div class="-mob-share-ui" style="display: none">
    <ul class="-mob-share-list">
        <li class="-mob-share-weibo"><p>新浪微博</p></li>
        <li class="-mob-share-weixin"><p>微信</p></li>
        <li class="-mob-share-qzone"><p>QQ空间</p></li>
        <li class="-mob-share-qq"><p>QQ好友</p></li>
        <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
        <li class="-mob-share-renren"><p>人人网</p></li>
        <li class="-mob-share-kaixin"><p>开心网</p></li>
        <li class="-mob-share-douban"><p>豆瓣</p></li>
        <li class="-mob-share-youdao"><p>有道云笔记</p></li>
        <li class="-mob-share-mingdao"><p>明道</p></li>
        <li class="-mob-share-pengyou"><p>朋友网</p></li>
        <li class="-mob-share-facebook"><p>Facebook</p></li>
        <li class="-mob-share-twitter"><p>Twitter</p></li>
        <li class="-mob-share-pocket"><p>Pocket</p></li>
        <li class="-mob-share-google"><p>Google+</p></li>
        <li class="-mob-share-tumblr"><p>Tumblr</p></li>
        <li class="-mob-share-instapaper"><p>Instapaper</p></li>
        <li class="-mob-share-linkedin"><p>Linkedin</p></li>
    </ul>
    <div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{theme.mob_share.appkey}}"></script>
<!--MOB SHARE END-->

Step4、在next/layout/post.swig中添加条件分支:

{% if theme.jiathis %}
      {% include '_partials/share/jiathis.swig' %}
    {% elseif theme.baidushare %}
      {% include '_partials/share/baidushare.swig' %}
    {% elseif theme.add_this_id %}
      {% include '_partials/share/add-this.swig' %}
    {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
      {% include '_partials/share/duoshuo_share.swig' %}
    {% elseif theme.mob_share.enable %}
      {% include '_partials/share/mob_share.swig' %}
{% endif %}

Step5、在next/source/css/_common/components/third-party/里添加样式文件mob_share.styl:

.-hoofoo-share-buttons{
    display: inline-block;
}
.-hoofoo-share-title{
    font-size: 1.1em;
    font-weight: 200;
}
.-hoofoo-share-ui-button{
    cursor: pointer;
    background-color: #555;
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    margin: 10px;
    border-radius: 25px;
    float: left;
    transition: background 0.4s;
    -moz-transition: background 0.4s;    /* Firefox 4 */
    -webkit-transition: background 0.4s;    /* Safari 和 Chrome */
    -o-transition: background 0.4s;
}
.-hoofoo-share-weibo:hover{
    background-color: #cf3f41;
}
.-hoofoo-share-weixin:hover{
    background-color: #18a01a;
}
.-hoofoo-share-qq:hover{
    background-color: #950c0c;
}
.-hoofoo-share-twitter:hover{
    background-color: #2ab3e6;
}
.-hoofoo-share-more:hover{
    background-color: #777;
}
.-mob-share-weixin-qrcode-content{
    border-radius: 4px;
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.-mob-share-weixin-qrcode{
    margin: 5% !important;
    width: 90% !important;
    height: auto !important;
}
.-mob-share-weixin-qrcode-close {
    background-image: url('/lib/fancybox/source/fancybox_sprite.png') !important;//因为兼容问题把vendor改成了lib, 根据自己的路径修改
}
.-mob-share-weixin-qrcode-close {
    overflow: hidden;
    line-height: 100px !important;
    position: absolute !important;
    top: -18px !important;
    right: -18px !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
    z-index: 8040 !important;
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){
    .-mob-share-weixin-qrcode-close {
        background-image: url('/lib/fancybox/source/fancybox_sprite@2x.png') !important;//因为兼容问题把vendor改成了lib, 根据自己的路径修改
        background-size: 44px 152px !important; /*The size of the normal image, half the size of the hi-res image*/
    }
}
.-mob-share-close{
    height: 4em !important;
    font-size: 0.8em !important;
    line-height: 4em !important;
    background: #555 !important;
    color: #fff !important;
}

Step6、同一目录下的 third-party.styl 中添加:

1	@import "mob_share";

Step7、在next/layout/_scripts/third-party/里添加脚本文件mob_share.swig:

{% if theme.mob_share.enable %}
<script type="text/javascript">
    //微信二维码点击背景关闭
    $('body').delegate('.-mob-share-weixin-qrcode-bg','click', function(){
         $(".-mob-share-weixin-qrcode-close").trigger("click");
    }); 
</script>
{% endif %}

Step8、在next/layout/_layout.swig的body标签结束前添加:

1	{% include '_scripts/third-party/mob_share.swig' %}

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件, 添加如下代码:

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

文章加密访问

打开themes->next->layout->_partials->head.swig文件,插入这样一段代码:

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

然后在文章上写成类似这样:

---
title: Hello World
date: 2016/7/13 20:46:25
categories:
- Diary
tags:
  - Testing
  - Another Tag
password: 123456
---

博客更换Disqus评论

由于多说即将关闭, 本站启用Disqus.
既然Disqus已被墙, 那么为了对没有梯子的同学标示友好, 我们可以选择点击加载Disqus评论的方式, 这个问题貌似也得到了主题作者的关注-> (NexT5.2.0)[https://github.com/iissnan/hexo-theme-next/milestone/7]
具体做法如下:
打开themes/next/layout/_partials/comments.swig, 在文件内容 <div id="disqus_thread">前面加入下面内容:

1
2
3

<div style="text-align:center;">
  <button class="btn" id="load-disqus" onclick="disqus.load();">加载 Disqus 评论</button>
</div>

再打开themes/next/layout/_scripts/third-party/comments/disqus.swig, 需要替换原本的 Disqus 的加载的内容, 如果希望显示评论数量, 就保留 run_disqus_script(‘count.js’) 这一行, 这样页面载入时还会加载 disqus 的资源:

run_disqus_script('count.js');
{% if page.comments %}
  run_disqus_script('embed.js');
{% endif %}

替换为下面的内容:

var disqus = {
  load : function disqus(){
      if(typeof DISQUS !== 'object') {
        (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
        $('#load-disqus').html("评论加载中, 请确保你有梯子, 若评论长时间未加载则你可能翻墙失败...").fadeOut(9000); //加载后移除按钮
      }
  }
}

前面的 function run_disqus_script(disqus_script){}这一段, 不打算显示评论数量的话, 可以一起删掉, 不显示评论数量的话, 那么点击加载按钮之前, 网页是不会加载来自 Disqus 的资源的.

NexT启用Disqus-Proxy 不翻墙也能使用Disqus

多说于2017.06.01停止了服务, 不得不选择其他的第三方评论服务, 试了一下国内的服务发现不是麻烦（例如需要备案）就是不靠谱或者界面不炫酷（装X嫌疑…）

还是使用Disqus吧…But, 这个早就被GWF隔离了, 虽然自己可以闪现过墙=.=, 但游客不一定都会这个技能…
那么问题来了, 怎么做一个公共的梯子实现人人翻墙？
在Gayhub全球最大同性交友网中发现, 早就有大神做了这样一个服务, 并选择了ciqulover(在此感谢大神的鼎力相助)的Disque-Proxy项目作为梯子.
当然也还有其他的Disqus-Proxy -> fooleap、 jiananshi

Flow

流程就没什么好说的了, 如上图, 在前端页面上测试 disqus 加载是否成功, 如果成功则显示 disqus 的评论框, 反之加载独立的评论框…
具体请看https://ycwalker.com/2017/06/01/about-diqus-proxy/

Get Api-secret

api-secret 需要你在 Disqus Api 的官方网站上开启 API 权限, 申请成功后会得到这个秘钥.

并且需要在后台的 Settings => Community 里开启访客评论:

Deploy Disqus-Proxy

首先你得有一台可以访问Disqus的VPS^[1]… 博主用的是Linode

Docker方式启动:

docker run -d --name disqus-proxy --restart=always -p 5509:5509 \
-e API_SECRECT=your_serect \
-e SHORT_NAME=your_short_name \
ycwalker/disqus-proxy-server

更多方式请移步到 https://github.com/ciqulover/disqus-proxy-server

NexT Configuration

Copy Static File

将disqus-proxy项目中/build/static文件复制到博客../next/source/下.
static文件中应该包含main.0d0338ae.js和main.0603c539.css.

_config.yml

在主题配置文件中添加:

disqus_proxy:
  enable: true
  # 如果 disqus 账号名没设置 那么 disqus_proxy 也不会生效
  username: ookamiantd
  # 下面两项你需要更改为自己服务器的域名和端口
  server: disqus-proxy.yangbingdong.com 
  port: 5509  # 端口号需要与后端设置一致
  # 头像路径设置
  defaultAvatar: /images/avatar/avatar-default.jpg
  adminAvatar: /images/avatar/avatar-admin.jpg
  # 脚本和 css 路径
  js: /static/js/main.0d0338ae.js
  css: /static/css/main.0603c539.css

comment.swig

修改/next/layout/_partial/comment.swig, 在最后一个</div>钱加上:

<div id="disqus_proxy_thread"></div>
      <div id="disqus_thread"></div>
      {% if theme.disqus_proxy.enable %}
          <script type="text/javascript">
              window.disqusProxy = {
                username: '{{ theme.disqus_proxy.username }}',
                server: '{{ theme.disqus_proxy.server }}',
                port: '{{ theme.disqus_proxy.port }}',
                defaultAvatar: '{{ theme.disqus_proxy.defaultAvatar }}',
                adminAvatar: '{{ theme.disqus_proxy.adminAvatar }}',
                identifier: '{{ page.path }}'
              };
              window.disqus_config = function () {
                this.page.url = '{{ page.permalink }}';
                this.page.identifier = '{{ page.path }}';
              };
              window.onload=function(){
                var s = document.createElement('script');
                s.src = "{{ theme.disqus_proxy.js }}";
                s.async = true;
                document.body.appendChild(s);
              }
          </script>
          <link rel="stylesheet" href="{{ theme.disqus_proxy.css }}">
      {% endif %}

渲染效果:

<div id="disqus_proxy_thread"></div>
<div id="disqus_thread"></div>
<script type="text/javascript">
  window.disqusProxy = {
    username: 'ookamiantd',
    server: 'disqus-proxy.yangbingdong.com',
    port: '5509',
    defaultAvatar: '/images/avatar/avatar-default.jpg',
    adminAvatar: '/images/avatar/avatar-admin.jpg',
    identifier: '2017/disqus-proxy/'
  };
  window.disqus_config = function () {
    this.page.url = 'http://ookamiantd.top/2017/disqus-proxy/';
    this.page.identifier = '2017/disqus-proxy/';
  };
  window.onload = function () {
    var s = document.createElement('script');
    s.src = "/static/js/main.0d0338ae.js";
    s.async = true;
    document.body.appendChild(s);
  }
</script>
<link rel="stylesheet" href="/static/css/main.0603c539.css">

custom.styl

可能由于改过样式还是本来就不兼容, 评论框一开始显示不出来, ciqulover大神帮我加了个样式之后就好了.

在/next/source/css/_custom/custom.styl中添加:

#disqus_proxy_thread .post{
  opacity: 1 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

博主也对评论框乱入了一些样式例如头像旋转…具体请看main.0603c539.css

Problem

博主使用了hexo-all-minifier进行静态文件压缩, 不明原因导致那两个评论框的js和css压缩之后会报错, 所以对压缩选项作设置, 在站点配置文件中添加:

html_minifier:
  enable: true
  exclude: 

css_minifier:
  enable: true
  exclude: 
    - '/home/ybd/GitRepo/blog/themes/next/source/static/css/main.0603c539.css'

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude: 
    - '/home/ybd/GitRepo/blog/themes/next/source/static/js/*.*.js'

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

Show

这是翻墙状态:

这是disqus_proxy:

修改文章页宽

打开themes/next/source/css/_variables/base.styl, 找到以下字段并修改为合适的宽度:

1	$content-desktop-large = 1000px

修改小型代码块颜色

修改\themes\next\source\css\ _variables\base.styl文件, 加入自定义颜色:

$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423
// 下面是我自定义的颜色
$my-code-foreground = #dd0055  // 用``围出的代码块字体颜色
$my-code-background = #eee  // 用``围出的代码块背景颜色

修改$code-background和$code-foreground的值:

// Code & Code Blocks // 用``围出的代码块 // -------------------------------------------------- 
$code-font-family               = $font-family-monospace 
$code-font-size                 = 15px 
$code-background                = $my-code-background 
$code-foreground                = $my-code-foreground 
$code-border-radius             = 4px

文章末尾追加版权信息

找到themes/next/layout/_macro/post.swig, 在footer之前添加如下代码(添加之前确保已添加样式):

<div>
	    <p id="div-border-left-red">
	   <b>本文基于<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 知识共享署名-相同方式共享 4.0 </a>国际许可协议发布</b><br/>
	    <span>
	    <b>本文地址: </b><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br/><b>转载请注明出处, 谢谢！</b>
	    </span>
	    </p>
</div>

添加文章结束标记

同样在themes/next/layout/_macro/post.swig中, 在wechat-subscriber.swig之前添加如下代码:

1	<div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>

添加热度

在/themes/hexo-theme-next/layout/_macro/post.swig里面的下面的位置加上如下代码:

{% if post.categories and post.categories.length %}
        <span class="post-category" >
        </span>
      {% endif %}

 <!-- 在下面的位置加上如下代码 -->
      <span id="busuanzi_container_page_pv">
      &nbsp; | &nbsp; 热度&nbsp; <span id="busuanzi_value_page_pv"></span>°C
      </span>
  <!-- 在上面的位置加上如上代码 -->    
  
      {% if post.comments %}
        {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
          <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
              <span class="post-comments-count ds-thread-count" data-thread-key="{{ post.path }}" itemprop="commentsCount"></span>
            </a>
          </span>

但是这有一个缺陷. 就是我们会发现在主页时显示的热度和进入博客后的热度不一样, 那是因为在主页时他显示的是主页这个页面的阅读量, 而不是博客的阅读量, 所以我们需要改变一些:

我们在/themes/hexo-theme-next/layout/_macro/目录下新建post-article.swig,把这些post.swig中的内容复制过去, 而且加上上面的统计代码, 然后在/themes/hexo-theme-next/layout/post.swig上面% import '_macro/post.swig' as post_template %中的post.swig改成post-article.swig, 这样子就解决啦. 就是在主页上的博客名字下面不会有阅读人数, 进入博客才能看见

添加Fork me on GitHub

去网址https://github.com/blog/273-github-ribbons挑选自己喜欢的样式, 并复制代码, 添加到themes\next\layout\_layout.swig的body标签之内即可
记得把里面的url换成自己的!

把侧边栏头像变成圆形, 并且鼠标停留在上面发生旋转效果

修改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-color;

  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */

}

/* start */
.site-author-image:hover {

  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

修改链接文字样式

打开themes\next\source\css\_common\components\post\post.styl添加以下代码:

.post-body p a{

 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }

}

themes/next/source/css/_common/components/post/post-title.styl修改为:

.posts-expand .post-title-link {

  display: inline-block;
  border-bottom: none;
  line-height: 1.2;
  vertical-align: top;

  &::before {
  ......

为next主题的主页文章添加阴影效果

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

为next主题添加nest背景特效

背景的几何线条是采用的nest效果, 一个基于html5 canvas绘制的网页背景效果, 非常赞！来自github的开源项目canvas-nest

特性

不依赖任何框架或者内库, 比如不依赖jQuery, 使用原生的javascript.
非常小, 只有1.66kb, 如果开启gzip, 可以更小.
非常容易实现, 配置简单, 即使你不是web开发者, 也能简单搞定.

使用非常简单

color: 线条颜色, 默认: ‘0,0,0’ ；三个数字分别为(R,G,B), 注意用,分割
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性, css属性用于控制所在层的位置, 默认: -1

eg :

1	<script type="text/javascript" color="255,132,0" opacity='0.6' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

不足: CPU占用过高

如何添加?

修改代码

打开next/layout/_layout.swig, 在</body>之前添加如下代码:

{% if theme.canvas_nest %}

<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

{% endif %}

修改主题配置文件

打开/next/_config.yml, 添加以下代码:

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

至此, 大功告成, 运行hexo clean 和 hexo g hexo s之后就可以看到效果了

鼠标点击爆炸特效

在 themes/next/source/js/src 新建js文件 fireworks.js:

"use strict";
function updateCoords(e) {
    pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left,
    pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
}
function setParticuleDirection(e) {
    var t = anime.random(0, 360) * Math.PI / 180,
    a = anime.random(50, 180),
    n = [ - 1, 1][anime.random(0, 1)] * a;
    return {
        x: e.x + n * Math.cos(t),
        y: e.y + n * Math.sin(t)
    }
}
function createParticule(e, t) {
    var a = {};
    return a.x = e,
    a.y = t,
    a.color = colors[anime.random(0, colors.length - 1)],
    a.radius = anime.random(16, 32),
    a.endPos = setParticuleDirection(a),
    a.draw = function() {
        ctx.beginPath(),
        ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
        ctx.fillStyle = a.color,
        ctx.fill()
    },
    a
}
function createCircle(e, t) {
    var a = {};
    return a.x = e,
    a.y = t,
    a.color = "#F00",
    a.radius = 0.1,
    a.alpha = 0.5,
    a.lineWidth = 6,
    a.draw = function() {
        ctx.globalAlpha = a.alpha,
        ctx.beginPath(),
        ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
        ctx.lineWidth = a.lineWidth,
        ctx.strokeStyle = a.color,
        ctx.stroke(),
        ctx.globalAlpha = 1
    },
    a
}
function renderParticule(e) {
    for (var t = 0; t < e.animatables.length; t++) {
        e.animatables[t].target.draw()
    }
}
function animateParticules(e, t) {
    for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
        n.push(createParticule(e, t))
    }
    anime.timeline().add({
        targets: n,
        x: function(e) {
            return e.endPos.x
        },
        y: function(e) {
            return e.endPos.y
        },
        radius: 0.1,
        duration: anime.random(1200, 1800),
        easing: "easeOutExpo",
        update: renderParticule
    }).add({
        targets: a,
        radius: anime.random(80, 160),
        lineWidth: 0,
        alpha: {
            value: 0,
            easing: "linear",
            duration: anime.random(600, 800)
        },
        duration: anime.random(1200, 1800),
        easing: "easeOutExpo",
        update: renderParticule,
        offset: 0
    })
}
function debounce(e, t) {
    var a;
    return function() {
        var n = this,
        i = arguments;
        clearTimeout(a),
        a = setTimeout(function() {
            e.apply(n, i)
        },
        t)
    }
}
var canvasEl = document.querySelector(".fireworks");
if (canvasEl) {
    var ctx = canvasEl.getContext("2d"),
    numberOfParticules = 30,
    pointerX = 0,
    pointerY = 0,
    tap = "mousedown",
    colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
    setCanvasSize = debounce(function() {
        canvasEl.width = 2 * window.innerWidth,
        canvasEl.height = 2 * window.innerHeight,
        canvasEl.style.width = window.innerWidth + "px",
        canvasEl.style.height = window.innerHeight + "px",
        canvasEl.getContext("2d").scale(2, 2)
    },
    500),
    render = anime({
        duration: 1 / 0,
        update: function() {
            ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
        }
    });
    document.addEventListener(tap,
    function(e) {
        "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
    },
    !1),
    setCanvasSize(),
    window.addEventListener("resize", setCanvasSize, !1)
};

打开themes/next/layout/_layout.swig,在</body>上面写下如下代码:

1
2
3

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/src/fireworks.js"></script>

添加音乐

去往网易云音乐搜索喜欢的音乐, 点击生成外链播放器, 复制代码直接放到博文末尾即可, height设为0可隐藏播放器, 但仍然可以播放音乐, auto设成0可手动播放, 默认是1自动播放, 可把代码放到themes/next/layout/_custom/sidebar.swig文件里, 播放器会显示在站点预览中

添加注脚

安装插件:

1	npm install hexo-reference --save

用法如下:

1	this is a basic footnote[/^1] ##用的时候把/去掉

在文章末尾添加:

1	[/^1]: basic footnote content ##用的时候把/去掉

eg:this is a basic footnote^[1]

自定义页面

执行hexo new page "guestbook"之后, 那怎么在博客中加进去呢？
找到\next\_config.yml下的memu, 把guestbook加进去:

menu:
 home: /
 categories: /categories
 #about: /about
 archives: /archives
 tags: /tags
 guestbook: /guestbook

图标网站: http://fontawesome.io/icons/

在/themes/hexo-theme-next/languages/zh-Hans.yml的目录下（这里默认你使用的是简体中文, 若是其他语言更改相应的yml就行）, 在memu下加一句即可:

1	guestbook: 留言

添加字数统计和阅读时间

安装插件

1	npm install hexo-wordcount --save

通过以上安装后, 你可以在你的模板文件后者.md文件加入以下相关的标签实现本插件的功能
字数统计:WordCount
阅读时长预计:Min2Read
总字数统计: TotalCount

修改post.swig模板

找到themes\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 }}">
		 &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">{{__('post.visitors')}} </span>
              <span class="leancloud-visitors-count"></span>
             </span>
         {% endif %}

	  
#以下部分为: 字数统计、阅读时长插入代码
         <span class="post-time">
	   &nbsp; | &nbsp;
           <span class="post-meta-item-icon">
             <i class="fa fa-calendar-o"></i>
           </span>
           <span class="post-meta-item-text">字数统计:</span>
           <span class="post-count">{{ wordcount(post.content) }}(字)</span>
           
         </span>
	  
      <span class="post-time">
	   &nbsp; | &nbsp;
           <span class="post-meta-item-icon">
             <i class="fa fa-calendar-o"></i>
           </span>
           <span class="post-meta-item-text">阅读时长:</span>
           <span class="post-count">{{ min2read(post.content) }}(分)</span>
           
         </span>
#以上部分为: 字数统计、阅读时长插入代码

修改之后的样子大概是这样的:

1、找到 \themes\next\layout\partials\下面的footer.swig文件, 打开会发现, 如下图的语句:

第一个框是下面侧栏的“日期❤ XXX”
如果想像我一样加东西, 一定要在双大括号外面写. 如: xxx,当然你要是想改彻底可以变量都删掉, 看个人意愿.
第二个, 是图一当中 “由Hexo驱动” 的Hexo链接, 先给删掉防止跳转, 如果想跳转当然也可以自己写地址, 至于中文一会处理. 注意删除的时候格式不能错, 只把<a>...</a>标签这部分删除即可, 留着两个单引号’’,否则会出错哦.
第三个框也是最后一个了, 这个就是更改图一后半部分“主题-Next.XX”,这个比较爽直接将..都删掉, 同样中文“主题”一会处理, 删掉之后在上一行 ‘-’后面可以随意加上你想显示的东西, 不要显示敏感信息哟, 请自重.

2、接下来, 处理剩余的中文信息. 找到这个地方\themes\next\languages\ 下面的语言文件zh-Hans.yml（这里以中文为例, 有的习惯用英文的配置文件, 道理一样, 找对应位置即可）
打开之后, 如图:

给博客添加吉祥物

详细信息: https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

效果图:

安装依赖:

1 2	npm install --save hexo-helper-live2d npm install --save live2d-widget-model-wanko

站点配置添加:

# hexo-helper-live2d配置, 参考https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    scale: 1
    use: live2d-widget-model-wanko
  display:
    superSample: 2 # 超采样等级
    width: 100 
    height: 100
    position: left # 位置
  mobile:
    show: false
  react:
    opacityDefault: 0.9 # 默认透明度
    opacityOnHover: 0.5 # 鼠标移上透明度

侧栏加入已运行的时间

themes/next/layout/_custom中添加sidebar.swig文件:

themes/next/layout/_custom链接

<div id="days"></div>
    <script>
    function show_date_time(){
        window.setTimeout("show_date_time()", 1000);
        BirthDay=new Date("01/10/2017 12:34:56");
        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>

在themes/next/layout/_macro/sidebar.swig中的</section>之前添加

1	{% include '../_custom/sidebar.swig' %}

样式:

themes/next/source/css/_custom/custom.styl

// 自定义的侧栏时间样式
#days {
    display: block;
    color: #fffa74;
    font-size: 14px;
    margin-top: 15px;
}

themes/next/layout/page.swig找到tagcloud并替换:

1	{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

设置动态title

themes/next/source/js/src下创建dytitle.js:

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="shortcut icon"]').attr('href', "/TEP.png");
        document.title = 'w(ﾟДﾟ)w 出BUG啦！！！！';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="shortcut icon"]').attr('href', "/favicon.png");
        document.title = '♪(^∇^*)又好了. . . ' + OriginTitile;
        titleTime = setTimeout(function () {
            document.title = OriginTitile;
        }, 2000);
    }
});

修改themes/next/layout/layout.swing,在 </body> 之前添加: :

1	<script type="text/javascript" src="/js/src/dytitle.js"></script>

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

修改模板/themes/next/layout/_macro/post.swig, 搜索 rel="tag">#, 将 # 换成<i class="fa fa-tag"></i>

元素微调自定义篇

那么如何把字体、页宽、按钮大小等等一些细节的东西调到自己喜欢的样式呢？
那就是通过浏览器元素定位, 调到自己喜欢的样式, 然后加到themes/next/source/css/_custom/custom.styl文件下面.

定位元素

用谷歌或者火狐浏览器打开博客页面, 按下F12进入调试
先点击定位按钮, 然后选择元素, 然后在定位出来的样式进行修改, 调到自己喜欢的样子, 就像这样↓

添加到样式文件

打开themes/next/source/css/_custom/custom.styl, 把调试好的样式加进去, 保存后Ctrl+F5就能看到效果了, 前提是在本地运行的, 下面列出博主的一些自定义样式:

// Custom styles.
// 页面头部背景
.header {  background:url(https://oldcdn.yangbingdong.com/img/header/header_background.jpg);}

// 子标题
.site-subtitle{ font-size: 15px; color: white; }

// 标题
.site-title {
    font-size: 40px;
    font-weight: bold;
}

// 标题背景
.brand{
    background: transparent;
}

// 菜单栏
.menu {
	margin-top: 20px;
	padding-left: 0;
	text-align: center;
	background: rgba(240, 240, 240, 0.5);
	margin-left: auto;
	margin-right: auto;
	width: 530px;
	border-radius: initial;
}

// 菜单图表链接 以及 超链接样式
a {
    color: rgba(0,0,0,0.8);
}
a:hover {
    color: #ff106c;
    border-bottom-color: #ff106c;
}

// 菜单字体大小
.menu .menu-item a {
    font-size: 14px;
}
.menu .menu-item a:hover {
    border-bottom-color: #ff106c;
}

// 文章背景框框
.post {
    margin-top: 10px;
    margin-bottom: 40px;
    padding: 18px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 0.8);
   }

// 站点描述
.site-description {
    font-size: 16px;

}

// 头部inner
.header-inner {
    padding: 45px 0 25px;
    width: 700px;
}

// 作者名
.site-author-name {
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 20px;
}

// 文章之间的分割线
.posts-expand .post-eof {
    margin: 40px auto 40px;
    background: white;
}

// 按钮样式
.btn {
    margin-top: 20px;
}

// ``代码块样式
code {
    color: #E6006B;
    background: white;
    border-radius: 3px;
}

// 文章```代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}

// 文章标题动态效果 next/source/css/_common/components/post/post-title.styl中.posts-expand .post-title-link确保`position: relative;`属性存在, 如果需要标题呈现链接效果颜色, 将`color`元素去除即可
.posts-expand .post-title-link::before {
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

// 文章内标题样式（左边的竖线）
.post-body h2, h3, h4, h5, h6 {
    border-left: 4px solid #657b83;
    padding-left: 10px;
}

.post-body h1 {
    border-left: 5px solid #657b83;
    padding-left: 10px;
}

body {
    color: #444;
    font-size: 16px;
}

但并不是所有的样式都能调, 像页宽, 多说评论的样式在custom.styl文件是无效的.

好玩的样式

先在themes/next/source/css/_custom/custom.styl中添加以下样式:

// 下载样式
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
/ /颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #5cb85c;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #9954bb;
}

用法如下:

文字增加背景色块

站点配置文件 , 主题配置文件

1 2	<span id="inline-blue">站点配置文件</span>, <span id="inline-purple">主题配置文件</span>

引用边框变色

如果没有安装成功, 那可能就是墙的原因. 建议下载 Node.js 直接安装.

关于更多基本操作和基础知识, 请查阅 Hexo 与 NexT 官方文档.

1
2

<p id="div-border-left-red">如果没有安装成功, 那可能就是墙的原因. 建议下载 `Node.js` 直接安装. </p>
<p id="div-border-top-blue">关于更多基本操作和基础知识, 请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.</p>

在文档中增加图标

支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件.
一件部署
只需一条指令即可部署到Github Pages, 或其他网站
丰富的插件
Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript.

- <i class="fa fa-pencil"></i>支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件. </i>
- <i class="fa fa-cloud-upload"></i>一件部署
<i>只需一条指令即可部署到Github Pages, 或其他网站</i>
- <i class="fa fa-cog"></i>丰富的插件
<i>Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript. </i>

<i class="fa fa-github"></i>
<i class="fa fa-github fa-lg"></i>
<i class="fa fa-github fa-2x"></i>

采用的是Font Awesome的图标.

图形边框效果

Download Now

1 2	<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>

这也是调用了Font Awesome的方法.

代码高亮相关

先看一则代码

Hello World示例这是链接

	public static void main(String[] args) {
+		System.out.println("Hello World!");
-		System.out.println("Hello World!");
	}

正确姿势, 代码片段开头:

1	[language] [title] [url] [link-text]

[language] 是代码语言的名称, 用来设置代码块颜色高亮, 非必须；
[title] 是顶部左边的说明, 非必须；
[url] 是顶部右边的超链接地址, 非必须；
[link text] 如它的字面意思, 超链接的名称, 非必须.

这 4 项应该是根据空格来分隔, 而不是[], 故请不要加[]. 除非如果你想写后面两个, 但不想写前面两个, 那么就必须加[]了, 要这样写: [] [] [url] [link text].

首先关于代码块颜色高亮, 高亮的模式可以在主题配置文件中设置:

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme

highlight_theme: normal

要颜色正确高亮, 代码语言的名称肯定要写对, 各种支持语言的名称可以查看这篇文章. 也可以在站点配置文件_config.yml中设置自动高亮:

blog/_config.yml

highlight:
  enable: true
  line_number: true
# 代码自动高亮
-  auto_detect: false
+  auto_detect: true

上边的diff是通过在[language]填写diff, 然后在相应代码前面加上-和+

顶部的文字样式:

// 文章```代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}

站点加速篇

更改默认Google字体库

访问系统总是会耗费一大部分的时间在加载google字体库上, 而且经常加载不成功.

方法一: 用国内的CDN库来替代主题中的google字体库, 到主题配置文件中设置默认字体库:

1	host: fonts.useso.com

方法二: 关掉字体库的引用, 默认加载本地字体库, 到主题配置文件设置:

1 2	font: enable: false

使用云盘存放图片资源

由于Github的服务器在海外, 那么如果把图片也放到Github显然是不科学的, 而且Github的存储空间也有局限, 那么在这里博主推荐使用七牛云储存
具体怎么做在之前的基础篇已经介绍过了, 详情请看→传送门

压缩代码

安装插件:

1	npm install hexo-all-minifier --save

之后执行hexo g就会自动压缩
但这有一个缺点, 就是本地运行也就是执行hexo s之后浏览器打开本地项目会很慢, 原因是每次点击一个链接它就会重新压缩一次, 所以建议本地调试的时候把项目根目录下的package.json中的"hexo-all-minifier": "0.0.14"先删掉再调试,或者改成注释:

"dependencies": {
    .
	.
	.
    "hexo-server": "^0.2.0",
    "hexo-wordcount": "^2.0.1",
    "this-is-compress-plugin": {
      "hexo-all-minifier": "0.0.14"
    }

其实也没必要压缩代码, 牺牲了性能, 每次生成静态文件都太慢了, 得不偿失的感觉.

高性能的压缩工具参考这里: minify文件压缩

SEO(搜索引擎优化)篇

网站验证

以下是几个搜索引擎的提交入口:

以百度为例, 谷歌的太简单就不说了:
打开百度站长验证网站
方式一: 文件验证

登录百度站长选择添加网站, 使用方式为文件验证
将下载的文件放到source文件下
由于hexo自动会对html文件进行渲染, 所以在站点配置文件中找到skip_render:
在后面添加文件名字, 如有多个用[a.html,b.html], eg:skip_render:[baidu_verify_tdOGHi8IQG.html, baidu_verify_vcJkI72f1e.html]
重新渲染文件
1
2
hexo clean
hexo d -g
然后可以点击百度站长的验证按钮了

方式二: CNAME验证

去站长添加网站选择CNAME验证
把地址解析到zz.baidu.com
完成验证

就像这样↓

添加并提交sitemap

安装hexo的sitemap网站地图生成插件:

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

在站点配置文件中添加如下代码.

# hexo sitemap
sitemap:
  path: sitemap.xml

baidusitemap:
  path: baidusitemap.xml

配置成功后, 会生成sitemap.xml和baidusitemap.xml, 前者适合提交给谷歌搜素引擎, 后者适合提交百度搜索引擎.
百度sitemap提交如下↓

验证成功之后就可以开始推送了, 这里说一下, Google的收录真的快的不要不要的, 第二天就能搜得到, 百度就不想说了, 不知道要等到猴年马月

主动推送

安装主动推送插件:

1	npm install hexo-baidu-url-submit --save

在根目录下, 把以下内容配置到站点配置文件中:

baidu_url_submit:
  count: 3 ## 比如3, 代表提交最新的三个链接
  host: www.henvyluk.com ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥, 请不要发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

至于上面提到的your_token可在百度站长如下位置找到↓

其次, 记得查看站点配置文件中url的值, 必须包含是百度站长平台注册的域名（一般有www）, 比如:

1
2
3

url: http://www.ookamiantd.top
root: /
permalink: :year/:month/:day/:title/

接下来添加一个新的deploy的类型:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: baidu_url_submitter
- type: git
  repo:
    github: git@github.com:masteranthoneyd/masteranthoneyd.github.io.git,master
    coding: git@git.coding.net:ookamiantd/ookamiantd.git,master

执行hexo deploy的时候, 新的连接就会被推送了. 这里讲一下原理:

新链接的产生, hexo generate会产生一个文本文件, 里面包含最新的链接
新链接的提交, hexo deploy会从上述文件中读取链接, 提交至百度搜索引擎

自动推送

把next主题配置文件中的baidu_push设置为true, 就可以了.

添加蜘蛛协议

在/source/目录下新建一个robots.txt文件, 添加下面的一段代码:

#hexo robots.txt
User-agent: *

Allow: /
Allow: /archives/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://blog.tangxiaozhu.com/search.xml
Sitemap: http://blog.tangxiaozhu.com/sitemap.xml
Sitemap: http://blog.tangxiaozhu.com/baidusitemap.xml

然后到百度站长更新一下, 就像这样↓

修改文章链接

hexo默认的文章链接形式为domain/year/month/day/postname, 默认就是一个四级url, 并且可能造成url过长, 对搜索引擎是十分不友好的, 我们可以改成domain/postname的形式. 编辑站点配置文件文件, 修改其中的permalink字段为permalink: :title.html即可.

更改首页标题格式为「关键词-网站名称 - 网站描述」

打开\themes\next\layout\index.swig文件, 找到这行代码:

1	{% block title %} {{ config.title }} {% endblock %}

把它改成:

1
2
3

{% block title %}
 {{ theme.keywords }} - {{ config.title }} - {{ theme.description }}
{% endblock %}

自动给所有外部链接添加nofollow

安装hexo-autonofollow, 在站点的根目录下执行以下命令:

1	npm install hexo-autonofollow --save

编辑站点配置文件, 新增以下内容到任意位置:

nofollow:
  enable: true
  exclude:
  - exclude1.com
  - exclude2.com

多PC同步源码篇

1.准备工作: 公司电脑和家里电脑配置git ssh密钥连接

2.上传blog到git: 此项建议先在blog进度最新的PC上进行, 否则会有版本冲突, 解决也比较麻烦. 在PC上建立git ssh密钥连接和建立新库respo在此略过:

编辑.gitignore文件: .gitignore文件作用是声明不被git记录的文件, blog根目录下的.gitignore是hexo初始化是创建的, 可以直接编辑, 建议.gitignore文件包括以下内容:

.DS_Store      
Thumbs.db      
db.json      
*.log      
node_modules/      
public/      
.deploy*/

public内的文件可以根据source文件夹内容自动生成的, 不需要备份. 其他日志、压缩、数据库等文件也都是调试等使用, 也不需要备份.

初始化仓库:

1 2	git init git remote add origin <server>

server是仓库的在线目录地址, 可以从git上直接复制过来, origin是本地分支, remote add会将本地仓库映射到托管服务器的仓库上.

添加本地文件到仓库并同步到git上:

1
2
3

git add . #添加blog目录下所有文件, 注意有个'.'(.gitignore里面声明的文件不在此内)    
git commit -m "hexo source first add" #添加更新说明    
git push -u origin master  #推送更新到git上

至此, git库上备份已完成.

3.将git的内容同步到另一台电脑: 假设之前将公司电脑中的blog源码内容备份到了git上, 现在家里电脑准备同步源码内容. 注意, 在同步前也要事先建好hexo的环境, 不然同步后本地服务器运行时会出现无法运行错误. 在建好的环境的主目录运行以下命令:

git init  #将目录添加到版本控制系统中    
git remote add origin <server>  #同上    
git fetch --all  #将git上所有文件拉取到本地    
git reset --hard origin/master  #强制将本地内容指向刚刚同步git云端内容

reset对所拉取的文件不做任何处理, 此处不用pull是因为本地尚有许多文件, 使用pull会有一些版本冲突, 解决起来也麻烦, 而本地的文件都是初始化生成的文件, 较拉取的库里面的文件而言基本无用, 所以直接丢弃.

4.家里电脑生成完文章并部署到服务器上后, 此时需要将新的blog源码文件更新到git托管库上, 不然公司电脑上无法获取最新的文章. 在本地文件中运行以下命令:

1	git add . #将所有更新的本地文件添加到版本控制系统中

此时可以使用git status查看本地文件的状态. 然后对更改添加说明更推送到git托管库上:

1 2	git commit -m '更新信息说明' git push

至此, 家里电脑更新的备份完成. 在公司电脑上使用时, 只需先运行:

git pull

获取的源码即为最新文件

插件总结篇

部署插件

1	npm install hexo-deployer-git --save

rss

1	npm install hexo-generator-feed --save

Algolia

此处有两个版本

第一（以0.2.0为例）:

在站点找到package.json, 把添加一行"hexo-algolia": "^0.2.0", 然后:

1	npm install hexo-algolia --save

这个为旧版的algolia, 优点是全文索引, 缺点是字数太多会索引失败

第二: 直接安装

1	npm install hexo-algolia --save hexo algolia

此处安装的应该是1.0.0之后的版本了, 优点是没有字数限制了（因为没有了全文索引）, 只会索引文章开头的部分字段. 但是需要在官网注册新key并且设置环境变量, 方法: https://github.com/iissnan/theme-next-docs/issues/162

sitemap

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

百度主动推送

1	npm install hexo-baidu-url-submit --save

分页插件

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save

站点配置文件:

index_generator:
  per_page: 6

archive_generator:
  per_page: 10 ##归档页面默认20篇文章标题
  yearly: true  ##生成年视图
  monthly: true ##生成月视图

tag_generator:
  per_page: 10

压缩插件

1	npm install hexo-all-minifier --save

七牛admin插件

1
2
3

npm install --save hexo-admin-qiniu
hexo server -d
open http://localhost:4000/admin/