原文链接: ookamiAntD’s Blog

前言

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

解决Hexo命令fs.SyncWriteStream问题

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

高度定制优化篇

博客更换Disqus评论

由于多说即将关闭，本站启用Disqus。
既然Disqus已被墙，那么为了对没有梯子的同学标示友好，我们可以选择点击加载Disqus评论的方式，这个问题貌似也得到了主题作者的关注-> NexT5.2.0
具体做法如下：
打开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 的资源的。

修改文章页宽

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

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

上面的代码有问题，主页也会出现结束标记。使用下面代码修复。

<!-- 添加文章结束标记 -->
<div>
  {% if not is_index %}
  <div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>
  {% endif %}
</div>

<!-- 现有代码 -->
{% if theme.wechat_subscriber.enabled and not is_index %}
  <div>
    {% include 'wechat-subscriber.swig' %}
  </div>
{% endif %}

添加热度

在/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>之前添加如下代码：

1
2
3

{% 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之后就可以看到效果了

多说评论优化以及美化

update：由于多说即将关闭，此博客将使用Disqus作为评论系统

添加音乐

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

添加注脚

安装插件：
npm install hexo-reference --save

用法如下：
this is a basic footnote[/^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下加一句即可：
guestbook: 留言

添加字数统计和阅读时间

安装插件

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（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）
打开之后，如图：

看到了吧，这个就是传值传过去的，你想显示什么就在这里面大肆的去改动吧。其实在第二个框中，就可以把值都改掉，不用接受传值的方式，完全自己可以重写。不过我不建议那样做，因为传值这样只要是后续页面需要这几个值那么就都会通过取值去传过去，要是在刚才footer文件中直接写死，后续不一定哪个页面需要传值，但是值为空了或者还是原来的，可就尴尬了。所以还是这样改动吧。

元素微调自定义篇

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

定位元素

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

添加到样式文件

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

// Custom styles.
// 页面头部背景
.header {  background:url(http://ojoba1c98.bkt.clouddn.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;
}
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;
}

用法如下：

**注意**: 修改和部署完后，如果效果没有出来，请尝试`Ctrl+F5`强制刷新页面。

文字增加背景色块

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

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

引用边框变色

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

关于更多基本操作和基础知识，请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.

关于更多基本操作和基础知识，请查阅 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 的大多数插件。
支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。

前言

解决Hexo命令fs.SyncWriteStream问题

高度定制优化篇

博客更换Disqus评论

修改文章页宽

修改小型代码块颜色

文章末尾追加版权信息

添加文章结束标记

添加热度

添加最近访客

添加Fork me on GitHub

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

修改链接文字样式

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

为next主题添加nest背景特效

特性

如何添加?

修改代码

修改主题配置文件

多说评论优化以及美化

添加音乐

添加注脚

自定义页面

添加字数统计和阅读时间

安装插件

修改post.swig模板

修改footer

元素微调自定义篇

定位元素

添加到样式文件

好玩的样式

文字增加背景色块

引用边框变色

在文档中增加图标

图形边框效果

域名绑定篇

购买域名

域名解析

站点加速篇

更改默认Google字体库

使用云盘存放图片资源

压缩代码

SEO(搜索引擎优化)篇

网站验证

添加并提交sitemap

主动推送

自动推送

添加蜘蛛协议

修改文章链接

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

多PC同步源码篇

插件总结篇

部署插件

rss

Algolia

sitemap

百度主动推送

分页插件

压缩插件

七牛admin插件

注脚插件

字数与阅读时间插件

主题升级备份

最后