安装hexo

我使用node是v16.14.0, npm是8.3.1,系统Macos M1

1
npm install hexo-cli -g

初始化博客

1
2
3
# 自己创建一个文件夹,下面中我以myhexo为根目录
mkdir myhexo
hexo init

开启本地浏览服务

1
hexo server

主题修改(Butterfly为例)

hexo主题官网

https://hexo.io/themes/

安装主题

hexo根目录执行

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改根目录_config.yml里的主题

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

安装渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

语言设置

根目录_config.yml文件

1
2
3
4
5
6
7
支持三种语言
# 英语
default
# 简体中文
zh-CN
# 繁体中文
zh-TW

主页信息设置

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

# Site
title: Autumn Blog #博客名称
subtitle: ''
description: '纪录日常' #博客描述(名字旁)
keywords:
author: Autumn Li #作者名
language: zh-CN #语言
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 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:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
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: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
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:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

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

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

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

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: ''

修改主题配置文件信息

位置在hexo根目录/themes/butterfly/_config.yml

导航菜单

1
2
3
4
5
6
7
8
9
10
11
menu:
#标题可以修改,主页,文章...
主页: / || fas fa-home
文章: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
# List||fas fa-list:
# Music: /music/ || fas fa-music
# Movie: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于我: /about/ || fas fa-heart

代码高亮

1
highlight_theme: mac light #  darker / pale night / light / ocean / mac / mac light / false

代码复制开关

1
highlight_copy: true # copy button

代码框展开关闭

true默认不展开,需要点击按钮展开

false默认展开,有展开折叠按钮

none默认展开,没有按钮

1
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button

头像下Github,邮箱链接图标

1
2
3
social:
fab fa-github: https://github.com/wautumnli || Github
fas fa-envelope: mailto:wautumnli@163.com || Email

图片设置

1
2
3
4
5
6
7
8
9
10
11
12
13
# Disable all banner image
disable_top_img: false

# 图片放到 hexo根目录/themes/butterfly/source/img下
# 主页顶部图
index_img: /img/0_1667026358.jpeg
default_top_img: /img/0_1667026358.jpeg
# 归档页图
archive_img: /img/0_1667026358.jpeg
# 标签页图
tag_img: /img/0_1667026358.jpeg
# 分类页图
category_img: /img/0_1667026358.jpeg

文章封面图

1
2
3
4
5
6
7
8
9
10
11
12
cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# the position of cover in home page (封面顯示的位置)
# left/right/both
position: both
# When cover is not set, the default cover is displayed (當沒有設置cover時,默認的封面顯示)
# 可以设置多个图,没有封面会随机选择一个
default_cover:
- /img/0_1667026358.jpeg

文件标签内容显示

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
page: # Home Page
date_type: updated # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 主頁是否顯示分類
tags: false # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: updated # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字

头像设置

1
2
3
4
avatar:
img: /img/douglea.png
# 头像会一直转动
effect: false

右下角访问人数和时间

1
2
3
4
5
6
7
8
9
10
11
12
# 訪問人數
busuanzi:
site_uv: true
site_pv: true
page_pv: true

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
enable: true
# 开始日期 月/日/年 时间
publish_date: 10/29/2022 18:00:00

搜索

安装

1
npm install hexo-generator-search --save

评论

https://blog.csdn.net/qq_33384402/article/details/107200465

后续

太懒了.. 后面再补

https://blog.csdn.net/qq_46922488/article/details/119348718