快速搭建博客指南

发表于 阅读次数： Changyan： 本文字数： 16k 阅读时长 ≈ 15 分钟

安装hexo

1
2
3
4
5
6
7
8
9
$ npm install -g hexo-cli

# Hexo 将会在指定文件夹中新建所需要的文件
$ hexo init <folder>
$ cd <folder>
$ npm install

#安装git
npm install hexo-deployer-git --save

安装NexT主题

参考链接

1
2
$ mkdir themes/next
$ curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

配置博客和主题设置

修改主题设置文件,并根据其中的说明做相应的安装工作 这一步是最繁琐的，要有耐心，下面开始逐项说明： PS: 为方便，只需要修改配置文件的改动省略 git clone全部都要到主题NexT根目录下运行

头像

1.头像放入blog/themes/next/source/images文件夹

推荐

2.安装推荐插件npm install hexo-related-popular-posts --save

标签云

3.新建页面tags,categories,about,并增加相应type头格式

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

分享按钮

4.分享按钮git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

本地搜索

5.本地搜索安装npm install hexo-generator-searchdb --save

pdf支持

6.支持pdf git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf

示例：

TOFIX: 手机上不能正常显示....

fancybox

7.安装fancybox git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

显示图片

8.安装显示图片插件npm install hexo-asset-image-fixed --save

加载进度条

9.安装加载进度条git clone https://github.com/theme-next/theme-next-pace source/lib/pace

示例： ![发枪机器](搭建hexo博客/发枪机器.png)

公式支持

1.安装配置hexo-render-pandoc

1
2
3
4
npm un hexo-renderer-marked --save
#or npm un hexo-renderer-kramed --save (如果安装的是kramed的话)

npm i hexo-renderer-pandoc --save

前去官网安装pandoc，并保证能在命令行中运行 pandoc -v.

2.文章的Front-matter里打开mathjax开关(一定要打开，不然不会渲染)

1
2
3
4
5
6
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
--

至此可以完美渲染公式

示例如下

1
2
3
4
5
6
7
$$\begin{equation}
\begin{aligned}
a &= b + c \\
  &= d + e + f + g \\
  &= h + i
\end{aligned}
\end{equation}\label{eq2}$$

\[ \begin{equation} \begin{aligned} a &= b + c \\ &= d + e + f + g \\ &= h + i \end{aligned} \end{equation}\label{eq2} \]

