---
title: hexo主题、插件安装
date: 2016-08-29 20:47:19
tags: [hexo,plugin,插件]
permalink: hexo-plugin
---
<h2 id="intro">前言</h2>Hexo提供了很多主题，具体可参见 [Hexo Themes](https://hexo.io/themes/) ,我使用的是 [MOxFIVE](https://github.com/MOxFIVE/hexo-theme-yelee) 的yelee主题，喜欢的可以clone下来，具体设置方法可看详细内容。hexo博客主题安装以及一些常用插件的安装，例如：站内搜索，访客统计，百度分享。
---
![image1][1]
[1]: http://ww4.sinaimg.cn/large/a24d4f55jw1f7mlrgazthj21hc0u0103.jpg

<!-- more -->

## 1、安装主题  
### 1.1 将Git Shell 切到自己博客目录下，然后执行下面的命令，将yelee下载到 themes/yelee 目录下  
<pre><code>git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee</code></pre>

### 1.2 修改你的博客根目录下的config.yml配置文件中的theme属性，将其设置为yelee.

### 1.3 更新yelee主题
<pre><code>cd themes/yelee
git pull
</code>
提示：先备份_config.yml文件再更新。  </pre>
 

## 2、 配置
如果yelee的默认设置不能满足需要的话，你可以修改 /themes/yelee/下的配置文件_config.yml来定制。
各个config的含义，请参考[yelee说明](http://moxfive.coding.me/yelee/2.Basic-Usage/post-excerpt.html)中的介绍。  
###  2.1 评论框配置
  yelee配置了 Disqus，多说 及 友言评论,（/themes/yelee/_config.yml），默认关闭，将其打开。 
  把 #on: true 改为 on: true 即启用对应评论系统.
<pre><code> NOTE:选一个作为网站评论系统，其他保持 禁用 #on: true</code></pre>  
  
####  2.1.1 Disqus

![](http://ww1.sinaimg.cn/large/a24d4f55jw1f7axzx2h73j20mk097dgs.jpg)

注册 [Disqus](https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-)，获取 shortname，然后填入下方对应区域
<pre><code>
disqus: 
  on: true
  shortname:
</code></pre>  

####  2.1.2 多说

[点此](http://duoshuo.com/create-site/)登陆你的多说，然后创建站点，在 domain 中填入你设定的域名前半部分
 比如完整域名是: http://sunkejava.duoshuo.com，只需填入 sunkejava
<pre><code>
duoshuo: 
  on: true
  domain: sunkejava
</code></pre>  

####  2.1.3 友言

[友言](http://www.uyan.cc/index.php)
id 中填写你的友言用户数字ID，注册后可进入后台管理查看.
<pre><code>
youyan:
  on: true
  id:
</code>
 友言服务在 Web 环境下运行，普通本地环境可能无法正常查看，请部署后在线上测试. </pre>  

### 2.2 动态加载评论模块   

![a](http://ww3.sinaimg.cn/large/a24d4f55jw1f7axwveehfj20mt06h760.jpg)
<pre><code>		preload_comment: true
		// true: 评论区跟随页面一起加载
		// false: 当点击评论条等区域时再加载评论模块
</code></pre>

###  2.3 评论数显示
  选择是否在主页文章标题旁显示评论数（支持 多说 和 Disqus）
<pre><code>show_count: false
</code></pre>  


## 3、标签云页面
使用 Hexo 命令新建一个名为 tags 的页面即可
<pre><code>hexo new page tags</code></pre>
<pre>TIP: 该页面标题可以在文件 blog目录\source\tags\index.md 中修改</pre>

![](http://ww1.sinaimg.cn/large/a24d4f55jw1f7aydb1jauj20rg0cnju8.jpg)

## 4、关于我页面
使用 Hexo 命令新建一个名为 about 的页面即可
<pre><code>hexo new page about</code></pre>
<pre>TIP: 该页面标题可以在文件 blog目录\source\about\index.md 中修改</pre>

![](http://ww3.sinaimg.cn/large/a24d4f55jw1f7aygbq979j211m0cg775.jpg)

## 5、站内搜索
 使用搜索需先安装对应插件，用于生成索引数据:[插件主页](https://github.com/PaicHyperionDev/hexo-generator-search)  
  安装插件:
<pre><code>npm install hexo-generator-search --save
</code></pre>
<pre>
 #on: true 改为 on: true即为启用搜索
<code>search: 
  #on: true
  onload: false</code></pre>

onload: true : 索引数据 search.xml 随页面一起加载 [效率优先]

onload: false : 当激活搜索框时再下载索引数据 [按需加载]
![](http://ww3.sinaimg.cn/large/a24d4f55jw1f7ayjxxlubj21150i8agd.jpg)

## 6、404页面
使用 Hexo 命令新建一个名为 404 的页面
<pre><code>hexo new page 404
</code></pre>

/source/404/index.md 文件中添加 permalink: /404
<pre><code>title: 404 Not Found：该页无法显示
toc: false
comments: false
permalink: /404
---</code></pre>

 <pre>TIP:404 页面显示效果可以在本地查看 http://localhost:4000/404.html  
 NOTE:无效网址自动跳转 404 页面则必须在线上测试
</pre>

![](http://ww3.sinaimg.cn/large/a24d4f55jw1f7ayqqvcb6j20pc0kuwil.jpg)

## 7、百度分享
![](http://ww2.sinaimg.cn/large/a24d4f55jw1f7ayru0pb1j208o01ht8p.jpg)
<pre><code>share: 
  on: true
  baidu: true</code></pre>
<pre>Tip: 修改对应源码可以 增删/调整 图标：/themes/yelee/layout/_partial/post/share.ejs</pre>

## 8、不蒜子统计
启用后在页脚显示网站计数信息
<pre><code>visit_counter:
  on: true
  site_visit: true  // 站点访问量(UV)
  page_visit: true  // 页面阅读量(PV)
</code></pre>   
  {% img [as] http://ww3.sinaimg.cn/large/a24d4f55jw1f7ayvld2r7j20or01nwej.jpg [说明： [统计图]] %}
  
{% link 不蒜子插件介绍 http://ibruce.info/2015/04/04/busuanzi/ [说明：] [不蒜子插件介绍] %}   
  
## 9、Sitemap for SEO 站点地图  
安装Sitemap插件，执行如下代码：
<pre><code>npm install hexo-generator-seo-friendly-sitemap --save</code></pre>
配置_config.yml文件
<pre><code>sitemap:
   path: sitemap.xml
</code></pre>  

## 10、RSS订阅设置
安装hexo-generator-feed插件，详情[点此](https://github.com/hexojs/hexo-generator-feed)
<pre><code>$ npm install hexo-generator-feed --save</code></pre>
配置_config.yml文件
<pre><code>feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:</code></pre>

> 有什么留言或问题直接在文末留下评论即可。

### 欢迎访客:

<ul class="ds-recent-visitors" data-num-items="39" data-avatar-size="56"></ul>