之前用的 yilia 主题的作者跑路了,好久都没更新了,这导致我以前好不容易搞好的博客开始出现了一些有的没的小问题:标签搜索时有时无,赞赏二维码被压缩至一侧等等。但由于种种原因,也一直懒得再搞一个新主题,昨晚突然心血来潮,找了找新一点的主题,最终相中了 icarus

icarus 是那种很干净的主题,虽然简洁度比着 yilia 差了一些,但也多了不少内容,加了许些动画。

主题安装

根据 gitbub 上的说明,切换到主目录下执行下面命令即可。

1
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

完成后,更改了 _config.yml 文件,将主题换了过来,并 hexo g。正在我拿起手机准备等待其配置的时候,不幸的故事发生了,是的,报错了:

1
fs.SyncWriteStream is deprecated.

就这么一句报错,我搜了一个晚上,经过数次尝试后未果。

第二天起了个大早——十点多就起了,我改变了我的思路,因为我发现那个报错是18年一个低版本的bug,那么我想给他更新了会不会解决问题?

于是,我将年久失修的 npm node.jshexo 都给更新了一遍,并且安装了一些报错中缺少的依赖,问题终于解决了。

主题配置

任何主题都需要进行一些个性化的配置,小至修改 _config.yml 配置文件,大到修改一些网站配置文件。在修改的过程中,我参考了几个博客,将会在参考链接中列出:

普通配置

首先,配置 _config.yml 文件1

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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
{% codeblock _config.yml %}
# Version of the Icarus theme that is currently used
version: 2.6.0
# 我的网站图标
favicon: /images/favicon.svg
# Additional HTML meta tags in an array.
meta:
# Path or URL to RSS atom.xml
rss:
# 导航栏左侧的网站logo
logo: /images/logo.jpg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
# Facebook App ID
fb_app_id:
# Facebook Admin ID
fb_admins:
# Twitter ID
twitter_id:
# Twitter site
twitter_site:
# Google+ profile link
google_plus:
# 导航栏
navbar:
# 菜单
menu:
主页: /
归档: /archives
分类: /categories
标签: /tags
关于: /about
# 导航栏右侧的图标链接
links:
My GitHub:
icon: fab fa-github
url: 'https://github.com/wenmang'
# Footer section link settings
footer:
# 页脚图标链接
links:
Creative Commons:
icon: fab fa-creative-commons
url: 'https://creativecommons.org/'
Attribution 4.0 International:
icon: fab fa-creative-commons-by
url: 'https://creativecommons.org/licenses/by/4.0/'
Download on GitHub:
icon: fab fa-github
url: 'https://github.com/wenmang'
# 文章显示设置
article:
# Code highlight settings
highlight:
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
# 代码主题: atom-one-light亮色,atom-one-dark暗色
theme: atom-one-dark
# 显示复制按钮
clipboard: true
# Default folding status of the code blocks. Can be "", "folded", "unfolded"
fold: unfolded
# 是否显示文章主图
thumbnail: true
# 是否显示估算阅读时间
readtime: true
# 搜索插件设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
# Name of the search plugin
type: insight
# 评论插件设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
# Name of the comment plugin
type: valine
app_id: xxx # (required) LeanCloud application id
app_key: xxx # (required) LeanCloud application key
notify: true # (optional) receive email notification
verify: false # (optional) show verification code
placeholder: 说点什么吧 # (optional) comment box placeholder text
avatar: retro # 头像风格
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

