hexo主题配置再升级--插件配置

关于hexo博客搭建的知识请移步GitHub+Hexo搭建个人博客, 主题样式等相对简单，中间也有几次对主题的更改更换，也在版本更新里面做了相应的记录，博客的实用性在于他不断地完善， 对读者更加的友善， 让读者也更感兴趣， 此节就是博客的插件配置上介绍。

[toc]

前言

在此申明， 我博客使用的主题为hexo-theme-miho, 之前使用的主题是yelee 基础配置，在主题文档中都有介绍，我是在此基础上，对主题的样式进行了小的优化使其符合我的风格，对于主题样式的修改，在我的版本更新说明中都有介绍，可点击查看，所以，在本节中所有的插件安装配置等，都是基于该主题的，如你使用其他主题，大同小异，好好研究以下即可。

一. DaoVoice实现在线联系

用于用户之间的沟通插件。

注册登陆

官方网站注册登陆，注册登陆后创建团队，填写邀请码ab5cf222, 即可创建完成

安装代码

在themes/hexo-theme-miho/layout/layout.ejs文件中追加js代码：

<% if (theme.daovoice) { %>
  <script>
    (function(i,s,o,g,r,a,m){
      i["DaoVoiceObject"]=r;
      i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
      a=s.createElement(o),m=s.getElementsByTagName(o)[0];
      a.async=1;a.src=g;a.charset="utf-8";
      m.parentNode.insertBefore(a,m)}
    )(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/" + "<%- theme.daovoice.app_id %>" + ".js","daovoice")
  </script>

  <script>
    daovoice('init', {
      app_id: "<%- theme.daovoice.app_id %>",
      user_id: "<%- theme.daovoice.user_id %>",
      email: "<%- theme.daovoice.email %>",
      name: "<%- theme.daovoice.name %>",
      signed_up: <%- theme.daovoice.signed_up %>
    });
    daovoice('update');
  </script>

  <script>
    daovoice('init', {
      app_id: "<%- theme.daovoice_app_id %>"
    });
    daovoice('update');
  </script>
<% } %>

⚠️注意ejs文件的中对变量的引用，同时区别于swing文件， 不清楚的自行google

修改主题配置文件

主题配置文件：MyBlog/_config.yml,
添加配置：

# 在线联系 | DaoVoice
daovoice:
  enable: true
  app_id:
  user_id:    # 必填: 该用户在您系统上的唯一ID
  email:     # 选填:  该用户在您系统上的主邮箱
  name:       # 选填: 用户名
  signed_up: 1449821660      # 选填: 用户的注册时间，用Unix时间戳表示

测试

至此，代码安装修改完成， 重新部署博客， daovoice后台ping一下，看是否安装成功。

二. live2d安装配置

单调的博客主题可能产生审美疲劳，那我们就增加点二次元元素。

安装

一条命令解决了:

npm install -save hexo-helper-live2d

添加代码

在themes/hexo-theme-miho/layout/layout.ejs文件中追加：

<%- live2d() %>

修改配置文件

主题配置文件：MyBlog/_config.yml,
添加配置：

# Live2D
live2d:
  model: Epsilon2.1
  width: 200 # The width of your model. default: 150
  height: 350 # The height of your model. default: 300
  position: left
  opacityDefault: 1

更多配置参考官方文档

三. 鼠标点击♥️♥️效果

1. 下载love.js代码, 点击下载
2. 在themes/hexo-theme-miho/source/js/下面新建love.js,将上面下载的代码copy进去。
3. 在themes/hexo-theme-miho/layout/layout.ejs文件中追加代码：

<% if (theme.love) { %>
  <script type="text/javascript" src="/js/love.js"></script>
<% } %>

4. 主题配置文件MyBlog/_config.yml中添加配置：

# 鼠标点击桃心效果
love: true

四. 博客字数时长统计插件

在博客底部添加博客全站字数统计， 文章标题下方添加文章字数和阅读时长的统计。

installation

npm i –save hexo-wordcount

代码

在themes/hexo-theme-miho/layout/_partial/post/title.ejs相应位置添加：

<% if (theme.wordcount.enable){ %>
<ul>
  <li>
      <i class="fa fa-file-word-o"></i>
      字数统计<span class="post-count"><%= wordcount(post.content) %></span>字
  </li>
  <li>
    <span> | </span>
  </li>
  <li>
    <i class="fa fa-clock-o"></i>
    阅读时长<span class="post-count"><%= min2read(post.content) %></span>分钟
  </li>
</ul>
<% } %>

⚠️特别注意，博客主题的不同，可能添加的位置不同，找到合适的位置，使用的合适的样式，将代码添加进去即可。

配置文件

在根目录MyBlog/_config.yml主题配置文件中添加配置：

# Post wordcount display settings字数统计插件
# Dependencies: https://github.com/willin/hexo-wordcount
# 打开之后，会同时打开文章文字统计， 阅读时长和全站文字统计
wordcount:
  enable: true

关于wordcount的详细说明查看

五. 添加rss订阅

添加博客订阅功能。

安装

安装插件hexo-generator-feed

$ npm install hexo-generator-feed –save

配置

配置根目录下的_config.yml：

## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

配置主题目录下的_config.yml链接：

rss:
  title: Rss
  url: /atom.xml

运行测试

点击rss图标测试。

六. SEO优化

把个人网站站点地图交给搜索引擎，搜索引擎收录后就可以索引你的网站了。
可参考elem一小姐姐的文章，😍hexo高阶教程, 前端妹子奥。

install

安装和配置和rss的安装配置方法类似，可参考：

$ npm install hexo-generator-sitemap –save

$ npm install hexo-generator-baidu-sitemap –save #baidu

更多插件相关可查看官网

添加配置

配置根目录下的_config.yml：

# sitemap生成插件配置
Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

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

配置好之后，hexo d就会生成相关的站点地图了。
关于插件可查看 https://hexo.io/plugins/

站点收录

好了，上面一节我们可以生成站点地图了，那如何让我们的站点地图被搜索引擎收录呢？那么，百度
提供给我们3种方式，google好像只提供了一种即提交sitemap.xml的方式。

那么，关于百度链接提交的三种方式和google的链接提交，在这里不再重复写了，参考文章1，文章二

这里重点说一些在配置链接提交方式时踩过的坑。

坑一:
在链接提交之前，我们都要在相应的搜索引擎的管理平台去验证一下我们的网站，都采用的是下载html文件的方式验证。如果我们是每次都把验证文件放在编译好的目录下，那倒是没有问题，但是，每次编译好博客，还要把这两个验证文件放进去，就太麻烦了，我们要的效果是，把验证文件放在用户资源目录下，编译生成后，就直接出现在博客的目录下，这样就不用每次去copy再粘贴进去了。但是，这样问题又来了，把验证文件放在源码包里，hexo g编译生成好了之后，我们会发现我们的html验证文件改变了，那是因为hexo编译时，对html文件也进行了渲染， 这就导致了验证无法通过，因为验证文件改变了。

上面其实描述太复杂，简单总结一点： 直接copy到public目录下（每次生成都copy,太麻烦）–>直接放在source目录下（生成输出后被渲染，文件改变，验证不通过）

说明一下hexo目录结构

|-- node_modules
|-- public                  #hexo g之后生成的目录，也是我们的网站源码，hexo clean会清楚该目录
|-- scaffolds               #脚手架
|-- source                  #用户资源目录，除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会
                              被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
   |-- _data                #数据文件
   |-- _posts               #markdown文章存放目录，会被编译成html文件，放到 public
|-- themes                  #主题
|-- _config.yml             #全局配置文件,网站的很多信息都在这里配置，诸如网站名称，副标题，描述，作者，语言，主题，部署等等参数
|-- package.json            #hexo框架的参数和所依赖插件

关于目录的更多介绍，可以查看官方文档

好了，其实上面的问题描述的解决思路已经很清晰，也就是配置hexo不让其渲染验证的html文件,其实找到思路了，解决就很简单了。凡事都是一样。

# hexo渲染排除 | 路径是相对于source目录的路径
skip_render: '*.html'

更多配置方法查看

坑二：
百度链接提交，使用hexo-baidu-url-submit来进行百度链接的主动推送, 使用这个插件，是要在使用hexo d部署时进行推送的，但是，由于之前使用了travisCI的自动化构建工具，就用不到了hexo d对博客进行部署到github了，travisCI配置的构建流程是：hexo生成网站源码后，由travis直接使用git推送到github。那么，既然baidu_url_submit又使用到了hexo d进行推送，所以，我们还要更改一下travisCI的构建流程。
生成源码之后，不使用git进行推送，继续使用hexo d进行推送部署。具体可查看我的配置. 也可以参考文章。

至于我踩到的坑呢，可能就是.travis.yml文件的配置问题，经过不断的搜索比对，发现可能是因为该配置文件的注释中出现了特殊的字符，导致的travisCI无法去解析配置文件。去掉特殊字符后，构建成功。

more

参考文章，插件还是配置了比较多的。

更多配置优化持续更新中…

番外篇（TravisCI自动化构建）

关于博客配置TravisCI自动化构建工具，可参考文章, 非常方便，我们只需要写完md文件，提交到相应的分支，travisCi会帮我们构建部署到github的。travisCI完整学习，关注官方网站.

travisCI自动化构建工具的使用学习，这也是个重点，也挺有意思的，有机会的话，以后可能也会出一篇文章记录一下，欢迎关注:D