解决了博客的最基本的发文章和上传至同步之后，面临的问题自然是为自己的网站添加更多功能，当然可以选择DIY，但是想到自己能力有限，就算做出来想必也是优化和性能上有很大问题，就还是按部就班地来吧

前言

说实话，网上的教程很多，但是我仔细观察，发现基本上都是抄来抄去，也就是说错误类型一致，我配置站点的过程中参考了n篇教程，列一篇最有效的以供参考Moorez。本文大部分配置都是参考之，非常感谢大大。如果大家想要手把手从头开始配置建议参考他的文章，因为我的文章没有附图，很难看到效果，但是本文的坑全是我自己踩出来的，是得到了实践证明的。

配置选项

本地搜索

在站点根目录下执行以下命令

$ npm install hexo-generator-searchdb --save

在站点文件里任意位置加上

1
2
3

search:
	path: search.xml
	field: post

在主题配置文件里更改（默认为false）

1
2
3

# Local search
local_search:
	enable: true

顺便多说一句，网上的大部分教程都只说了前两步，而没有提到第三步，最后的结果应该是这样的
search

百度统计

首先登录百度统计

注意这个账号不是你的百度账号（搞不懂为什么明明是一家人不用一组账号…），之后跳出来的页面中，只需要复制hm.js?后面的id即可

编辑主题配置文件

修改baidu_analytics的值为你之前复制的id即可

最后成果

当我兴高采烈地弄完上面的步骤后发现还是不对，始终没有刷新出来，后来才恍然大悟，原来我还是在用本地的seerver看，而百度的服务是针对你的网站本身的，所以在上传之后应该是可以成功显示百度统计的功能的

评论区

在参考了网上的多篇文章之后，最终还是决定使用来必力

原因有几点

界面好看
没有奇怪的标语
UI美观

登录来必力，获取id

注册时可能需要梯子

来必力的官网有点奇怪，明明都是正常的中文，但是在登录时会莫名其妙地切换成汉语，原本是打算在chromedev里更改html的head里的lang为ko然后让Chrome自动翻译，但是这个方法行不通，它需要页面一开始加载时lang值更改才会出现需要翻译的提示。当然我们也可以选择百度翻译，这才知道原来是向我的邮箱里发送了验证码，一番折腾之后终于得到了id

编辑主题配置文件

编辑livere_uid字段如下

livere_uid: #your livere_uid

文章内链接颜色修改

实际上就是修改css的事，只要知道了css的位置就能很容易地修改（但是说实话这个项目不愧是大工程，我还没讲过分类这么细的css，以后接触的项目越多应该就会习以为常吧）
进入文件

themes\next\source\css\_common\components\post\post.styl

在末尾加上

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中选择.post-body是为了不影响标题，选择p是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

修改代码块自定义样式

打开\themes\next\source\css\_custom\custom.styl修改为

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

主页文章添加阴影效果

同上，在custom里添加

// 主页文章添加阴影效果
 .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);
  }

显示每篇文章的字数和大概阅读时间

在根目录下安装`hexo-wordcount`

1	$ npm install hexo-wordcount --save

在主题的配置文件中，修改如下

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

但是，如果光是这样设置，我们会发现没有单位显示。这时候打开Blog\themes\next\layout\_macro\post.swig
找到

1
2
3

<span title="{{ __('post.wordcount') }}">
     {{ wordcount(post.content) }}
</span>

修改成

1
2
3

<span title="{{ __('post.wordcount') }}">
     {{ wordcount(post.content) }} 字
</span>

后面一个修改时间的同理，找到

1
2
3

<span title="{{ __('post.min2read') }}">
   {{ min2read(post.content) }}
 </span>

改成

1
2
3

<span title="{{ __('post.min2read') }}">
   {{ min2read(post.content) }} 分钟
 </span>

事实就是修改span的内容，说起来很简单的东西，但是我发现修改了之后死活没有变化，按理来说这里的原理并不复杂应该不会有什么变数才对，后来我发现需要重新配置环境，直接刷新是不行的，关闭终端，重新hexo serve就ok了

添加顶部加载条

因为我参考的文章作者的pull request被merge了，所以现在只需要在站点配置文件中修改pace为true即可.站点配置文件里还有各种loading的主题可以选择,我把里面的主题都尝试了一遍，最终还是决定采用pace-theme-minimal主题。

添加动态背景

如果hexo是最新版本的话，只需要在主题配置文件里找到canvas-nest，将其属性改为true。当然，事实上文档里有很多主题，我选用的是另外一个canvas-lines

但是，我发现添加了动态背景之后主页文章透明度太低了，有点奇怪的感觉。那还是打开刚才的costom.styl,添加如下的代码
1
2
> backgroung-color: rgba(255, 255, 255, .5);
>

我之前还奇怪为什么hexo的库里会有three，现在终于明白了，是用来当背景使用的

