基于github搭建专属于自己的博客(进阶篇)

发表于 | 分类于 ， | 热度 ℃
字数统计: 3,866 | 阅读时长 ≈ 17

本文基于上篇文章基础篇所写。有许多基于hexo的主题，每个不同的主题会需要不同的配置，主题配置文件在主题目录下的_config.yml。我们可以根据自己的情况选择适合自己的主题。我们选取其中一款主题NextT为模板进行演示。以下是本文的基本流程。

基本流程

1.安装主题

2.启用主题

3.验证主题

4.设置语言

5.设置菜单

6.侧栏设置

7.尾栏设置

8.附页

安装主题

在Hexo中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含Hexo本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。 为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

以NexT为例，首先在hexo文件夹中右键点击Git Base Here，或者终端锁定hexo根目录，然后输入命令：

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

即可获取最新版主题，后续更新只需输入指令：

1
git pull

启用主题

在hexo根目录（blog）中打开站点配置文件（_config.yml）,搜索theme字段。修改theme: next

1
theme: next

注意中间有空格。到此，NexT 主题安装完成。

验证主题

在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

1
hexo clean

首先启动 Hexo 本地站点，并开启调试模式，整个命令是

1
hexo s

在服务启动的过程，注意观察命令行输出是否有任何异常信息。 当命令行输出中提示出：INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.此时即可使用浏览器访问 http://localhost:4000/。

如果端口号被占用还是得先修改端口号，然后启动服务。即先输入

1
hexo server -p 5000

当命令行输出中提示出：INFO Hexo is running at http://0.0.0.0:5000/. Press Ctrl+C to stop.此时即可使用浏览器访问 http://localhost:5000/。

完成之后进行主题设定。借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。在next主题目录下的_config.yml文件中目前有四种模板，他们是：

Muse - 默认 Scheme，初代 NexT ，黑白主调，大量留白

Mist - Muse 的紧凑版本，整洁有序的单栏外观

Pisces - 双栏 Scheme，小家碧玉似的清新

Gemini - 双栏Scheme，简约淡雅的风尚

注释 # 即可。 以Pisce为例，选择 Pisce Scheme

设置语言

在站点根目录下修改配置文件_cofig.yml中的language为zh-Hans（简体中文）

目前 NexT 支持的语言如以下表格所示：

语言 代码 设定实例
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id

设置菜单

菜单栏设置

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。

编辑主题配置文件，修改以下内容： 设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。 菜单示例配置

1
2
3
4
5
6
7
menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

若你的站点运行在子目录中，请将链接前缀的 / 去掉 NexT 默认的菜单项有（标注 的项表示需要手动创建这个页面）：

键值 设定值 显示文本（简体中文）
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页
tags tags: /tags 标签页
about about: /about 关于页面
commonweal commonweal: /404.html 公益 404

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。 比如你在站点根目录中的配置文件设置language为zh-Hans，那么就要进入到主题目录下的languages文件中修改zh-Hans.yml，这样才能显示出菜单项新增的中文内容。以简体中文为例，若你需要添加一个菜单项，那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml。以下是默认情况。

1
2
3
4
5
6
7
8
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404

设定菜单项的图标，对应的字段是 menu_icons。 此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。菜单图标配置示例

1
2
3
4
5
6
7
8
9
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

添加标签，分类

添加标签页面，前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found。此时我们要新建一个页面

1
hexo new page tags

在新建的index.md文件中添加type: “tags”

当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的tags中添加标签即可

添加分类页面，前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加分类选项。此时我们要新建一个页面

1
hexo new page categories

在新建的index.md文件中添加type: “categories”

当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的categories中添加分类即可。分类可按次序进行分级。

添加关于我页面，步骤和以上差不多

在新建的index.md文件中添加内容

侧栏设置

设置侧栏位置，修改主题目录下sidebar的position值

设置头像，在站点根目录下载配置文件中新增avatar，值设置为头像的链接地址。地址可以是网络地址，也可以是本地地址（放置在source/images/ 目录下）

尾栏设置

修改底部的官方logo，找到 \themes\next\layout\_partials\下面的footer.swig文件，打开会发现，如下的语句：

第一个框 是下面侧栏的“日期❤ XXX”

如果想像我一样加东西，一定要在双大括号外面写。如：xxx,当然你要是想改彻底可以变量都删掉，看个人意愿。

第二个，是图一当中 “由Hexo驱动” 的Hexo链接，先给删掉防止跳转，如果想跳转当然也可以自己写地址，至于中文一会处理。注意删除的时候格式不能错，只把<a>...</a>标签这部分删除即可，留着两个单引号’’,否则会出错哦。

第三个框也是最后一个了，这个就是更改图一后半部分“主题-Next.XX”,这个比较爽直接将<a>..</a>都删掉，同样中文“主题”一会处理，删掉之后在上一行 ‘-’后面可以随意加上你想显示的东西，不要显示敏感信息哟，请自重。

