共计 10757 个字符，预计需要花费 27 分钟才能阅读完成。
前言
最近博客更新了一下主题，由之前的 yilia 主题更新成集成功能更齐全的 next。借此也把搭建博客和优化主题的过程记录一下。
1 搭建博客
1-1 搭建环境
Node.js 下载安装: https://nodejs.org/en/download/
git 下载安装：https://git-scm.com/downloads
hexo 下载安装：
$ npm install -g hexo-cli
搭建本地博客
在桌面新建 test 目录，进入 test 目录右键选择 git Bash Here 在命令行界面初始化 hexo（这里以 test 文件夹为例，文中后续都是以 test 文件夹作为根目录）
$ hexo init
更新下载依赖包
$ hexo install
启动本地服务
$ hexo s
浏览器访问 http://localhost:4000，可以看到博客已经搭建在本地。
1-2 部署到 github 上
创建 github 账号：https://github.com（注册的邮箱一定要验证）
新建一个名为 <github 用户名 >.github.io 的仓库，比如说，如果你的 github 用户名是 mygithub，那么你就新建 mygithub.github.io 的仓库。
安装 hexo-deployer-git 插件。在命令行（即 Git Bash）运行以下命令即可：
$ npm install hexo-deployer-git –save
配置 ssh
检查是否有 ssh
$ cd ~/. ssh #检查本机已存在的 ssh 密钥（No such file or directory 说明你是第一次使用 git。）
生成 ssh
$ ssh-keygen -t rsa -C “ 邮件地址 ”（注册 github 时的邮箱）
然后连续 3 次回车，复制密钥文件内容（路径形如 C:\Users\Administrator\.ssh\id_rsa.pub），粘贴到 New SSH Key 即可。打开你的 github 主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
测试是否成功配置 ssh
$ ssh -T git@github.com
提示 Are you sure you want to continue connecting (yes/no)?，输入 yes 返回 “You’ve successfully authenticated” 即成功：
修改_config.yml（在 test 目录下）。文件末尾添加下面代码：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:<Github 账号名称 >/<Github 账号名称 >.github.io.git
branch: master
推送到 GithubPages。在命令行（即 Git Bash）依次输入以下命令，返回 INFO Deploy done: git 即成功推送：
$ hexo d -g
至此，Hexo 博客已经搭建在 GithubPages, 域名为 https://<Github 账号名称 >.github.io
2 主题选择和优化
2-1 主题选择
这里我选择的是 next 主题，在 /test 目录下载主题文件
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
修改 /test 目录下的_config.yml 文件，更改 theme 字段，为主题文件夹的名称
$ theme: next
2-2 主题基本配置
2-2-1 设置 语言
修改 /test 目录下的_config.yml 文件，选择语言
language: zh-Hans（默认为英文，zh-Hans 为中文简体）
2-2-2 设置 作者昵称
/test 目录下的_config.yml 文件，设置 author 为你的昵称。
author : < 你的昵称 >
2-2-3 设置 站点描述
修改 /test 目录下的_config.yml 文件，设置 description 字段为你的站点描述。
description : 站点描述可以是你喜欢的一句签名:)
2-2-4 设置 侧边栏社交链接
修改 /test 目录下的_config.yml 文件，设置 social 字段。
social:
GitHub: https://github.com/your-user-name || github
Twitter: https://twitter.com/your-user-name || twitter
Weibo: http://weibo.com/your-user-name || weibo
如果只想显示图标可以设置 social_icons 字段
social_icons:
enable: true
icons_only: true
transition: true
2-2-5 设置「背景动画」
修改 /test 目录下的_config.yml 文件，有 4 款背景动画，选择你喜欢的设置为 true 即可
# Canvas-nest
canvas_nest: true
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
2-2-6 设置「动画效果」
修改 /test 目录下的_config.yml 文件，设置 motion 字段。
motion
enable: true
2-2-7 选择 Scheme
next 提供了几种主题模式可供切换，选择一款你喜欢的
/test/themes/next 目录下的_config.yml 文件，全局查找 scheme，选择一款打开注释
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
2-2-8 配置 菜单栏
修改 /test/themes/next 目录下的_config.yml 文件，menu 关键字下面的配置就是菜单栏，next 的默认菜单配置
一般来说我们都会有自己的定制。给出我的配置以供参考
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
music: /music/ || music
|| 后面的内容为菜单栏的图标 icon，就是 Font Awesome 图标名字
2-2-9 配置优化 用户图像
修改 /test/themes/next 目录下的_config.yml 文件，设置 avatar 为一张图片，把你喜欢的图片下载并放到 /test/themes/next/source/images 文件夹中
avatar: /images/< 图片名字 >.jpg
找到主题配置文件：/test/themes/next/source/css/_common/components/sidebar/sidebar-author.styl 加入下面代码：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play) 动画名称 (2s) 动画播放时长单位秒或微秒 (ase-out) 动画播放的速度曲线为以低速结束
(1s) 等待 1 秒然后开始动画 (1) 动画播放次数 (infinite 为循环播放) ]*/
/* 鼠标经过头像旋转 360 度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转 360 度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
2-2-10 添加「标签」页面
在 /test/source 目录下新建 tags 文件夹，在 /test/source/tags 下新建 index.md，内容为
—
title: 标签
type: “tags”
—
2-2-11 添加「分类」页面
在 /test/source 目录下新建 categories 文件夹，在 /test/source/categories 下新建 index.md，内容为
—
title: 标签
type: “categories”
—
2-2-12 设置 字体
由于引用国外字体镜像较慢，所以 nexT 开放了 5 个特定范围的字体设定来解决问题。修改 /test/themes/next 目录下的_config.yml 文件。找到 font 关键字，替换它下面的内容为
font:
enable: true
# 外链字体库地址，例如 //fonts.googleapis.com (默认值)
host:
# 全局字体，应用在 body 元素上
global:
external: true
family: Monda
# 标题字体 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family: Roboto Slab
# 文章字体
posts:
external: true
family:
# Logo 字体
logo:
external: true
family: Lobster Two
size: 24
# 代码字体，应用于 code 以及代码块
codes:
external: true
family: PT Mono
2-2-13 设置代码高亮
修改 /test/themes/next 目录下的_config.yml 文件。修改 highlight_theme 关键字，共有 5 款主题供你选择
highlight_theme: normal/night/night blue/night bright/night eighties
2-2-14 设置友情链接
修改 /test/themes/next 目录下的_config.yml 文件。找到 Blog rolls 进行设置
# Blog rolls
links_icon: link（icon 图标）
links_title: 友情链接（文字描述）
#links_layout: block（设置链接是一行展示一条）
links_layout: inline（设置链接是一行展示多条）
links:
test: http://macshuo.com/（链接的名字和地址）
2-2-15 设置博客置顶
安装插件
$ npm uninstall hexo-generator-index –save
$ npm install hexo-generator-index-pin-top –save
设置置顶标志：打开 /test/themes/*/layout/_macro/post.swig 在 <div class=”post-meta”> 下方插入代码：
{% if post.top %}
<i class=”fa fa-thumb-tack”></i>
<font color=808080> 置顶 </font>
<span class=”post-meta-divider”>|</span>
{% endif %}
然后在需要置顶的文章的 Front-matter 中加上 top 即可：
—
title: 2018
date: 2018-10-25 16:10:03
top: 100
—
2-2-16 设置和优化打赏
点击进入在线生成二维码生成自己的微信和支付宝二维码。下载下来保存到 /test/themes/next/source/images 中修改 /test/themes/next 目录下的_config.yml 文件。找到 Reward 关键字进行配置
-Reward
reward_comment: 谢谢打赏，好人一生平安（打赏的描述）
wechatpay: /images/weixin.png（微信二维码）
alipay: /images/zhifubao.png（支付宝二维码）
移除打赏抖动，修改 /test/themes/next/source/css/_common/components/post/post-reward.styl，注释以下代码
/* 注释文字闪动函数
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#bitcoin:hover p {
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/
2-2-17 每篇文章后添加结束标语
新建文件，在 /test/themes/next/layout/_macro 中新建 passage-end-tag.swig 文件，添加代码至该文件中：
<div>
{% if not is_index %}
<div style=”text-align:center;color: #ccc;font-size: 15px;letter-spacing: 5px;margin-top: 35px;”>———- 本文结束 <i class=”fa fa-paw”></i> 感谢您的阅读 ———–</div>
{% endif %}
</div>
修改 post.swig，打开 /test/themes/next/layout/_macro/post.swig 文件，在 post-body 后，post-footer 前，添加下面内容：
<div>
{% if not is_index %}
{% include ‘passage-end-tag.swig’ %}
{% endif %}
</div>
修改_config，打开 /test/themes/next/ 下的_config.yml，在末尾添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
2-2-18 添加转载协议声明
打开 /test/themes/next/ 下的_config.yml，找到 Declare license on posts，配置
# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
打开 /test 下的_config.yml，找到 URL，配置
# URL
url: < 你的 github 博客地址 >
2-3 主题优化
2-3-1 实现 fork me on github
选择样式 GitHub Ribbons：https://github.blog/2008-12-1… 修改图片跳转链接, 将 <a href=”https://github.com/you”> 中的链接换为自己 Github 链接打开 /test/themes/next/layout/_layout.swig 文件，把代码复制到 <div class=”headband”></div> 下面。
<a href=”https://github.com/tmgycsz/tmgycsz.github.io” class=”forkme” target=”_blank”>
<img style=”position: absolute; right: 0px;” width=”149″ height=”149″ src=”https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149″ class=”attachment-full size-full” alt=”Fork me on GitHub” data-recalc-dims=”1″>
</a>
2-3-2 添加点击爱心效果
在 /test/themes/next/source/js/src 文件夹下创建 clicklove.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);
在 /test/themes/next/layout/_layout.swig 文件末尾添加：
<!– 页面点击小红心 –>
<script type=”text/javascript” src=”/js/src/clicklove.js”></script>
2-3-3 添加网页崩溃欺骗特效
在 /test/themes/next/source/js/src 文件夹下创建 crash_cheat.js，添加代码：
<!– 崩溃欺骗 –>
var OriginTitle = document.title;
var titleTime;
document.addEventListener(‘visibilitychange’, function () {
if (document.hidden) {
document.title = ‘╭(°A°`)╮ 页面崩溃啦 ~’;
clearTimeout(titleTime);
}
else {
document.title = ‘(ฅ>ω<*ฅ) 噫又好了~’ + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
在 /test/themes/next/layout/_layout.swig 文件末尾添加：
<!– 崩溃欺骗 –>
<script type=”text/javascript” src=”/js/src/crash_cheat.js”></script>
2-3-4 添加访问不蒜子统计
打开 /test/themes/next/ 下的_config.yml，找到 busuanzi_count，配置
busuanzi_count:
enable: true
total_visitors: true（总的访客人数）
total_visitors_icon: user（访客人数图标）
total_views: true（总的访问量）
total_views_icon: eye（访问量图标）
post_views: true（文章总阅读次数）
post_views_icon: eye（文章总阅读图标）
2-3-5 添加评论系统 Valine
请先注册 LeanCloud, 注册成功进入应用列表页面，创建应用。进入刚刚创建的应用，选择左下角的设置 > 应用 Key，然后就能看到你的 APP ID 和 APP Key 了。
打开 /test/themes/next/ 下的_config.yml，找到 valine，配置
valine:
enable: true
appid: dHAGLgRYVcYtd02p3WpBLKiQ-gzGzoHsz
appkey: DtL0hVwsWFyrDdw4QPWhg9zR
notify: false（邮件提醒，回复是否发送到邮箱）
verify: false（回复是否需要验证）
placeholder: Just go go（回复框占位符）
avatar: mm # gravatar style
guest_info: nick,mail,link（评论可以填写的信息）
pageSize: 10 #（每页显示多少条评论）
2-3-6 添加文章字数统计和预计阅读时间
打开 /test/themes/next/ 下的_config.yml，找到 post_wordcount，配置
post_wordcount
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true`
2-3-7 实现本地搜索
/test 目录下下载插件
$ npm install hexo-generator-searchdb –save
修改 /test 下的_config.yml，新增以下内容到任意位置：
search:
path: search.xml
field: post
format: html
limit: 10000
打开 /test/themes/next/ 下的_config.yml，找到 post_wordcount，配置
local_search:
enable: true
trigger: auto（搜索方式：是输入的时候搜索还是回车或搜索键搜索）
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
文中的优化方案来自 next 官方使用文档以及各路大神的贡献，我这里只是做个总结。我的 blog 地址：https://tmgycsz.github.io/
参考文档
next 文档：http://theme-next.iissnan.com/
还有其它优化，持续更新中。。。
