使用Hexo搭建博客之优化篇

简介

  • Hexo:一个快速、简单且强大的博客框架。
  • Hexo的简单之处在于你可以用30分钟,甚至更短的时间就可以生成一个属于你自己的博客。
  • Hexo的强大之处在于你对博客界面细节的调整,有可能用上1天的时间。
  • 在优化篇中,我着重介绍如何优化博客及个性化博客。

配置文件

主题配置文件

  • 之前已经讲解了_data目录的作用,接下来就具体讲解一下NexT主题的配置文件。
  • 由于可定制化的配置项甚多,故此只介绍部分配置项:
1
vim source/_data/next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
# Hexo's Version: 4.2.0
# NexT's Version: 7.8.0

# 是否覆盖NexT主题的默认配置
## true: 覆盖默认配置, 必须包含所有的配置项
## false: 合并默认配置, 无需包含所有的配置项
override: false

# 是否提醒有新版本
reminder: true

# 删除垃圾文件
minify: true

# 自定义配置文件的路径
custom_file_path:
style: source/_data/styles.styl
footer: source/_data/footer.swig
variable: source/_data/variables.styl

# 自定义站点图标
favicon:
small: images/favicon.png
medium: images/favicon.png
apple_touch_icon: images/favicon.png
safari_pinned_tab: images/favicon.svg

# 页脚 - 是否显示语言切换
language_switcher: false

# 页脚 - 配置信息
footer:
## 指定站点的起始年
since: 2017

## 配置年份与版权信息之间的图标
icon:
### Font Awesome字体图标中的名称
name: heartbeat
### 设置图标为动态的
animated: true
### 图标颜色
color: "#CB1B45"

## 版权信息
copyright: YuXiao

## 由 Hexo&NexT 提供支持
powered: false

# 主题样式
scheme: Pisces

# 暗黑模式
darkmode: true

# 导航栏
menu:
home: / || home
archives: /archives/ || archive
categories: /categories/ || th
tags: /tags/ || tags
about: /about/ || user
messages: /messages/ || comments

# 图标和勋章
menu_settings:
icons: true
badges: false

# 侧边栏头像
avatar:
url: images/favicon.png
rounded: true
rotated: true

# 社交链接
social:
QQ: https://www.xiaocoder.com/images/QQ.png || qq
GitHub: https://github.com/YuXiaoCoder || github
E-Mail: mailto:xiao.950901@gmail.com || envelope

social_icons:
enable: true
icons_only: true
transition: true

links_settings:
icon: link
title: 友链
layout: block

links:
WordJian: http://wordjian.com/

# 文章底部 - 标签是否使用图标
tag_icon: true

# 打赏
reward_settings:
enable: true
animation: false
comment: "请作者喝瓶肥宅快乐水"

reward:
wechatpay: images/wechat-reward-image.png
alipay: images/alipay-reward-image.png

# 自适应移动设备
mobile_layout_economy: true

# 代码块
codeblock:
highlight_theme: "night eighties"
copy_button:
enable: true
show_result: true
style: default

# 回到顶部
back2top:
enable: true
sidebar: true
scrollpercent: true

# 阅读进度条
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

# 书签
bookmark:
enable: true
color: "#222"
save: auto

# 搜索引擎
## 在移动设备上禁止百度转换
disable_baidu_transformation: true

## 将站点信息添加到索引
index_with_subtitle: true

# 自动对外部 URL 使用 Base64 加密/解密
exturl: true

# 百度站长验证
baidu_site_verification: "twxo1mIvsV"

# 自动推送给百度,方便收录
baidu_push: true

# 支持图片的缩放功能
fancybox: true

# 延迟加载
lazyload: true

# 支持空白字符
pangu: true

# 快速链接
quicklink:
enable: true
home: true
archive: true
delay: true
timeout: 3000
priority: true
ignores:

# Valine - 评论
valine:
enable: true
appid: "<LeanCloud ID>"
appkey: "<LeanCloud KEY>"
notify: true # Mail notifier
verify: true # Verification code
placeholder: "ヾノ≧∀≦)o来啊,快活啊!"
avatar: robohash
guest_info: nick,mail
pageSize: 5 # Pagination size
language: zh-cn
visitor: false
comment_count: false
recordIP: true

# 不蒜子 - 网站计数
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

# 本地搜索
local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: true
preload: true

# 注释标签
note:
style: flat
icons: true
light_bg_offset: -18 | 6

其他配置文件

1
vim source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Custom styles.

