前言
最近博客更新了一下主题，由之前的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/
还有其它优化，持续更新中。。。
发表回复