1
$state \overset{NN}{\rightarrow}\left\{ \begin{aligned} &action1 \_ value \\ &action2 \_ value \\ &...\end{aligned} \right.$

\(state \overset{NN}{\rightarrow}\left\{ \begin{aligned} &action1 \_ value \\ &action2 \_ value \\ &...\end{aligned} \right.\)

为标题增加序号

修改文件位置:themes\next\source\css\_custom\custom.styl

1
2
3
4
5
6
7
8
9
//文章标题增加序号
.post-body {counter-reset:section}
.post-body h2{counter-reset:sub-section}
.post-body h3{counter-reset:composite}
.post-body h4{counter-reset:detail}
.post-body h2:before{content:counter(section) " ";counter-increment:section}
.post-body h3:before{content:counter(section) "." counter(sub-section) " ";counter-increment:sub-section}
.post-body h4:before{content:counter(section) "." counter(sub-section) "." counter(composite) " ";counter-increment:composite}
.post-body h5:before{content:counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";counter-increment:detail}

博客深度优化

博文压缩

1
2
npm install hexo-neat --save
npm install hexo-imagemin --save

脚本拼接

1
npm install hexo-filter-optimize --save

修改配置文件

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
filter_optimize:
  enable: true
  # remove static resource query string
  #   - like `?v=1.0.0`
  remove_query_string: true
  # remove the surrounding comments in each of the bundled files
  remove_comments: false
  css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    #   - only support the full path
    #   - default is ['css/main.css']
    inlines:
    excludes:
  js:
    # bundle loaded js file into the one
    bundle: true
    excludes:
  # set the priority of this plugin,
  # lower means it will be executed first, default is 10
  priority: 12

另外修改主题

1
fontawesome: //cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

增加建站时间

修改文件blog/themes/next/layout/_custom/sidebar.swig

blog/themes/next/layout/_custom/sidebar.swig
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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("1/15/2019 12:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

更换tag标签图标

themes/next/layout/_macro/post.swig
1
2
- rel="tag">#
+ rel="tag"><i class="fa fa-tag"></i>

增加文字计数功能

1
npm install hexo-symbols-count-time --save

然后修改配置文件blog/_config.yml即可

更换宋体1

修改相应配置文件themes/next/source/css/_variables/custom.styl即可

themes/next/source/css/_variables/custom.styl
1
2
3
4
5
$font-family-monospace    = consolas, Menlo, $font-family-base, monospace
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')

$font-family-chinese      = "Linux Biolinum"
$font-family-base         = $font-family-chinese, get_font_family('global'), sans-serif if get_font_family('global')

增加字体文件blog/source/fonts

添加结束文字

TODO:用css实现

文章置顶2

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

使用时同时添加下列两个标签

1
2
top: 10
sticky: true

在next/source/css/_custom/custom.styl自定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
// 自定义的文章置顶样式
.post-sticky-flag {
    font-size: 18px;
    float: left;
    color: rgb(0, 0, 0);
    cursor: help;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.post-sticky-flag:hover {
    color: #07b39b;
}

生成唯一链接

1
npm install hexo-abbrlink --save

配置文件附下

blog/_config.yml

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

# Site
title: s0mE
subtitle: Less is More
description: Less is More
keywords:
author: Lingjia Meng
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://s0me.top
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: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# 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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:lingjiameng/lingjiameng.github.io.git
  branch: master

#本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# 博文压缩
# hexo-neat
neat_enable: true

neat_html:
  enable: true
  exclude:
    - '**/lib/pdf/web/viewer.html'
  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'

neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/lib/pdf/web/debugger.js' 

imagemin:
  enable     : true
  interlaced : false
  multipass  : false
  optimizationLevel: 2
  pngquant   : false
  progressive: false


# 计数插件
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: false
  exclude_codeblock: false

blog/themes/next/_config.yml

blog/themes/next/_config.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
214
215
216
217
218
219
footer:

  since: 2019

  # Icon between year and copyright info.
  icon:
    name: heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"  # "#808080"
  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: true
 
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
scheme: Gemini

# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

# Posts / Categories / Tags in sidebar.
site_state: true

social:
  GitHub: https://github.com/lingjiameng || github
  QQmail: mailto:1574761457@qq.com || envelope
  Gmail: mailto:menglingjia0214@gmail.com || google
  
social_icons:
  enable: true
  icons_only: true
  transition: false

# Sidebar Avatar
avatar:
  url: /images/s0mE.jpg #/images/avatar.gif

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true


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

# Automatically saving scroll position on each post / page in cookies.
save_scroll: true

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

# Read more button
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius: 
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true
    # Style: only 'flat' is currently available, leave it blank if you prefer default theme
    style:

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: true
  title: 相关文章 # custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5

# Code Highlight theme
highlight_theme: night eighties

# TagCloud settings for tags page.
tagcloud:
  # If true, font size, font color and amount of tags can be customized
  enable: true
  # All values below are same as default, change them by yourself
  min: 12 # min font size in px
  max: 30 # max font size in px
  start: "#9733EE" # start color (hex, rgba, hsla or color keywords)
  end: "#FF512F" # end color (hex, rgba, hsla or color keywords)
  amount: 200 # amount of tags, change it if you have more than 200 tags

# ---------------------------------------------------------------
# Font Settings. Introduced in NexT v5.0.1.
# ---------------------------------------------------------------

font:
  enable: true.
  host: https://fonts.loli.net
  global:
    external: true
    family: Noto Serif SC #Lato
    size: 16

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

# Math Equations Render Support
math:
  enable: true
  per_page: true
  engine: mathjax

# Han Support
# Dependencies: https://github.com/theme-next/theme-next-han
han: true

# ---------------------------------------------------------------
# Content Sharing Services
# ---------------------------------------------------------------
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

# ---------------------------------------------------------------
# Search Services
# See: https://theme-next.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false

# ---------------------------------------------------------------
# tag Settings
# ---------------------------------------------------------------

pdf:
  enable: true
  # Default height
  height: 600px
  pdfobject:
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
    #cdn: 

# ---------------------------------------------------------------
# Animation Settings
# ---------------------------------------------------------------
pace: true
pace_theme: pace-theme-minimal

blog/themes/next/layout/_custom/sidebar.swig

blog/themes/next/layout/_custom/sidebar.swig
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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("1/15/2019 12:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

hemes/next/source/css/_variables/custom.styl

hemes/next/source/css/_variables/custom.styl
1
2
3
4
5
$font-family-monospace    = consolas, Menlo, $font-family-base, monospace
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')

$font-family-chinese      = "Linux Biolinum"
$font-family-base         = $font-family-chinese, get_font_family('global'), sans-serif if get_font_family('global')

修改过的文件

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
# 安装hexo
hexo new page tags
hexo new page categories
hexo new page about
# 安装next

# 资源文件
blog/source/fonts #增加字体
themes/next/source/images #增加头像 

# 配置文件
blog/_config.yml
blog/themes/next/_config.yml
blog/themes/next/layout/_custom/sidebar.swig #计时功能
themes/next/source/css/_variables/custom.styl #字体调整

# npm安装博客根目录操作
npm install hexo-deployer-git --save
npm install hexo-related-popular-posts --save
npm install hexo-generator-searchdb --save
npm install hexo-asset-image-fixed --save
npm install hexo-generator-feed --save
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
npm install hexo-generator-sitemap --save
npm install hexo-abbrlink --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-symbols-count-time --save

#主题插件git下载，切入主题目录下操作
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
git clone https://github.com/theme-next/theme-next-han source/lib/Han

#源文件
themes/next/layout/_macro/post.swig
# - rel="tag">#
# + rel="tag"><i class="fa fa-tag"></i>

  1. https://io-oi.me/beautiful/share/2018/12/11/noto-serif-sc-added-on-google-fonts.html↩︎

  2. https://blog.csdn.net/qwerty200696/article/details/79010629↩︎