Hexo主题篇之Next

本篇文章详细介绍了 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: tags
date: 2018-01-14 14:13:43
type: "tags"
复制代码

当要为某一篇文章添加标签，只需在具体文章的 tags 中添加标签即可，这样相同标签的文章就会归类在一起。

例：

title: Hexo_主题篇之Next
date: 2018-01-15 20:28:44
tags: [hexo,主题]
复制代码

十二、添加分类

同添加标签页一样，首先新建一个页面。

hexo new page categories
复制代码

打开 category/index.md，改为：

---
title: categories
date: 
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:59
tags:
categories: [web前端与移动开发]
top: true
复制代码

设置置顶图标：

依次打开：next 目录 → layout → _macro → post.swig ，例：

定位到下面这个 div：

<div class="post-meta">
复制代码

在该标签下，插入如下代码：

{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font style="color:#999">置顶</font>
    <span class="post-meta-divider">|</span>
{% 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 文件夹内除了xxx.md 文件还有一个同名的文件夹。

4、最后在 xxx.md 中引入图片时，先把图片复制到 xxx 这个文件夹中，然后只需要在 xxx.md 中按照 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<d.length;e++)d[e].alpha<=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：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
复制代码

效果如下：

十八、添加网页标题崩溃欺骗搞怪特效

依次打开 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 文件中，调用：

<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>
复制代码

十九、网页在线联系功能

1、去 DaoVoice 注册个账号。

2、完成后，会得到一个 app_id ，后面会用到。

3、修改 head.swig。

依次打开 next 目录 → layout → _partials → head.swig，添加内容如下：

{% 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/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}
复制代码

4、主题配置文件

在 next 目录下的 _config.yml 文件中添加以下内容：

# Online contact
daovoice: true
daovoice_app_id:   # 这里填你刚才获得的 app_id
复制代码

5、更改聊天窗口

进入 DaoVoice，应用设置 → 聊天设置。

---

期待您的关注！