Hexo博客设置以及Next主题美化

之前的一篇文章写了用Hexo和GitHub搭建博客,现在就来对博客主题做一些个性化的修改。

安装Next主题

切换到博客的目录,使用Git Bash运行下载主题:

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

然后打开根目录下的_config.yml,注意这个是整个博客站点的配置文件,而主题目录下也有一个_config.yml,这是主题的配置文件。在站点配置文件找到theme改为next

1
theme: next

这样就启用了主题,可以运行hexo s查看效果了。

博客设置

这里先对博客基本信息做一些设置,注意了,设置时冒号后面都要有一个空格,这是yml文件的格式

设置语言

首先先设置博客站点的语言,这个是在站点配置文件,也就是根目录下的_config.yml设置的,找到language设置成中文:

1
language: zh-Hans

基本信息

在站点配置文件的开头,填上自己博客的相应信息:

1
2
3
4
5
6
title: # 标题
subtitle: # 副标题
description: # 站点描述
author: # 作者
language: zh-Hans
timezone:

主题设置

Next已经自带了很多功能和集成了一些第三方服务,通过主题目录下的_config.yml就能对主题做一些设定及个性化。

设置主题的Scheme

Next自带了几种外观,在主题目录的_config.yml里找到scheme,我比较喜欢Mist,把前面的注释符#去掉即可:

1
2
3
4
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

菜单设置

我们可以看到首页有还有归档等菜单,这些在主题配置文件里设置,找到menu,把需要的菜单取消注释,我这里保留了categories分类,tags标签,archives归档,about关于,||后面的表示图标,使用Font Awesome图标名字。我就不作修改了:

1
2
3
4
5
6
7
8
9
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

另外,也可以自己添加菜单,但我暂时没有这个需要。

创建页面

设置完菜单但是没有页面的话点击菜单就会报错了。创建刚才建了菜单的页面执行以下命令:

1
2
3
hexo new page tags
hexo new page categories
hexo new page about

然后在source目录下就会生成对应的文件夹,每个文件夹里都有一个index.md,打开将页面的type设置为相应的内容。

1
2
3
4
5
title: 标签
date:
type: "tags" # 或者 "categories"/"about"
comments: false
---

comments是关闭这个页面的评论功能用的,评论后面会提到。

文章显示设置

默认首页的文章会显示全文,在主题配置文件设置auto_excerpttrue再设置长度就会只显示你设置的字数了。

1
2
3
auto_excerpt:
enable: true
length: 100

但是,官方是不推荐这种做法的,我这里用的方法是发表的文章的开头加上description,这样,文章就会显示这个摘要:

1
2
3
4
5
6
7
8
9
10
11
title: # 文章标题
author: # 作者
tags:
- Hexo
- Next
categories:
- Hexo
- Next
description: # 描述,首页文章显示的摘要
date:
---

这里的tagscategories就是给文章加上标签和分类,两者的区别就是categories是有层级的,像上面那样分类里Next就是Hexo的子类,Hexo是不支持指定多个同级分类的。

使用RSS

先在博客目录下执行以下命令安装插件:

1
npm install --save hexo-generator-feed

然后在主题配置文件里找到rss修改:

1
rss: /atom.xml

之后在右边的侧边栏就能看到RSS按钮了

设置头像

source目录下新建一个images目录,放一张名为avatar.png的头像,修改主题配置文件的avatar字段:

1
avatar: /images/avatar.png

设置博客favicon图标

images目录下放置图标,我这里放了两种大小的ico图标,然后在主题配置文件找到favicon并修改:

1
2
3
4
5
6
7
favicon: 
small: /images/favicon-16x16.ico
medium: /images/favicon-32x32.ico
#apple_touch_icon: /images/apple-touch-icon-next.png
#safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

侧边栏社交链接

在主题配置文件找到social把需要的取消注释,然后填好你的链接就可以了,||后面的是图标名称,和菜单的一样,也是使用Font Awesome图标名字。

1
2
3
4
5
6
7
8
9
10
11
social:
GitHub: https://github.com/JianFengY || github
GMail: mailto:yjianfengxy@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
Facebook: https://www.facebook.com/jf.young.1 || 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 || skype

你也可以自行添加其他社交方式,按照格式添加即可。

设置背景动画

同样是主题配置文件,我这里用的是canvas_nest

1
2
3
4
5
6
7
8
9
10
11
# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

修改文章底部的#号标签

打开/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将#换成Font Awesome图标:

1
<i class="fa fa-tag"></i>

评论系统

我使用的是来必力 点击这里 注册账号,然后复制下面的data-uid
来必力

在主题配置文件找到livere_uid

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: # 粘贴你的uid

这样,除了设置了comments: false的页面,其他都会有评论系统了。

网站底部加访问量

这个我是通过修改\themes\next\layout\_partials\footer.swig文件实现的:

1
2
3
4
5
6
7
8
9
10
<div class="powered-by">
<i class="fa fa-user-md"></i>
<span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_pv">
本站访问量<span id="busuanzi_value_site_pv"></span>
</span>
</div>

统计功能

先在博客目录下安装插件:

1
npm install hexo-wordcount --save

然后在主题配置文件,找到post_wordcount,修改你想要的统计功能,有字数统计,阅读时长等:

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true

LeanCloud文章阅读次数统计

点击这里 注册登录LeanCloud账号,先创建一个任意名称的应用,再创建一个名为CounterClass
LeanCloud
在应用Key这里分别复制App IDApp Key到主题配置文件里的leancloud_visitors,并把enable改为true
Key

1
2
3
4
5
6
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id:
app_key:

然后最好再设置一下安全域名就可以了:
安全域名

先安装hexo-generator-searchdb,博客目录执行:

1
npm install hexo-generator-searchdb --save

然后在站点配置文件,注意不是主题配置,添加以下代码:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

然后主题配置文件找到local_search改为true,然后从上面提供的样式选一个填入pace_theme中就可以了:

1
2
3
# Local search
local_search:
enable: true

然后菜单就会出现搜索了。

顶部加载条

修改主题配置文件,找到pace改为true,并从上面提供的样式中选择一种填入pace_theme中就可以了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 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-minimal

右上角加fork me on github

点击这里或者这里挑选你喜欢的样式,修改成你的GitHub链接,复制到themes/next/layout/_layout.swig文件中的以下位置:

1
2
3
<div class="{{ container_class }} {% block page_class %}{% endblock %}">
<div class="headband"></div>
<a href="https://github.com/JianFengY" ......</a>

浏览文章时显示浏览进度

主题设置文件查找scrollpercent修改为true

1
2
# Scroll percent label in b2t button.
scrollpercent: true

修改文章内链接的样式

文章里的链接样式默认是只加一条下划线,颜色和普通文字一样,为了方便区分,在themes/next/source/css/_custom/custom.styl文件加以下代码,自行添加的样式都可以写在这个文件里:

1
2
3
4
5
6
7
8
9
10
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

致谢

这个博客从搭建到美化,都参考了网上许多文章和教程,我就不一一罗列出来了,感谢网上各路大神!

这里推荐一篇干货满满的文章:https://www.jianshu.com/p/f054333ac9e6

还有就是官方的文档了,里面也有很详细的主题配置和第三方服务的说明:http://theme-next.iissnan.com/third-party-services.html