修改推荐网站icon

实际上就是修改不妨看看前面的icon样式，默认是一个链接，在font-awesome中找到你喜欢的样式之后把代码拷贝，打开/theme/next/layout/_macro/sidebar.swig中，找到blogroll（这个名字是通过chrome开发者工具找到的），将部分代码修改如下

{# 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-yourfavicon" aria-hidden="true"></i>
                {{ theme.links_title }}
              </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>
            </div>
          {% endif %}

这里代码里的fa-yourfavicon就是之前说过的代码名称，改完之后重新部署即可

更改网站icon

这个折腾了我好久…

下载图标

在easyicon中下载一个32x32的文件，并存为
favicon.ico

存入本地

图标的存储位置一定要搞清楚，主题配置文件里的默认路径都是站点下的source里的，而且它在代码里特意注明了source里的文件夹不能取名为images，因为和next里的images冲突了，于是我在source下的文件夹取名为image，然后把favicon.ico存入这个目录下，

修改主题配置文件

将favicon部分改为

favicon: 
  #small: /images/favicon-16x16-next.png
  medium: /image/favicon.ico
  #apple_touch_icon: /images/apple-touch-icon-next.png
  #safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

反正我是这么改的，很多人说直接写成这样的形式

1	favicon: /image/favicon.ico

但是我亲身尝试好像出了点问题，后台返回说路径有问题，我估计这个favicon是一个像类的东西（也有可能是改版了）,所以还是像我这样写比较稳妥

修改Tag样式

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

注意：应重启环境才能看到效果应用

每篇文章末尾统一添加本文

在\themes\next\layout\_macro中新建passage-end-tag.swig文件，其中添加如下代码

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束,感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-footer之前添加如下代码

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

最后在主题配置文件最后加入如下代码

1
2
3

# 文章末尾添加“本文结束”标记
passage-endtag:
  enabled: true

原文这里代码还打错了，我直到看了后台返回的log才知道名字拼错了。做完了以上三个步骤应该就可以实现每篇文章末尾都有指定的格式了，当然第一段html可以自拟。

添加RSS

安装插件

1	$ npm install --save hexo-generator-feed

打开站点配置文件

找到plugin，修改如下

1
2
3

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

打开主题配置文件

修改如下

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

修改完之后hexo g，然后重新配置环境，应该就有rss的效果了

直接点击RSS图标是没用的，应该复制链接然后在RSS软件中订阅

文章写作方式

这个严格意义上来说不算是配置，而是一种写作习惯，但是我觉得作者这样的方式非常优雅，于是我也决定采用，就是每篇文章more之前的部分，用blockquote来表示

更改默认的markdown渲染css

最开始有这个想法的初衷是觉得next的blockquote太丑了，颜色不够好看。改起来其实很简单，重要的是找到css文件的位置，我自己并没有找到…因为那些文件名都太具有迷惑性了，但是我百度了hexo next的blockquote成功地找到了管理markdown文件的css路径

\themes\next\source\css\_common\scaffolding\base.styl

找到了就好办，打开文件，搜索关键词blockquote，修改border-left属性为border-left: 4px solid rgb(134,206,236);

修改默认的代码高亮

原版的代码高亮配色不太美观，虽然有多种主题可以换，但是都不太如人意。这里我在一个hexo的主题melody里扒了一个highlight配色下来，代码如下

$highlight-background = #F6F8FA
 $highlight-current-line = #00346e
 $highlight-selection = #80CBC440
 $highlight-foreground = #90A4AE
 $highlight-comment = #90A4AE90
 $highlight-red = #E53935
 $highlight-orange = #F76D47
 $highlight-yellow = #FFB62C
 $highlight-green = #91B859
 $highlight-aqua = #39ADB5
 $highlight-blue = #6182B8
 $highlight-purple = #7C4DFF
 $highlight-gutter = {
   color: #CFD8DC,
   bg-color: $highlight-background
 }

找到存储highlight的文件hexo-site/themes/next/source/css/_common/components/highlight/theme.styl里，将normal里的代码替换成上述代码即可

鼠标点击特效

我主要参考的教程里的鼠标点击特效太水了，本来也淡了做这个特效的心思的，但是在偶然间预览到melody这个hexo主题时，迅速被里面的鼠标点击特效震撼到了，太炫酷了，妈妈我要学这个。点进了文档里没有看到这个技术的细节，只是提到了anime.js,遂顺藤摸瓜找到了anime的官网，发现这是一个提供做js动画的库，并不是我想要的特效，就在我迷茫时，突然发现anime的官网上用的就是这个特效，点开chrome-dev，大概看了一下，引用了两个js文件，anime.js和fireworks.js,后者就是我想要的效果！马上写了个html测试一下，很遗憾，不行，点开控制台，发现是没有canvas元素，在html中按官网的样子加入了一个canvas。这下特效有了，但是控制台还是会报错，原因是ga函数找不到，再一看ga函数源于一个叫analytics的js文件，可是开发者工具的sources栏里好像没看到有这个js，无奈只能点进去，发现是动态引用的，但是无所谓了，没有这个函数特效一样能够工作。于是就把官网上的fireworks.js下载了下来，并且把使用到ga函数的部分给注释掉。最后，在新建的html上调试成功。可是噩梦才刚刚开始，后面省略无数个字，摸索了一整天才把这个搞好，现在开始。

下载资源

在anime的官网页面上，打开chrome开发者工具，在sources里把一下两个文件找到，并且下载到本地

fireworks.js
anime.js

存入本地的路径为hexo-site/themes/next/source/js/src/

编辑_layout文件

之前已经在自己原来写过的静态网站上测试过了，想要实现鼠标点击的烟花特效，做完以下几步即可

html中新建`canvas`,属性如下

1	<canvas class="fireworks" style="width: 1226px; height: 680px;position: fixed;left: 0;top: 0; z-index: 1; pointer-events: none" ></canvas>

这里面有几个属性要特别注意，一个是class名为fireworks，一个是position设为fixed，最重要的是设置pointer-event属性，这个属性能让你的鼠标点击穿透这个canvas直到下层，这个非常关键，不然的话你把canvas放在上面，下面的链接全都点不了了

在`body`末尾先后引入`anime.js`,`fireworks.js`

一定要注意顺序，anime要先引入不然会出错，而且要放在dom后，不然会出现引用错误。这两步做完就可以实现功能了

在`_layout`文件中作出上述修改

其实做个小测试很简单，但是如何将这个功能引入我们的网站就比较麻烦了，因为如果要在网站上实现效果，就必须修改所有的html。我想到这既然是一个框架，那么html应该有个模板，事实上这个模板就是_layout.swig,这个文件位于hexo-site/themes/next/layout/下。花了大概十分钟把这个文件看明白，然后在文件的最后引入这两个js,并且在开头（body元素后面）引入我们之前提到过的canvas应该就可以了.

使canvas的尺寸自适应

我之前提到过的canvas的大小是写死的，这样不仅不优雅，而且不能实现响应式布局，还是在_layout.swig文件里，在所有的dom元素后面添加一段

<script>
　　window.onload = function(){
　　　　//resize canvas
　　　　$(window).resize(resizeCanvas);  
   
 function resizeCanvas() {  
 		  var canvas= $('.fireworks')[0];
   
        canvas.height = window.innerHeight;  
   
        canvas.width = window.innerWidth; 
        
        //console.log(canvas.width,canvas.height);
 };  
 </script>

这样就能实现canvas自适应布局了

原版的footer栏太丑了，决定好好修饰一下

删除hexo和next信息

找到themes/next/layout/_partials/footer.swig,打开编辑，删除class为powered-by和theme-info的相关dom（怎么总有种过河拆桥的感觉…）

文字居中

在footer.swig里直接添加样式竟然没有效果，点开开发者工具才知道原来footer-inner这个类已经继承了text-align:left的属性（很好奇为什么我直接改写覆盖不了）,好嘛，干脆换个地方修改好了。打开\themes\next\source\css\_custom\custom.styl，添加如下代码

1
2
3

.footer-inner {
   text-align: center
}

修改用户名图标

这里引用的技术是font-awesome，说实话我还是第一次接触这个，据说是为bootstrap设计的框架，但是我被它的简介和强大性震撼到了，不需要配置路径，下载文件什么的，只需要首先在官网上选择你喜欢的icon，在html中引用js之后，随便新建一个元素（官网建议最好是i，因为比较简介），然后设置class格式为fa icon-name，这里的icon-name是官网上选定元素之后会告诉你的名字，icon就出现了，简洁且强大。回到本文，按下面几个步骤进行：

上官网选择你喜欢的icon，把名字记下来
打开主题配置文件，搜索footer下的icon，将其值修改为你刚才找到的icon名
大功告成

修改文章的阅读全文

这个特效我是看别人的博客里有的，觉得很炫酷，但是网上好像没有相应的教程，学习了这么多配置，干脆自己也来个DIY好了

首先找到相应的css文件

当然，在这之前先确定好元素的名称，好在css里找对应，使用chrome开发者工具，发现这个阅读全文的按钮class为post-button，在css文件夹下找，最终在路径为themes/next/source/css/_schemes/Mist/_posts-expanded.styl（我的主题是Mist）

修改css代码

然后修改其中.post-button的代码如下

.post-button {
  margin-top: 20px;
  text-align: center;

  a {
    padding: 2px 20px;
    font-size: $font-size-base;
    color: #000;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 3px;
    transition: all .2s ease

    +mobile() { font-size: $font-size-small; }
    +desktop-large() { font-size: $font-size-large; }

    &:hover {background-color: #000;color: #fff}
  }
}

最终的效果如图

将自己写的html托管在hexo下

hexo文件运作

首先应该把hexo的文件规律搞清楚。总共有两套文件体系，一个是本地的，另外一个是上传至github上的。后者实际上就是本地的public部分，也就是每次hexo g之后生成的文件夹。

每次hexo g之后，它就是会把所有hexo-site/source下的文件全部渲染一遍变成public里的文件，也就是说，想要托管自己的html，就需要把html放在这个文件夹下。

新建文件夹

在hexo-site/source下新建文件夹，像我就是建立了一个demo,路径为hexo-site/source/demo,新建的html放在里面就可以了，比如我把我这个学期写的地图放了进去gdMap.html

在站点配置文件中取消对这个文件夹的渲染

光是把路径确定好了还不够，因为hexo默认是会对所有的html按它的格式来渲染的，我们需要在站点配置文件中找到skip-render,修改代码如下

1	skip_render: demo/*

表示对demo下所有的文件都不渲染，当然这里也可以根据自己的需求来改写，比如skip_render: demo/*.html(只是取消对html文件的渲染)

在`md`文件中引用html

像这样的格式引用即可

1	[链接](/demo/gdMap.html)`

DIY规律

做了这么多配置基本上对整体的流程也很清楚了，自己DIY了几个选项效果也很好，基本上DIY配置的话规律如下

修改CSS

进入/theme/next/sources/css下，找到对应的styl文件进行修改，实在不行可以在这个目录下的_custom下修改，这个css文件应该具有覆盖的最高权限。

修改DOM（比如修改图标）

注：修改css之后直接刷新页面就可以看到效果，因为css是即时渲染的，但是修改dom不可以，必须重新hexo server

有两种方法，不过我自己想了想，如果两种方法都能实现的情况下还是推荐使用第二种，更标准，符合软件工程规范

修改`.swig`文件

虽然我之前没接触过此类文件，但是在修改过几个配置之后发现这实际上就一个dom预编译软件（我自己根据sass之类的猜测的），这个文件里是最直接的dom模板，但缺点是除非是新建元素，否则不建议直接修改这里的元素，把东西写死了很难看，而且和系统的文件风格不一致

修改`主题配置文件`

next主题的作者就很小心我之前说的问题，它把可配置的选项都写进了主题配置文件，如果想修改直接在主题配置文件里修改即可，简单且耦合性弱，不容易出错。可惜的是我之前有些地方就没这么做，现在再修改也比较麻烦，只能以后注意了

在修改.swig时注意，如果欲修改的配置选项是以宏引用的形式调用的话，放弃修改.swig文件，直接在主题配置文件里修改你想要的配置

结语

花了很大的功夫配置了这么些，七成是跟着教程做的，三成是自己摸索的。全部过了一遍之后，一方面是增进了自己的信心，另一方面就是了解了大概的框架，以后想要自己diy一些部分也很容易。目前来说这些功能应该是够用了，以后有需要的话再添加吧.

前言

配置选项

本地搜索

在站点根目录下执行以下命令

在站点文件里任意位置加上

在主题配置文件里更改（默认为false）

百度统计

首先登录百度统计

编辑主题配置文件

最后成果

评论区

登录来必力，获取id

编辑主题配置文件

文章内链接颜色修改

修改代码块自定义样式

主页文章添加阴影效果

显示每篇文章的字数和大概阅读时间

在根目录下安装hexo-wordcount

在主题的配置文件中，修改如下

添加顶部加载条

添加动态背景

推荐网站

设置推荐网站

修改推荐网站icon

更改网站icon

下载图标

存入本地

修改主题配置文件

修改Tag样式

每篇文章末尾统一添加本文

添加RSS

安装插件

打开站点配置文件

打开主题配置文件

文章写作方式

更改默认的markdown渲染css

修改默认的代码高亮

鼠标点击特效

下载资源

编辑_layout文件

html中新建canvas,属性如下

在body末尾先后引入anime.js,fireworks.js

在_layout文件中作出上述修改

使canvas的尺寸自适应

修改footer栏

删除hexo和next信息

文字居中

修改用户名图标

修改文章的阅读全文

首先找到相应的css文件

修改css代码

将自己写的html托管在hexo下

hexo文件运作

新建文件夹

在站点配置文件中取消对这个文件夹的渲染

在md文件中引用html

DIY规律

修改CSS

修改DOM（比如修改图标）

修改.swig文件

修改主题配置文件

结语

在根目录下安装`hexo-wordcount`

html中新建`canvas`,属性如下

在`body`末尾先后引入`anime.js`,`fireworks.js`

在`_layout`文件中作出上述修改

在`md`文件中引用html

修改`.swig`文件

修改`主题配置文件`