# 打赏功能
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
-
# Donation entry name
type: alipay
# Qrcode image URL
qrcode: '/images/zhifubao.jpg'
-
# Donation entry name
type: wechat
# Qrcode image URL
qrcode: '/images/weixin.png'
-
# Donation entry name
# type: paypal
# Paypal business ID or email address
# business: ''
# Currency code
# currency_code: USD
-
# Donation entry name
# type: patreon
# URL to the Patreon page
# url: ''
# 分享插件设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
# 插件类型
type:
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
# 左侧边栏设置
left:
# 是否跟随页面滚动
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# 右侧边栏设置
right:
# Whether the right sidebar is sticky when page scrolls
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# Sidebar widget settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
-
# 个人信息
type: profile
# 部件位置
position: left
# 作者名
author: 文盲
# 作者身份描述
author_title: 饱暖思淫欲
# 当前居住地
location: 西安
# 头像
avatar: /images/logo.jpg
# Email address for the Gravatar to be shown in the profile widget
gravatar:
# 头像显示为圆还是方
avatar_rounded: false # 方
# 关注按钮的链接
follow_link: 'https://github.com/wenmang'
# Links to be shown on the bottom of the profile widget
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/wenmang'
envelope: mailto:xdwenmang@gmail.com
# Facebook:
# icon: fab fa-facebook
# url: 'https://facebook.com'
bilibili:
icon: /images/gmail.svg
url: 'https://space.bilibili.com/192395573'
# Dribbble:
# icon: fab fa-dribbble
# url: 'https://dribbble.com'
RSS:
icon: fas fa-rss
url: /atom.xml
-
# 目录
type: toc
# Where should the widget be placed, left or right
position: left
-
# 外部链接
type: links
# Where should the widget be placed, left or right
position: left
# Links to be shown in the links widget
links:
Google: 'https://google.com'
Baidu: 'https://baidu.com'
-
# 分类
type: category
# 位置指定,左/右
position: left
-
# 标签云
type: tagcloud
# 位置
position: left
-
# 近期文章
type: recent_posts
# 位置
position: right
-
# 归档
type: archive
# 位置
position: right
-
# 标签
type: tag
# 位置
position: right
# Other plugin settings
plugins:
# 启用页面动画
animejs: true
# Enable the lightGallery and Justified Gallery plugins
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
gallery: true
# Enable the Outdated Browser plugin
# http://outdatedbrowser.com/
outdated-browser: true
# Enable the MathJax plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
mathjax: true
# Show the back to top button on mobile devices
back-to-top: true
# Google Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
google-analytics:
# Google Analytics tracking id
tracking_id:
# Baidu Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
baidu-analytics:
# Baidu Analytics tracking id
tracking_id:
# Hotjar user feedback plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
# hotjar:
# Hotjar site id
# site_id:
# Show a loading progress bar at top of the page
progressbar: true
# BuSuanZi site/page view counter
# https://busuanzi.ibruce.info
busuanzi: true
# 51LA统计
tj51la: true
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
# Name or URL of the JavaScript and/or stylesheet CDN provider
cdn: jsdelivr
# Name or URL of the webfont CDN provider
fontcdn: google
# Name or URL of the webfont Icon CDN provider
iconcdn: fontawesome
{% codeblockend _config.yml %}

此处有一个小坑,就是 上述所有配置图片,需要放在 blog\themes\icarus\source\images 目录下,之后才能找得到。

进阶配置

进阶配置主要是对布局的更改,以及添加目录粘性布局等等2

由于是几乎完全照抄的,所以,直接在参考链接看人家的博客即可!

添加插件

此主题的优点就是集成了比较多的各类插件,只需要修改配置文件即可成功添加:

添加评论插件

我比较喜欢那种谁都能评论的系统,所以我选择了 valine

1
2
3
4
5
6
7
8
9
10
11
comment:
# Name of the comment plugin
type: valine
app_id: xxx【填自己的】 # (required) LeanCloud application id
app_key: xxx【填自己的】 # (required) LeanCloud application key
notify: true # (optional) receive email notification
verify: false # (optional) show verification code
placeholder: say【自己改】 # (optional) comment box placeholder text
avatar: retro【可自己查表】 # 头像风格
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

添加分享插件

直接填写插件类型即可

1
2
3
share:
# 插件类型
type: sharejs

使搜索引擎可爬取

搜索引擎可爬取意味着可以直接在搜索引擎上搜到自己的博客,而这也我很久之前也尝试过,但是并未成功,现在可以直接在自己网站中上传一个 html 文件,即可完成工作,但是有几个坑需要注意3

  1. 下载下来的文件需放置在 blog\source 文件夹中,以达到将其上传到网站根目录的目的。
  2. 存放之后,不可直接 hexo g -d,而是需要 hexo g 之后,将 blog\public 文件夹中生成的对应文件改得和下载下来的文件一模一样。
  3. 为省的每次提交都修改一次,可将 blog\public 中的对应文件改为 只读

参考链接


  1. 此部分参考了YH · Lin的博客

  2. 此部分参考(划掉)照抄了 Xinyu Liu的博客

  3. 此部分来自呆马屋的博客