个人博客：Dimple's Blog

前言

或许是对默认的东西没有好感，总觉得默认的主题是很丑很丑的，完美控是接受不了这个东东的，还好hexo是可以修改主题的。这里首推NexT主题，精于心，简于形标语说的是真的不错。使用NexT主题的人比较多，这也说明这个主题确实很成熟了。优化，配置，扩展很多都集成了，比较简单。博文重质量，弄的太花哨确实没啥用。。。

读者可以在https://hexo.io/themes/可以查看你喜欢的主题。 这里我主要说下NexT主题的相关配置。其他主题可以多看看官方文档。

安装主题

安装的过程就一行代码，你需要在博客根目录出打开命令行输入以下命令：

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

以上代码的意思是从 https://github.com/iissnan/hexo-theme-next将next下载到当前目录下的themes里面的next文件夹中。

启用主题

修改站点配置文件_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

主题设定

[图片上传失败...(image-14d1eb-1516176234096)]

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

• Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
• Mist - Muse 的紧凑版本，整洁有序的单栏外观
• Pisces - 双栏 Scheme，小家碧玉似的清新
• Gemini - 左侧网站信息及目录，块+片段结构布局
  cheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有四行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

设置 语言

编辑站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

language: zh-Hans  

PS：这里提一下，你使用hexo s预览的时候，你会发现是设置了语言之后界面还是英文，这个时候不要慌，使用hexo clean清理下database文件夹以及public文件夹就行了。然后再使用hexo s 预览。事实上，这个方法在遇到很多问题的时候都是通用的。

设置 菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。

编辑 主题配置文件，修改以下内容：

设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，它将用于匹配图标以及翻译。

设置标签、分类的界面

设置菜单那里，我设置了显示标签、分类、关于几个选项。如图：
[图片上传失败...(image-c9d4cc-1516176234096)]

但是点击进去，却报错：Cannot GET /tags/，不要慌，不能获取tags，创建一个就OK！

这里介绍创建page的语法：

hexo new page 'name' # name分别为tags、categories  

这样就创建了pages。
在控制台输入以下命令：

hexo new page 'tags' #创建tags子目录
hexo new page 'categories' #创建categories子目录

在你的网站根目录下面的source文件夹会分别生成tags、categories以及about文件夹。

分别修改这tags和categories文件夹中的index.md文件，新增type属性，如下：

---
title: tags
date: 2018-01-04 11:45:41
type: tags
---

categories的修改类似。

当你新建一篇博文的时候，增加上tags和categories属性值，就能在tags和categories界面检索到你的文章了。

个性化定制

添加fork me on github

在http://tholman.com/github-corners/或者https://github.com/blog/273-github-ribbons选择合适的样式复制代码到themes/next/layout/_layout.swig，在<div class="headband"></div>下面：
[图片上传失败...(image-48c62e-1516176234096)]

动态背景

实现效果之一：

目前NexT主题最新的是V6.0版本，这个版本中可以有4种动态背景：

• Canvas-nest

• three_waves

• canvas_lines

• canvas_sphere

设置方法也很简单，直接设置里需要的动态背景为true。

点击出现桃心效果

浏览器输入：http://7u2ss1.com1.z0.glb.clouddn.com/love.js

拷贝所有代码，在/themes/next/source/js/src里面新建love.js，然后在\themes\next\layout\_layout.swig文件末尾添加以下代码：

<script type="text/javascript" src="/js/src/love.js"></script>

文章底部带#号的标签

[图片上传失败...(image-ecfe06-1516176234096)]

去掉文章后面的标签前面的#号。

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将#换成<i class="fa fa-tag"></i>

在每篇文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
{% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， 添加以下代码：

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

添加位置如图：

[图片上传失败...(image-552c3e-1516176234096)]

然后打开主题配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

侧边栏社交小图标设置

实现效果：
[图片上传失败...(image-e0537-1516176234096)]

打开主题配置文件_config.yml，搜索social:, ||之后是在图标库中对应的图标。注意空格就行。

[图片上传失败...(image-c203fc-1516176234096)]

图标库链接：http://fontawesome.io/icons/

主页文章加阴影

具体实现方法
打开\themes\next\source\css\_custom\custom.styl,向里面加入：

// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

添加热度

具体实现方法
next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig

在<span class="leancloud-visitors-count"></span>下添加一句：

<span>℃</span>

然后打开，/themes/next/languages/zh-Hans.yml

将visitors: 阅读次数改为visitors: 热度

设置网站图标

默认的网站图标是一个N，当然是需要制定一个图了，在网上找到图后，将其放在/themes/next/source/images里面，然后在主题配置文件中修改下图所示图片位置

[图片上传失败...(image-63151b-1516176234096)]

还有一些就不详细说了，另外注意下好多的东西已经过时了。比如next主题已经换了域了。很多教程还停留在3.0时代，但是现在next的版本是V6.0，截止我这篇教程发布的时期。

总结

这篇文章就只是简单的介绍了下NexT主题，关于这个主题呢，要达到个性化定制的话，还是需要再花点功夫的。还有就是这个hexo s预览效果确实不好，修改了网站内容之后，需要重新hexo clean再hexo s才能看到效果，有同样问题的兄dei就不需要担心自己的修改是错的。