写作目的
网上关于Hexo的主题美化的博客已经很多也很全面了，但是在作者去一一尝试的时候，却发现有很多博客中提供的方法现在已经不支持或者过时了，为了避免大家和作者一样花费大量时间去一一尝试，所以作者考虑再三，决定将自己尝试过可靠的方法记录下来，与大家一起学习进步。一、Next主题美化
Hexo支持很多主题风格，Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Next6主题的界面美化手法。
1、Next主题安装配置
Next主题配置安装方式很简单，只需要执行两步：
$ cd hexo文件目录
$ git clone https://github.com/theme-next/hexo-theme-next themes/next然后设置站点配置文件_config.yml:
$ theme: next即可将我们的Hexo博客主题替换为Next主题。
2、主题简单配置
Next主题主要分为四种scheme，可以在主题文件的_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini；作者主要选用的是Gemini风格，效果如下：
文章图片
3、Next常规配置
3.1、个人信息配置
在站点的_config.yml文件中进行配置：
title: 可乐&博客
subtitle: 生于忧患，死于安乐
description: 看得懂的书，请仔细看；看不懂的书，请硬着头皮看。
keywords:
author: 张泉
language: zh-CN # 主题语言
timezone: Asia/Shanghai #中国的时区，不要乱改城市3.2、头像配置
将头像放置在themes/next/source/images/中，然后在主题中打开_config.yml文件中进行配置：
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.png #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址
# If true, the avatar would be dispalyed in circle.
rounded: true #鼠标放在头像上时是否旋转
opacity: 1 #头像放缩指数
# If true, the avatar would be rotated with the cursor.
rotated: true #头像是否设为圆形，否则为矩形3.3 其它常规配置
# Table Of Contents in the Sidebar
toc:
enable: true #是否自动生成目录
# Automatically add list number to toc.
number: false #目录是否自动产生编号
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false #标题过长是否换行
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
max_depth: 6 #最大标题深度# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12 #侧边栏相对主菜单像素距离
# Back to top in sidebar.
b2t: true #是否提供一键置顶
# Scroll percent label in b2t button.
scrollpercent: true #是否显示当前阅读进度
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false #手机上是否显示侧边栏3.4、菜单栏配置
（1）在主题中打开_config.yml文件中进行配置：
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（2）系统自动帮我们创建了home和archives页面，所以我们只需要使用终端创建tags和categories页面即可：
$ cd hexo文件目录
$ hexo new page "tages"
$ hexo new page "categories"(3)创建好的页面在站点sources中，我们需要对相关页面进行type修改：
---
title: 分类
date: 2019-09-11 14:14:50
type: "categories"
------
title: 标签
date: 2019-09-11 14:14:28
type: "tags"
---（4）在我们写的博客页面中进行相关参数的配置：
---
title: 手把手教你使用Hexo搭建github个人博客
date: 2019-09-11 19:06:18
comments: false
tags:
- 工具
- hexo
categories:
- 工具
- hexo
---效果如下：
文章图片
文章图片
二、添加搜索功能
1、安装 hexo-generator-searchdb 插件
$ cd 文件目录
$ npm install hexo-generator-searchdb --save
2、打开站点配置文件_config.yml,找到Extensions在下面添加:
# 搜索
search:
path: search.xml
field: post
format: html
limit: 100003、打开主题配置文件_config.yml,找到Local search，将enable设置为true。
4、效果如下：
文章图片
三、自定义博客图标
我们博客的默认图标是
H，不过Next支持修改图标，下面是我的图标：
文章图片
我们需要将我们的图标放置在/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/favicon-128x128-next.png
safari_pinned_tab: /images/logo.svg四、添加点击效果
1、在/themes/next/source/js目录下，新建clicklove.js文件：
$ cd /themes/next/source/js
$ touch clicklove.js2、将下面的代码粘贴进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;
e3、在
\themes\next\layout\_layout.swig文件末尾添加：
文章图片
【Next主题美化】4、效果如下：
文章图片
五、添加背景
1、下载相应的资源包：
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
2、在主题配置中做相关参数修改：
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: # 网络背景
enable: true
onmobile: true # display on mobile or not
color: '0,0,0' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 150 # the number of lines# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
enable: false
size: 300
alpha: 0.6
zIndex: -1
3、效果如下
文章图片
六、添加更多按钮
因为在你的博客主页会有多篇文章，如果你想让你的文章只显示一部分，多余的可以点击阅读全文来查看，那么你需要在你的文章中添加
文章图片
其后面的部分就不会显示了，只能点击阅读全文才能看。效果如下：
文章图片
七、添加RSS订阅
1、安装RSS插件
$ cd 文件目录
$ npm install --save hexo-generator-feed
2、打开站点配置文件_config.yml，进行相关参数修改：
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed3、打开主题配置文件_config.yml，进行相关参数修改：
$ rss: /atom.xml //注意：有一个空格4、效果如下：
文章图片
八、添加社交信息
打开主题配置_config.yml，进行相关参数修改：
social:
GitHub: 自己的GitHub地址 || github #
CSDN: 自己的CSDN地址 || crosshairs
#E-Mail: mailto:yourname@gmail.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skypesocial_icons:
enable: true #是否显示社交图标
icons_only: false #是否仅显示社交图标
transition: true 九、增加页面宠物
1、在站点目录下执行：
$ npm install -save hexo-helper-live2d2、打开主题配置_config.yml，添加下列相关参数：
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-tororo
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7use对应的参数，可以对照着lived2d进行选择，效果如下：
文章图片
十、增加文章结束标志
1、在路径/themes/next/layout/_macro文件夹中新建passage-end-tag.swig文件：
//切换到路径_macro
$ cd [_macro路径]
//创建passage-end-tag.swig文件
$ touch passage-end-tag.swig
2、打开passage-end-tag.swig文件，添加以下内容：
{% if not is_index %}
-------------本文结束感谢您的阅读-------------
{% endif %}
3、打开/themes/next/layout/_macro/post.swig，在post-body之后，post-footer之前，添加以下代码：
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
文章图片
4、然后打开主题配置文件
_config.yml,在末尾添加：# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
5、效果如下：
文章图片
十一、添加文章版权信息
打开主题配置_config.yml，进行相关参数设置：
creative_commons:
license: by-nc-sa
sidebar: true
post: true效果如下：
文章图片
十二、增加阅读次数和访客数
博客阅读次数和访客数使用的是不蒜子提供的相关服务，使用非常简单。
1、打开 themes/next/layout/_partial/footer.swig，将下面这段代码添加到footer.swig最后面：
博客全站共{{ totalcount(site) }}字
|
本站总访问量次
|
本站访客数人次
|
本文总阅读量次
文章图片
2、打开主题配置_config.yml，进行相关参数设置：
busuanzi_count:
enable: true#是否开启不蒜子统计功能
total_visitors: false
total_visitors_icon: user
total_views: false
total_views_icon: eye
post_views: false
post_views_icon: eye3、效果如下：
文章图片
十三、增加文章字数统计
在next中推荐的是hexo-symbols-count-time，而在本篇中使用的是功能更加强大的hexo-wordcount。
1、安装hexo插件：
$ cd 文件目录
$ npm install hexo-wordcount --save2、在/themes/next/layout/_partials/footer.swig末尾添加代码：
博客全站共{{ totalcount(site) }}字3、打开主题配置_config.yml，进行相关参数设置：
symbols_count_time:
separated_meta: true #分隔符|
item_text_post: true #是否统计站点总字数
item_text_total: true #是否同级文章总字数
awl: 2 #平均每个字符的长度
wpm: 300 #words per minute3、打开站点配置_config.yml，进行相关参数设置：
symbols_count_time:
symbols: true #是否统计字数
time: false #是否统计阅读时长
total_symbols: true #是否统计总字数
total_time: false #是否统计总阅读时长3、效果如下：
文章图片
文章图片
十四、自定义头部背景区域
1、将图片文件放在/themes/next/source/images中，打开/themes/next/source/css/_schemes/Pisces/_brand.styl,添加
background-image: url(/images/blogHead.jpg);
@media(min-width: 992px){
background-image: url(/images/blogHead.jpg);
}
文章图片
2、效果如下：
文章图片
十五、添加右上角github绑带
1、打开主题配置_config.yml，进行相关参数设置：
# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/nightmaredimple || Follow me on GitHub #添加右上角github绑带2、效果如下：
文章图片
参考资料
Next设置中文文档：http://theme-next.iissnan.com/theme-settings.html
Hexo主题网站：https://hexo.io/themes/
Next主题美化：https://blog.csdn.net/nightmare_dimple/article/details/86661502
推荐阅读
- git的简单使用
- 关于win7安装.net framework4.7.1失败，原因是（安装时发生严重错误的处理方法）
- Myeclipse的一个工作空间的配置文件复制到另一个工作空间
- 我的Eclipse常用插件汇总
- gRPC详解
- git批量删除文件的方法
- 开发工具|手动安装nodejs模块
- Chrome利器之FireShot（网页长截图工具）
- 应用程序无法正常启动0xc000007b解决方法