hexo搭建和安装相关组件

初始化博客目录

例如:D:\hexoblog\docblog

1
2
3
4
5
[D:\hexoblog\docblog]$ hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
INFO Start blogging with Hexo

目录信息

1
2
3
4
5
6
7
8
9
10
.
├── _config.yml #Hexo的配置文件
├── db.json #Hexo自动生成的文件
├── package.json #插件配置文件,下同
├── package-lock.json
├── node_modules #生成网站需要用到的Node.js模块
├── scaffolds #存放模板的文件夹
├── source #博客Markdown源文件夹
├── public #存放生成的静态HTML文件
└── themes #主题文件夹

环境的各个信息

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
[D:\hexoblog\docblog]$ hexo -v
INFO Validating config
hexo: 6.2.0
hexo-cli: 4.3.0
os: win32 10.0.22000
node: 16.15.1
v8: 9.4.146.24-node.21
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.4
openssl: 1.1.1o+quic
cldr: 40.0
icu: 70.1
tz: 2021a3
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

[D:\hexoblog\docblog]$ npm -v
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.17.0

[D:\hexoblog\docblog]$ node -v
v16.15.1

安装所需插件

安装 Next 主题

1
2
[D:\hexoblog\docblog]$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Cloning into 'themes/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
[D:\hexoblog\docblog]$ npm install hexo-symbols-count-time --save
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated [email protected]: Support has ended for 9.x series. Upgrade to @latest

added 8 packages, and audited 249 packages in 25s

20 packages are looking for funding
run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues, run:
npm audit fix

Run `npm audit` for details.

[D:\hexoblog\docblog]$ npm install eslint --save
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 71 packages, and audited 320 packages in 1m

40 packages are looking for funding
run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

安装 git 远程部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[D:\hexoblog\docblog]$  npm install hexo-deployer-git --save
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 1 package, and audited 321 packages in 3s

40 packages are looking for funding
run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

添加搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[D:\hexoblog\docblog]$ npm install hexo-generator-searchdb --save
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 1 package, and audited 322 packages in 3s

40 packages are looking for funding
run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

添加图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[D:\hexoblog\docblog]$ npm install https://github.com/CodeFalling/hexo-asset-image --save

added 21 packages, and audited 338 packages in 15s

50 packages are looking for funding
run `npm fund` for details

9 vulnerabilities (3 moderate, 5 high, 1 critical)

To address all issues possible (including breaking changes), run:
npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

更改配置文件

更改_config.yml中的主题配置

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

更改_config.yml中的Site配置

1
2
3
4
5
6
7
8
# Site
title: dooubb
subtitle: ''
description: ''
keywords:
author: dooubb
language: zh-CN
timezone: ''

添加git部署配置

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
ignore_hidden: false # 添加这个属性值为false 此配置为了git workflows工作
repo:
#gitee: https://gitee.com/dooubb/doc.git,master
github: https://github.com/dooubb/doco.git,master

在_config.yml添加字数统计和阅读时长配置

1
2
3
4
5
6
7
8
9
symbols_count_time:
symbols: true
time: true
total_symbols: false
total_time: false
exclude_codeblock: false
awl: 4
wpm: 275
suffix: "mins."

更改主题配置文件

更改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
# ---------------------------------------------------------------
# Scheme Settings 主题显示样式
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

# ---------------------------------------------------------------
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
# ---------------------------------------------------------------
symbols_count_time:
separated_meta: false # 是否另起一行(true的话不和发表时间等同一行)
item_text_post: false # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
# item_text_total: false # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
awl: 4 # Average Word Length
wpm: 275 # Words Per Minute(每分钟阅读词数)
suffix: mins.


# ---------------------------------------------------------------
# Site Information Settings 网页小图标
# See: https://theme-next.org/docs/getting-started/
# ---------------------------------------------------------------
favicon:
small: /images/qpp.png
medium: /images/qpp.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml


