本篇文章详细介绍了 Hexo Next 主题的安装配置及一些其它功能的使用说明。
文章中：
“hexo 目录” 指的是你安装 hexo 的主目录，例：
“next 目录” 指的是 next 主题的安装目录，例：
一、安装主题
在 hexo 目录下执行命令：
git clone https://github.com/iissnan/hexo-theme-next themes/next复制代码
二、启用主题
打开 hexo 目录中 _config.yml 文件。
修改 theme：
三、启动服务并预览
hexo s复制代码
四、主题设定
打开 next 目录下的 _config.yml 文件，将 scheme 设定为 Pisces。
五、语言设定
在 hexo 目录下修改配置文件 _cofig.yml，将 language 改为 zh-Hans（简体中文）。
六、修改菜单项
在 next 目录下修改配置文件 _cofig.yml 中的 menu，也可增加菜单。
例：
这些配置都要与 next 目录下的 languages 文件中对应的 yml 文档里配置相关联。
比如你在 hexo 目录中的配置文件设置 language 为 zh-Hans，那么就要进入到 next 目录下的 languages 文件中修改 zh-Hans.yml。
这样才能显示出菜单项新增的中文内容：
七、设置菜单项图标
在 next 目录下修改配置文件 _cofig.yml 中的 menu,对应的字段是 menu_icons。
格式为 item name：icon name，其中item name 与所配置的菜单名字对应，icon name 是Font Awesome 图标的名字,而 enable 可用于控制是否显示图标。
你可以设置成 false 来去掉图标。
八、设置侧栏位置
next 目录下修改配置文件 _cofig.yml 中的 sidebar。
九、设置头像
在 hexo 目录下修改配置文件 _cofig.yml，新增 avatar。
值设置为头像的链接地址，地址可以是网络地址，也可以是本地地址（放置在 source/images/ 目录下）。
十、设置文章代码主题
在 next 目录下修改配置文件 _cofig.yml 中的 highlight_theme。
默认值为 nomal，可以设置为 night。
十一、添加标签页
前面通过修改 next 目录下的 _config.yml 文件中的 menu 选项，可以在主页面的菜单栏添加标签选项。
但是此时点击标签，跳转的页面会显示 page not found。
此时我们要新建一个页面。
在新建的index.md文件中添加type: "tags"。
title: tagsdate: 2018-01-14 14:13:43type: "tags"复制代码
当要为某一篇文章添加标签，只需在具体文章的 tags 中添加标签即可，这样相同标签的文章就会归类在一起。
例：
title: Hexo_主题篇之Nextdate: 2018-01-15 20:28:44tags: [hexo,主题]复制代码
十二、添加分类
同添加标签页一样，首先新建一个页面。
hexo new page categories复制代码
打开 category/index.md，改为：
---title: categoriesdate: type: "categories"comments: false---复制代码
使用方法与标签页相同。
十三、文章置顶
安装文件。
$ npm uninstall hexo-generator-index --save$ npm install hexo-generator-index-pin-top --save复制代码
在需要置顶的文章的 Front-matter 中加上 top: true。
例：
title: 常用date: 2018-02-02 19:47:59tags:categories: [web前端与移动开发]top: true复制代码
设置置顶图标：
依次打开：next 目录 → layout → _macro → post.swig ，例：
定位到下面这个 div：
在该标签下，插入如下代码：
{% if post.top %} 置顶 {% endif %}复制代码 效果如下：
十四、取消文章目录对标题的自动编号
打开 next 目录中的 _config.yml，找到 toc 这个属性，将里边的 number 值改为 false，保存并生成部署。
十五、首页显示文章预览
next 主题设置首页不显示文章全文(只显示预览)。
进入 hexo 目录的 themes/next 目录，打开 _config.yml 文件， 搜索 "auto_excerpt",找到如下部分：
auto_excerpt: enable: false length: 150复制代码
将 false 改为 true。
十六、在 .md 文件中上传本地图片
1、打开 hexo 目录下配置文件 _config.yml， 将里面的 post_asset_folder 属性设置为 true。
2、在 hexo 目录下执行这样一句话：
npm install hexo-asset-image --save 复制代码
这是下载安装一个可以上传本地图片的插件。
3、安装成功后运行 hexo new post "XXX"， 生成文章时 /source/ _posts 文件还有一个同名的文件夹。
4、最后在 中引入图片时，先把图片复制到 xxx 这个文件夹中，然后只需要在 中按照 markdown 的格式引入图片即可。
十七、添加点击爱心效果
1、创建 js 文件。
依次打开 next 目录 → source → js → src 新建文件 love.js。
接着把以下代码拷贝粘贴到 love.js 文件中：
!function(e,t,a){ function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){ for(var e=0;e <=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){ return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){ return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){ setTimeout(e,1e3/60)}}(),n()}(window,document);复制代码 2、修改 _layout.swig。
接着打开 next 目录 → layout → _layout.swig。
在页面最下面调用 love.js：
复制代码
效果如下：
十八、添加网页标题崩溃欺骗搞怪特效
依次打开 next 目录 → source → js → src 新建文件 crash_cheat.js，并粘贴以下代码：
var OriginTitile = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "/img/TEP.ico"); document.title = '╭(°A°`)╮ 页面崩溃啦 ~'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "/favicon.ico"); document.title = '(ฅ>ω<*ฅ) 又好了~' + OriginTitile; titleTime = setTimeout(function () { document.title = OriginTitile; }, 2000); } });复制代码 在 next 目录下 layout 目录中的 layout.swig 文件中，调用：
复制代码
十九、网页在线联系功能
1、去 注册个账号。
2、完成后，会得到一个 app_id ，后面会用到。
3、修改 head.swig。
依次打开 next 目录 → layout → _partials → head.swig，添加内容如下：
{% if theme.daovoice %} {% endif %}复制代码 4、主题配置文件
在 next 目录下的 _config.yml 文件中添加以下内容：
# Online contactdaovoice: truedaovoice_app_id: # 这里填你刚才获得的 app_id复制代码
5、更改聊天窗口
进入 ，应用设置 → 聊天设置。