主题设置
个人比较喜欢 NexT 主题，所以这篇文章主要讲next主题的设置
在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。
NexT 主题安装
主题下载
现将路径切换到项目根目录
cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
启用主题
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。
theme: next
到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。
主题验证
hexo s --debug
此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。
语言设置
编辑 站点配置文件，将 language 设置成你所需要的语言。例如选用简体中文，配置如下
language: zh-Hans
设置菜单
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
常用创建命令
添加「标签」页面
新建页面
hexo new page tags
设置页面类型
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---
添加「分类」页面
新建页面
hexo new page categories
设置页面类型
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---
侧边栏社交链接
侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中
链接
# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
微博: http://weibo.com/your-user-name
豆瓣: http://douban.com/people/your-user-name
知乎: http://www.zhihu.com/people/your-user-name
# 等等
图标
# Social Icons
social_icons:
enable: true
# Icon Mappings
GitHub: github
Twitter: twitter
微博: weibo
友情链接
编辑 主题配置文件 添加：
# title
links_title: Links
links:
MacTalk: http://macshuo.com/
Title: http://example.com/
站点建立时间
这个时间将在站点的底部显示，例如 © 2013 - 2015。 编辑 主题配置文件，新增字段 since。
since: 2015
设置「动画效果」
编辑 主题配置文件， 搜索 motion，根据您的需求设置值为 true 或者 false 即可,同时还可以根据需求设置需要的动画效果。
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn
设置「背景动画」
NexT 自带四种背景动画效果
编辑 主题配置文件， 搜索 canvas_nest , canvas_lines,canvas_sphere 或 three_waves，根据您的需求设置值为 true 或者 false 即可,注意只能同时开启一种背景动画效果。：
# Canvas-nest
canvas_nest: true
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
设置加载进度条样式
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash
footer信息设置
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2017
# Icon between year and copyright info.
icon: user
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: true
# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>
添加字数统计功能
next中内置有hexo-wordcount的配置信息，但是启用被指之前需要下载hexo-wordcount
$ npm install hexo-wordcount --save
安装完成之后，在主题配置文件中进行开始(true)或关闭(false)设置
wordcount： 文章中的字数统计
min2read: 大概阅读完整篇文章的时间
totalcount: 文章中总的字数
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: true
在博客中添加Fork me on GitHub
在添加之前可以去官网官网选择自己喜欢的样式
在NexT主题中找到 next\layout\_layout.swig目录下的_layout.swig 的文件，然后找到如下代码块
<div class="{{ container_class }} {% block page_class %}{% endblock %} ">
<div class="headband"></div>
然后将选中的样式的代码放到<div class="headband"></div>的后面
<a target="_blank" href="https://github.com/tankboo"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://user-gold-cdn.xitu.io/2017/11/30/1600c8fe7bc8587e?w=149&h=149&f=png&s=6789"></a>
然后在重新编译后就可以看到效果了
显示更多
在浏览生成后的页面时，发现首页会把文章的全部内容列出来，如果文章内容太多，则这种方式是不友好的，我们需要把一部分信息隐藏起来，方法就是在文章中的适当位置加入如下代码
<!--more-->
然后重新编译生成的首页中的文章中就会生成如下按钮
自定义样式
这个模版用的人太多，我们想要更个性化一点，则需要我们自己去修改主题中的一些样式，自己定义的样式主要放在next\source\css\_variables\_custom.styi中，比如我们想给首页的每个文章加上一个含有阴影的边框，并增加文章之间的上下间距，可以进行如下设置
.post {
margin-bottom: 100px;
padding: 25px;
-webkit-box-shadow: 0 0 14px #cacbcb;
-moz-box-shadow: 0 0 14px #cacbcc;
background: #fff;
}
然后就能看到上一图中的样式了