// 首页 - 阅读全文按钮
.post-button .btn {
border-radius: 16px;
line-height: 2;
margin: 0 4px 8px 4px;
padding: 0 20px;
}

// 导航栏
.menu .menu-item:hover {
color: #00AA90!important;
}

.menu .menu-item-active a {
color: #00AA90!important;
}

// 整站透明
.header-inner {
background: rgba(255,255,255,0.5)!important;
}

.content-wrap {
background: rgba(255,255,255,0.5)!important;
}

.sidebar {
background: rgba(255,255,255,0.5)!important;
}

.sidebar-inner {
background: rgba(255,255,255,0.5)!important;
}
1
vim source/_data/footer.swig
1
<script color="0,137,108" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>
1
vim source/_data/variables.styl
1
2
3
4
5
6
7
8
9
10
11
12
// 鼠标悬停后颜色
$link-hover-green = #00AA90

// 用``围出的代码块字体颜色
$code-foreground = #005CAF

// 用``围出的代码块背景颜色
$code-background = #EEE

// Global link color.
$link-hover-color = $link-hover-green
$link-decoration-hover-color = $link-hover-green

汉化字段

  • 文件:themes/next/languages/zh-CN.yml
1
vim themes/next/languages/zh-CN.yml
  • 内容:
1
2
menu:
messages: 留言

SEO优化

  • 在这个搜索引擎至上的年代,更好的被搜索引擎收录成为必不可少的一步。

生成SiteMap文件

  • 安装所依赖的插件:
1
2
npm install --no-optional --save hexo-generator-sitemap
npm install --no-optional --save hexo-generator-baidu-sitemap
  • 一个用于生成传统的SiteMap文件,一个用于生成百度专有的SiteMap文件。

  • 配置_config.yml文件:

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
  • 重启生成静态文件,即可发现SiteMap文件已经生成了,本站的站点地图https://www.xiaocoder.com/sitemap.xml

百度站长平台

  • 注册百度站长平台,按如下步骤操作:
1
用户中心 ---> 站点管理 ---> 添加网站(已备案) ---> 验证站点 ---> 管理站点 ---> 自动/手动提交SiteMap文件

Google站长平台

  • 注册Google站长平台,验证站点,提交SiteMap文件即可。

对象存储

七牛云

  • 使用七牛云的对象存储,可以将一些较大的图片或歌曲放入其中,获取外链,在使用MD写博客是插入其中,大大加快资源的加载速度。
  • 注册七牛云,按如下步骤操作:
1
对象存储 ---> 新建存储空间 ---> 内容管理 ---> 上传文件 ---> 复制外链 ---> 插入MD文件

青云

  • 使用青云的对象存储,可以将一些较大的图片或歌曲放入其中,获取外链,在使用MD写博客是插入其中,大大加快资源的加载速度。
  • 支持Https站点,避免使用七牛云外链后,页面提示引用链接也应该为Https协议的警告。
  • 注册青云,青云的访问控制比较严格,复制的外链拥有时,按如下步骤操作:
1
存储 ---> 对象存储 ---> Bucket ---> 设置 ---> 访问控制 ---> 添加用户 ---> 所有用户与可读 ---> 复制外链 ---> 插入MD文件

音频/视频

  • 建议将音频/视频上传到对象存储中,加快资源的加载速度,提升用户体验。

音频

  • 安装所依赖的插件,GitHub地址
1
npm install --no-optional --save hexo-tag-aplayer
  • MD的文章中插入如下代码即可,若想禁用自动播放,请去掉autoplay标签:
1
{% aplayer "{{音频名称}}" "{{音频作者}}" "{{音频链接}}" "{{音频缩略图}}" "autoplay" %}

视频

  • 安装所依赖的插件,GitHub地址
1
npm install --no-optional --save hexo-tag-dplayer
  • MD的文章中插入如下代码即可,若想禁用自动播放,请去掉autoplay标签:
1
{% dplayer "url={{视频链接}}" "pic={{视频缩略图}}" "theme=#FADFA3" "autoplay=false" %}

robots.txt

  • robots.txt是一种存放于网站根目录下的ASCII编码的文本文件,它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。
  • robots.txt存放在站点目录下的source文件中,部署后在网站的根目录下。
1
vim source/robots.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
User-agent: *
Allow: /
Allow: /tags/
Allow: /about/
Allow: /archives/
Allow: /messages/
Allow: /categories/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://www.xiaocoder.com/sitemap.xml
Sitemap: https://www.xiaocoder.com/baidusitemap.xml

请作者喝瓶肥宅快乐水