接下来，处理剩余的中文信息。找到这个地方\themes\next\languages\ 下面的语言文件zh-Hans.yml（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）

看到了吧，这个就是传值传过去的，你想显示什么就在这里面大肆的去改动吧。其实在第二个框中，就可以把值都改掉，不用接受传值的方式，完全自己可以重写。不过我不建议那样做，因为传值这样只要是后续页面需要这几个值那么就都会通过取值去传过去，要是在刚才footer文件中直接写死，后续不一定哪个页面需要传值，但是值为空了或者还是原来的，可就尴尬了。所以还是这样改动吧。

附页

站点配置文件

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 网站
title: 浅悠悠的个人博客   #网站标题
subtitle: 。。。   #网站副标题
description: 。。。   #网站描述
author: 王骏   #您的名字
language: zh-CN   #网站使用的语言
timezone:           #网站时区。Hexo 默认使用您电脑的时区

# URL 网址
## 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://willxue.top
permalink: :year/:month/:day/:title/    #生成文件名字的格式我改成blog/:title:year:month:day/
permalink_defaults:

# Directory 目录配置
source_dir: source   #源文件夹，这个文件夹用来存放内容。
public_dir: public   #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags   #标签文件夹
archive_dir: archives   #归档文件夹
category_dir: categories   #分类文件夹
code_dir: downloads/code    #nclude code 文件夹
i18n_dir: :lang   #国际化（i18n）文件夹
skip_render:   #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。

# Writing 文章
new_post_name: :title.md   # 新建文章默认文件名
default_layout: post   # 默认布局
titlecase: false   # Transform title into titlecase
external_link: true   # 在新标签中打开一个外部链接，默认为true
filename_case: 0   #转换文件名，1代表小写；2代表大写；默认为0，意思就是创建文章的时候，是否自动帮你转换文件名，默认就行，意义不大。
render_drafts: false   #是否渲染_drafts目录下的文章，默认为false
post_asset_folder: false   #启动 Asset 文件夹
relative_link: false   #把链接改为与根目录的相对位址，默认false
future: true   #显示未来的文章，默认false
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   #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page   #分页目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

feed:
  type: atom       #feed 类型 (atom/rss2)
  path: atom.xml   #rss 路径
  limit: 20        #在 rss 中最多生成的文章数(0显示所有)

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
type: git 
  repository: https://github.com/imwillxue/imwillxue.github.com.git 
  branch: master

主题配置文件

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
255
256
257
258
259
260
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Place your favicon.ico to /source directory.
favicon: /favicon.ico   #站标  可以放在hexo文件夹下的/source里

# Set default keywords (Use a comma to separate)
keywords: "为学,willxue,willxue.top"  #网站关键字

# 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:  #rss这里不设置 引文站点配置文件已经配置了 需要安装插件

# Specify the date when the site was setup
since: 1990  #网站时间 从xx开始 类似 1990-2016


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

# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu: #菜单路径设置 如果hexo在二级目录放置要去掉/
  home: /
  archives: /archives #归档
  tags: /tags #标签
  categories: /categories  #分类
  about: /about #关于我
  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:  #icon图标
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat




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

# Schemes  #next的三个scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces



# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------


# Social links   #社交链接
social:
  GitHub: 
  Weibo:
  Others:

# 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: http://7xrz9n.com1.z0.glb.clouddn.com/logo.png #头像


# TOC in the Sidebar  #文章自动显示目录
toc:
  enable: true

  # Automatically add list number to toc.  #目录是否自动显示数字序号
  number: false


# 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:
  # 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: night

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

# Automatically Excerpt
auto_excerpt:
  enable: false
  length: 150

# Use Lato font
use_font_lato: true



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

# MathJax Support
mathjax:


# Swiftype Search API Key
#swiftype_key:

# Baidu Analytics ID
#baidu_analytics:

# Duoshuo ShortName
duoshuo_shortname: imwillxue

# Disqus
#disqus_shortname:

# Baidu Share
# Available value:
#    button | slide
#baidushare:
##  type: button

# 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:

# CNZZ count
#cnzz_siteid:


# 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: true
  user_id: 6262178932196377345
  admin_nickname: 神


# 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: true
  app_id: QImiFijLSOHYufsazlBVlwLg-gzGzoHsz
  app_key: AMcYaNHy9Y5OdH42k0d4uSED


# Tencent analytics ID
# tencent_analytics:

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

## 文章末尾是否显示打赏按钮
donate: 
  enable: true
  text: Enjoy it ? Donate me !  欣赏此文？求鼓励，求支持！
  alipay: 
  wechat: 


#! ---------------------------------------------------------------
#! 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
文章结束了，但我们的故事还在继续
坚持原创技术分享，您的支持将鼓励我继续创作！