# ---------------------------------------------------------------
# Sidebar Settings 文章的目录显示位置
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------
sidebar:
# Sidebar Position.
#position: left
position: right

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/dooubb || fab fa-github
E-Mail: [email protected] || fa fa-envelope

social_icons:
enable: true
icons_only: false
transition: false

# 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
# Preload the search data when the page loads.
preload: false

#文章创建时间和更新时间
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: false #如果是true表示同一天只显示创建时间
categories: true

修改首页文章标题和统计信息居中

替换themes/next/source/css/_schemes/Mist/_posts-expanded.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
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
// Post Expand
// --------------------------------------------------
.posts-expand {
&.index {
.post-title{
text-align: center; #文章标题
}
.post-meta {
text-align: center; #统计信息

+mobile() {
text-align: center;
}
}

.post-meta {
margin: 5px 0 20px 0;
}
}

.post-eof {
display: none;
}

.post-block:not(:first-child) {
margin-top: 120px;
}

.post-title, .post-meta {
text-align: center;
}

.post-body img {
margin-left: 0;
}

.post-tags {
text-align: left;

a {
background: $whitesmoke;
border-bottom: none;
padding: 1px 5px;

&:hover {
background: $grey-light;
}
}
}

.post-nav {
margin-top: 40px;
}
}

.post-button {
margin-top: 20px;
text-align: left;

.btn {
// color: $grey-dim;
background: none;
border: 0;
border-bottom: 2px solid var(--btn-default-border-color);
padding: 0;
transition-property: border;

&:hover {
border-bottom-color: var(--btn-default-hover-border-color);
}
}
}

添加网站运行时长和备案号

全部替换themes\next\layout\_partials\footer.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
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
{%- if theme.footer.beian.enable %}
<div class="beian">
{{- next_url('https://beian.miit.gov.cn', theme.footer.beian.icp + ' ') }}
{%- if theme.footer.beian.gongan_icon_url %}
<img src="{{ url_for(theme.footer.beian.gongan_icon_url) }}" style="display: inline-block;">
{%- endif %}
{%- if theme.footer.beian.gongan_id and theme.footer.beian.gongan_num %}
{{- next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footer.beian.gongan_id, theme.footer.beian.gongan_num + ' ') }}
{%- endif %}
</div>
{%- endif %}


<div class="copyright">
{%- set copyright_year = date(null, 'YYYY') %}
&copy; {% if theme.footer.since and theme.footer.since != copyright_year %}{{ theme.footer.since }} – {% endif %}
<span itemprop="copyrightYear">{{ copyright_year }}</span>
<span class="with-love">
<i class="{{ theme.footer.icon.name }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright or author }} && <span id="sitetime"></span>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
year - 作为date对象的年份,为4位年份值
month - 0-11之间的整数,做为date对象的月份
day - 1-31之间的整数,做为date对象的天数
hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
minutes - 0-59之间的整数,做为date对象的分钟数
seconds - 0-59之间的整数,做为date对象的秒数
microseconds - 0-999之间的整数,做为date对象的毫秒数 */
var t1 = Date.UTC(2018,02,13,15,00,00); //北京时间2018-2-13 00:00:00
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById("sitetime").innerHTML=" 已运行"+/*diffYears+" 年 "+*/diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
}/*因为建站时间还没有一年,就将之注释掉了。需要的可以取消*/
siteTime();
</script></span>
</div>

{%- if theme.footer.powered %}
<div class="powered-by">
{%- set next_site = 'https://theme-next.org' %}
{%- if theme.scheme !== 'Gemini' %}
{%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
{%- endif %}
{{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
<a href="https://beian.miit.gov.cn/">京ICP备2022022850号-1</a>
</div>
{%- endif %}

{%- if theme.add_this_id %}
<div class="addthis_inline_share_toolbox">
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
</div>
{%- endif %}

{{- next_inject('footer') }}