Hexo主题_Next

---

Hexo主题_Next

1. 安装主题

在博客文件夹下执行命令

git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题

打开博客目录中_config.yml 文件

修改 theme

3. 启动服务并预览

hexo s

4. 主题设定

在next主题目录下的_config.yml文件中将scheme设定为Pisces

5. 语言设定

在博客根目录下修改配置文件_cofig.yml中的language为zh-Hans（简体中文）

6. 修改菜单项

在主题目录下修改配置文件_cofig.yml中的menu，也可增加菜单

这些配置都要与你主题目录下的languages文件中对应的yml文档里配置相关联

比如你在站点根目录中的配置文件设置language为zh-Hans，那么就要进入到主题目录下的languages文件中修改zh-Hans.yml

这样才能显示出菜单项新增的中文内容

7. 设置菜单项图标

在主题目录下修改配置文件_cofig.yml中的menu,对应的字段是menu_icons

格式为item name：icon name，其中item name与所配置的菜单名字对应，icon name是Font Awesome图标的名字,而 enable 可用于控制是否显示图标

你可以设置成 false 来去掉图标

8. 设置侧栏位置

主题目录下修改配置文件_cofig.yml中的 sidebar

9. 设置头像

在博客根目录下修改配置文件_cofig.yml,新增 avatar

值设置为头像的链接地址，地址可以是网络地址

也可以是本地地址（放置在source/images/ 目录下）

10. 设置文章代码主题

在主题目录下修改配置文件_cofig.yml 中的highlight_theme

默认值为nomal，可以设置为night

11. 添加标签页

前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项

但是此时点击标签，跳转的页面会显示page not found

此时我们要新建一个页面

在新建的index.md文件中添加type: "tags"

title: tags
date: 2018-01-14 14:13:43
type: "tags"

当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的 tags 中添加标签即可

title: Hexo 主题篇之 Next
date: 2018-01-15 20:28:44
tags: [hexo,主题]

12. 添加分类

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

hexo new page categories

打开category/index.md，改为：

---
title: categories
date: 
type: "categories"
comments: false
---

13. 文章置顶

安装文件

$ 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

设置置顶图标

打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到

<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 %}

效果如下：

14. 添加点击爱心效果

14.1 创建 js 文件

在/themes/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);

14.2 修改_layout.swig

在页面最下面添加代码

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

效果如下：

15. 添加网页标题崩溃欺骗搞怪特效

在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>

16. 网页在线联系功能

16.1 首先在 DaoVoice 注册个账号

16.2 完成后，会得到一个app_id，后面会用到

16.3 修改head.swig

修改/themes/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 %}

16.4 主题配置文件

在_config.yml文件中添加内容：

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

16.5 更改聊天窗口

应用设置 → 聊天设置