WoodenRobot's Blog
0%

Hexo搭建个人博客（三）—— Hexo博客的美化

发表于 分类于 Disqus：
本文字数： 8.7k 阅读时长 ≈ 8 分钟

通过前两节的学习，我们已经搭建好自己的博客，就像盖房子一样要对内部进行装修，也就是对博客进行美化。

安装Hexo博客主题

Hexo博客可以安装不同的主题，这里我们只说最火的Next主题。首先我们在自己电脑里的博客文件夹内（即username.github.io文件夹内）右键选择Git Bash here，在终端窗口内输入以下代码：

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

稍等片刻，安装完成后你的themes文件夹内就会多出一个next文件夹，请在站点的配置文件中把主题选为next，即theme: next。

博客的配置

接下来我们对博客的配置主要将在两个_config.yml文件中进行。第一个为Hexo博客的站点配置文件位于你的博客文件夹（即username.github.io文件夹）内；第二个位于next文件夹内。
首先让我们看看站点配置文件都有什么：

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: why so serious?  # 站点名
subtitle:  # 副标题
description:
author: WoodenRobot  # 作者
language: zh-Hans # 语言，zh-Hans为中文简体
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://woodenrobot.me # 博客网址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions  # 这里配置站点所用主题和插件
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next  #请添加next主题并选择
#theme: landscape
#theme: yilia

# 多说
duoshuo_shortname: woodenrobot  # xxx.duoshuo.com，xxx即是shortname

# 百度  # 需要安装插件 npm install [email protected] --save
baidusitemap:
  path: baidusitemap.xml

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Wooden-Robot/Wooden-Robot.github.io.git
  branch: master
  plugins: -hexo-generator-feed

大家可以根据自己的情况进行设置。
接下来是主题的配置文件：

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
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Place your favicon.ico to /source directory.
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "woodenrobot"

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml #此处需要安装插件npm install hexo-generator-feed --save

# Specify the date when the site was setup
since: 2016




# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu:
  home: /                   #主页
  categories: /categories   #分类页（需手动创建） 教程请往下看！
  about: /about             #关于页面（需手动创建）
  archives: /archives       #归档页
  tags: /tags               #标签页（需手动创建）
  #commonweal: /404.html    #公益 404 （需手动创建）


# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwsome icon.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat




# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes #此为主题内主题，建议选择Mist。个人感觉比较稳定Bug少，改用其他主题可能会出现未知Bug（取决于作者是否在最新版内完善）。
#scheme: Muse
scheme: Mist
#scheme: Pisces



# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
#links_title #以下是侧边栏的友情链接，你们的配置文件中可能没有，按我的样式添加即可。
links_title: 友情链接

links:
  瓢虫映像: http://site.douban.com/177837/


# Social links
social:
  weibo: http://weibo.com/u/1561651905
  GitHub: https://github.com/Wooden-Robot
  zhihu: https://www.zhihu.com/people/mu-zhi-robot

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  Weibo: weibo


# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
# default : /images/default_avatar.jpg
avatar: /uploads/avatar.jpg  # 此处为侧边栏里的头像可以放入图片链接，也可将图片放入站点文件的source/uploads中（没有请在source中新建uploads）或者放入theme文件的source/images中。


# TOC in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: true


# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:

sidebar:  # 此处应为侧边栏左右位置，但并无什么作用，乱选无用或有bug。
  # Sidebar Position, available value: left | right
  position: left
  #position: right

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle icon.
  #display: post
  display: always
  #display: hide
  #display: remove



# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
#   enabled: [true/false] - Replace with specific image
#   image: url-of-image   - Images's url
custom_logo:
  enabled: false
  image:


# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

# Automatically Excerpt
auto_excerpt:
  enable: true
  length: 150

# Use Lato font
use_font_lato: true



# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:


# Swiftype Search API Key  # 站内搜素，教程请看往下看！
swiftype_key: TChYnQxfabLwWxErgM-L

# Baidu Analytics ID
#baidu_analytics:

# Duoshuo ShortName  # 多说评论，教程请看往下看！
duoshuo_shortname: woodenrobot
duoshuo_hotartical: true

# Disqus
#disqus_shortname:

# Share
#jiathis:
#add_this_id:

# Share
duoshuo_share: true

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:


# Google Analytics
#google_analytics:


# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 0
  #admin_nickname: ROOT


# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true


# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: #<app_id>
  app_key: #<app_key>


# Tencent analytics ID
# tencent_analytics:






#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Motion
use_motion: true

# Fancybox
fancybox: true

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version
version: 0.5.0

分类页面，标签页面，关于页面创建

以标签页面为例：
1.首先运行以下命令：

1
2
# 标签为"tags",分类为"categories",关于为"about"
hexo new page "tags"

在站点/source目录下会生成一个tags文件夹，里面包含一个index.md文件。
2.修改/source/tags目录下的index.md文件 

1
2
3
4
5
title: tags
date: 2015-09-29 14:37:02
type: "tags" # 同理分类为"categories"，关于为"about"

---

3.修改主题配置文件
去掉tags的注释

1
2
3
4
5
6
7
menu:
  home: /                       #主页
  categories: /categories	    #分类页（需手动创建）
  #about: /about		        #关于页面（需手动创建）
  #archives: /archives	     	#归档页
  tags: /tags		        	#标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）

多说评论

多说评论的添加在这就不多说了，官方教程内已经讲得非常详细，关于多说评论的美化如显示系统与浏览器请参考loveNight的博客里面讲的也很详细，如果还是不懂请在下方评论留言。

站内搜索

站内搜索的官方教程有所变化，所以在此为大家详细讲解一下。
前往Swiftype注册页面，注册一个新账户。







编辑站点配置文件，新增字段 swiftype_key，值设置成上述步骤复制出来的key。

1
2
# Swiftype Search Key
swiftype_key: xxxxxxxxx

到此基本上已经把Hexo博客的内容说完了，还有一些功能如站点统计等请参考以下的参考资料。

参考资料

欢迎关注我的其它发布渠道