测试

$$
\begin{cases}
F_{0}=0 \\
F_{1}=1 \\
F_{n}=F_{n-1}+F_{n-2} (n \ge 2)
\end{cases}
$$

更新hexo5+next8

更新nodejs

使用nvm

安装nvm

使用nvm管理nodejs,使用nvm切换node版本

更新hexo-cli

1
npm install hexo-cli -g

安装成功后的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog (master)
$ hexo version
hexo: 4.2.1
hexo-cli: 4.3.0
os: win32 10.0.19043
node: 14.18.2
v8: 8.4.371.23-node.85
uv: 1.42.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 83
nghttp2: 1.42.0
napi: 8
llhttp: 2.1.4
openssl: 1.1.1l
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0

hexo init新站点

更新的hexo5与原来的next主题不兼容,所以无法直接在原站点(blog)进行更新。因此,我的做法是直接创建一个新站点(blog_new),然后把原站点(blog)上的文章复制到新站点(blog_new)上。

1
2
3
4
5
6
7
8
9
10
11
12
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog
$ hexo init blog_new
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
added 252 packages from 208 contributors in 18.717s

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

INFO Start blogging with Hexo!

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog

hexo init的站点使用的hexo默认是5.0版本:

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
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog
$ cd blog_new/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.landscape.yml _config.yml node_modules/ package.json package-lock.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ cat package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^5.0.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^4.0.0",
"hexo-renderer-stylus": "^2.0.0",
"hexo-server": "^2.0.0",
"hexo-theme-landscape": "^0.0.3"
}
}

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

更新新站点下的hexo版本

安装npm-check,若已安装可以跳过

1
npm install -g npm-check

检查系统插件是否需要升级

1
npm-check

安装npm-upgrade,若已安装可以跳过

1
npm install -g npm-upgrade

更新package.json中插件的插件版本

输入

1
npm-upgrade

命令,然后输入yes选择要更新的插件。

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
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm-upgrade
Checking for outdated dependencies for "G:\Blog\blog_new\package.json"...


New versions of active modules available:

hexo ^5.0.0 → ^5.4.0
hexo-renderer-marked ^4.0.0 → ^4.1.0
hexo-renderer-stylus ^2.0.0 → ^2.0.1

? Update "hexo" in package.json from ^5.0.0 to ^5.4.0? (Use arrow keys)
? Update "hexo" in package.json from ^5.0.0 to ^5.4.0? Yes

? Update "hexo-renderer-marked" in package.json from ^4.0.0 to ^4.1.0? (Use arro
? Update "hexo-renderer-marked" in package.json from ^4.0.0 to ^4.1.0? Yes

? Update "hexo-renderer-stylus" in package.json from ^2.0.0 to ^2.0.1? (Use arro
? Update "hexo-renderer-stylus" in package.json from ^2.0.0 to ^2.0.1? Yes


These packages will be updated:

hexo ^5.0.0 → ^5.4.0
hexo-renderer-marked ^4.0.0 → ^4.1.0
hexo-renderer-stylus ^2.0.0 → ^2.0.1

? Update package.json? (Y/n) yes
? Update package.json? Yes

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

删除新站点已经安装的插件

删除package-lock.json文件和node_modules/目录:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.landscape.yml _config.yml node_modules/ package.json package-lock.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ rm package-lock.json

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ rm -rf node_modules/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.landscape.yml _config.yml package.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

安装package.json中的插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm install
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 252 packages from 208 contributors in 13.869s

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


18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.landscape.yml _config.yml node_modules/ package.json package-lock.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

查看hexo版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ hexo version
INFO Validating config
hexo: 5.4.0
hexo-cli: 4.3.0
os: win32 10.0.19043
node: 14.18.2
v8: 8.4.371.23-node.85
uv: 1.42.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 83
nghttp2: 1.42.0
napi: 8
llhttp: 2.1.4
openssl: 1.1.1l
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

可以看到hexo已经升级到5.4版本的了。

在新站点安装next主题

hexo 5.x支持通过npm把next主题安装成hexo的插件。

1
npm install hexo-theme-next

安装效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm install hexo-theme-next
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-theme-next@8.8.2
added 1 package from 1 contributor in 3.027s

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


18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

更新next版本

在hexo站点根目录下:

1
npm install hexo-theme-next@latest

安装效果:

1
2
3
4
5
6
7
8
9
10
11
12
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm install hexo-theme-next@latest
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-theme-next@8.8.2
updated 1 package in 2.924s

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

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

启用next主题

复制next主题的配置文件到站点根目录下

进入站点目录,把next主题的配置文件复制到站点根目录下,和hexo的配置文件(_config.yml)放在一起。并且重命名为_config.next.yml

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

此时站点根目录下共有3个配置文件:

1
2
3
4
5
6
7
8
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ cp node_modules/hexo-theme-next/_config.yml _config.next.yml

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.landscape.yml _config.next.yml _config.yml node_modules/ package.json package-lock.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

分别是_config.landscape.yml,_config.next.yml,_config.yml。
_config.landscape.yml是landscpae的配置文件,

卸载landscape主题

1
npm uninstall hexo-theme-landscape

运行效果:

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
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ cat package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "5.4.0"
},
"dependencies": {
"hexo": "^5.4.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^4.1.0",
"hexo-renderer-stylus": "^2.0.1",
"hexo-server": "^2.0.0",
"hexo-theme-landscape": "^0.0.3",
"hexo-theme-next": "^8.8.2"
}
}

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm uninstall hexo-theme-landscape
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 1 package in 1.86s

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


18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ cat package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "5.4.0"
},
"dependencies": {
"hexo": "^5.4.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^4.1.0",
"hexo-renderer-stylus": "^2.0.1",
"hexo-server": "^2.0.0",
"hexo-theme-next": "^8.8.2"
}
}

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

删除landscape主题的配置文件

在站点目录下,输入如下命令删除:

1
2
3
4
5
6
7
8
9
10
11
12
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.landscape.yml _config.next.yml _config.yml node_modules/ package.json package-lock.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ rm _config.landscape.yml

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.next.yml _config.yml node_modules/ package.json package-lock.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

hexo启用next主题

进入站点目录,打开hexo的配置文件_config.yml,把landscape替换成next:

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

查看主题效果

在站点目录下,输入命令:

1
hexo s

然后进入
http://127.0.0.1:4000/
查看效果

安装旧站点的插件到新站点:

下面是我旧站点的package.json文件内容:

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
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog (master)
$ cat package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "4.2.1"
},
"dependencies": {
"hexo": "^4.2.1",
"hexo-abbrlink": "^2.2.1",
"hexo-auto-category": "^0.2.1",
"hexo-deployer-git": "^3.0.0",
"hexo-filter-kroki": "^2.1.8",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-baidu-sitemap": "^0.1.9",
"hexo-generator-category": "^1.0.0",
"hexo-generator-index-pin-top": "^0.2.2",
"hexo-generator-search": "^2.4.3",
"hexo-generator-sitemap": "^2.2.0",
"hexo-generator-tag": "^1.0.0",
"hexo-reference": "^1.0.4",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^4.1.0",
"hexo-renderer-stylus": "^2.0.1",
"hexo-server": "^2.0.0"
}
}

这上面的:
hexo-abbrlink插件是生成永久链接的
hexo-filter-kroki插件是用来支持plantuml绘图的。这两个插件比较重要,其他的插件没那么重要。

在新站点安装hexo-abbrlink插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm install hexo-abbrlink
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-abbrlink@2.2.1
added 3 packages from 6 contributors in 2.849s

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


18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

在新站点安装hexo-filter-kroki插件

1
2
3
4
5
6
7
8
9
10
11
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm install hexo-filter-kroki
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-filter-kroki@2.1.8
added 2 packages from 7 contributors in 2.705s

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

复制旧站点中的文章到新站点

旧站点的重要插件安装到新站点后,就可以把就站点的文章复制到新站点了:

1
2
3
4
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ cp -r ../blog/source/_posts/* source/_posts/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

查看复制来的文章:

1
2
3
4
5
6
7
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ cd source/_posts/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new/source/_posts
$ ls
hello-world.md Hexo/ Windows/ 编程/ 其他/ 随堂笔记/

配置next 8

https://theme-next.js.org/docs/theme-settings/

打开next主题的配置文件:G:\Blog\blog_new_config.next.yml

缓存支持

G:\Blog\blog_new\_config.next.yml
1
2
3
# Allow to cache content generation.
cache:
enable: true

压缩生成的hexo文件

G:\Blog\blog_new\_config.next.yml
1
2
# Remove unnecessary files after hexo generate.
minify: true

选择视图方案

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

我这里用的是Gemini这个Schemes

黑暗模式

G:\Blog\blog_new\_config.next.yml
1
2
# Dark Mode
darkmode: true

如果操作系统首选主题是黑暗的,则接下来的主题自动显示黑暗模式。它由MacOS Mojave,iOS 13和Android 10或更高版本支持。

图标

把图标放在hexo站点下的source目录下的images目录下:

1
2
3
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new/source/images
$ ls
apple-touch-icon-next.png avatar.gif favicon.ico favicon-16x16-next.png favicon-32x32-next.png

效果如下:

image-20211219210849192

然后在next的配置文件中设置如下:

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /manifest.json
G:\Blog\blog_new\_config.next.yml
1
2
3
# Custom Logo (Warning: Do not support scheme Mist)
# custom_logo: #/uploads/custom-logo.jpg
custom_logo: /images/avatar.gif

image-20211220122345692

Creative Commons版权声明

版权声明

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa
# Available values: big | small
size: small
sidebar: true
post: true
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
language: deed.zh

sidebar: true时的效果:
image-20211219211416353
post: true时的效果:
image-20211219211302792

配置菜单项

[3]

添加自定义页面

添加tag页面

https://theme-next.js.org/docs/theme-settings/custom-pages.html#Adding-%C2%ABTags%C2%BB-Page

进入站点目录,输入如下命令生成tags页面:

1
hexo new page tags

这个命令将在source/目录下生成tags/目录

修改source\tags\index.md文件

打开生成的index.md文件,在其frontmatter中加上

1
type: tags

如下所示

G:\Blog\blog_new\source\tags\index.md
1
2
3
4
5
---
title: tags
date: 2021-12-20 14:07:04
type: tags
---

不然tags页面不会显示任何内容。

开启tags菜单项

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
#categories: /categories/ || fa fa-th
#archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
# commonweal: /404/ || fa fa-heartbeat

运行过程:

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
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ hexo new page tags
INFO Validating config
INFO ==================================
███╗ ██╗███████╗██╗ ██╗████████╗
████╗ ██║██╔════╝╚██╗██╔╝╚══██╔══╝
██╔██╗ ██║█████╗ ╚███╔╝ ██║
██║╚██╗██║██╔══╝ ██╔██╗ ██║
██║ ╚████║███████╗██╔╝ ██╗ ██║
╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝ ╚═╝
========================================
NexT version 8.8.2
Documentation: https://theme-next.js.org
========================================
INFO Created: G:\Blog\blog_new\source\tags\index.md

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.next.yml _config.yml db.json node_modules/ package.json package-lock.json scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls source/
_posts/ categories/ images/ tags/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

Tagcloud标签云

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
# TagCloud settings for tags page.
tagcloud:
min: 12 # Minimum font size in px
max: 30 # Maximum font size in px
amount: 200 # Total amount of tags
orderby: name # Order of tags
order: 1 # Sort order

添加Categories页面

插件hexo-generator-category

Categories页面是hexo-generator-category这个插件提供的功能。这个插件在hexo init站点的时候就已经安装好了。我们不用自己去安装。

创建categories目录

进入站点目录,输入如下命令:

1
hexo new page categories

这个命令将会在站点的source/目录下生成一个categories/目录。并在categories/目录中生成一个index.md的文件。
该index.md文件的内容如下:

image-20211220124222735

命令运行效果如下所示:

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
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls
_config.next.yml _config.yml db.json node_modules/ package.json package-lock.json public/ scaffolds/ source/ themes/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls source/
_posts/ images/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ hexo new page categories
INFO Validating config
INFO ==================================
███╗ ██╗███████╗██╗ ██╗████████╗
████╗ ██║██╔════╝╚██╗██╔╝╚══██╔══╝
██╔██╗ ██║█████╗ ╚███╔╝ ██║
██║╚██╗██║██╔══╝ ██╔██╗ ██║
██║ ╚████║███████╗██╔╝ ██╗ ██║
╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝ ╚═╝
========================================
NexT version 8.8.2
Documentation: https://theme-next.js.org
========================================
INFO Created: G:\Blog\blog_new\source\categories\index.md

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ ls source/
_posts/ categories/ images/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

进入categories/目录,打开里面的index.md文件,在其中加上:

1
type: categories

如下所示:

G:\Blog\blog_new\source\categories\index.md
1
2
3
4
5
---
title: categories
date: 2021-12-20 12:35:59
type: categories
---

如果没有加上type: categories,则categories页面讲不会显示内容。

在next配置文件中打开categories/页面

打开next的配置文件,找到menu:,取消categories:项的注释

1
2
3
4
5
6
7
8
9
10
11
12
13
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
# tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
# archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat

谷歌日历

https://theme-next.js.org/docs/theme-settings/custom-pages.html#Adding-Google-Calendar-Page

添加自定义404页面

https://theme-next.js.org/docs/theme-settings/custom-pages.html#Custom-404-Page

创建404页面

进入hexo站点根目录,输入如下命令创建404页面:

1
hexo new page 404

打开hexo的配置文件,把relative_link设置为false:

G:\Blog\blog_new\_config.yml
1
relative_link: false

是否支持重定向到404页面,需要托管hexo站点的网站的支持。这个是hexo无法决定的。

站点地图

安装hexo-generator-sitemap插件

编辑404/index.md页面

G:\Blog\blog_new\source\404\index.md
1
2
3
4
5
6
7
8
---
title: '404'
date: 2014-12-22 12:39:04
comments: false
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script>

打开next主题的404菜单项

打开next主题的配置文件,取消404菜单项的注释:

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
# tags: /tags/ || fa fa-tags
#categories: /categories/ || fa fa-th
# archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
commonweal: /404/ || fa fa-heartbeat

动态子菜单

动态子菜单可在next主题的配置文件的menu:下设置,如下所示

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
home: / || fa fa-home
archives: /archives/ || fa fa-archive
Docs:
default: /docs/ || fa fa-book
Getting Started:
default: /getting-started/ || fa fa-flag
Installation: /installation.html || fa fa-download
Configuration: /configuration.html || fa fa-wrench
Third Party Services:
default: /third-party-services/ || fa fa-puzzle-piece
Math Equations: /math-equations.html || fa fa-square-root-alt
Comment Systems: /comments.html || fa fa-comment-alt

侧边栏设置 Sidebar Setting

https://theme-next.js.org/docs/theme-settings/sidebar.html

侧边栏样式

https://theme-next.js.org/docs/theme-settings/sidebar.html#Sidebar-Style

侧边栏位置

G:\Blog\blog_new\_config.next.yml
1
2
3
4
sidebar:
# Sidebar Position.
# position: left
position: right

侧边栏宽度

Muse和Mist默认宽度是320px,和Pisces和Gemini默认是240px。你可以根据自己的需要进行调整:

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
sidebar:
......
# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
width: 300

侧边栏显示方式

post → Show sidebar only in posts which have index.
always → Show sidebar in all pages.
hide → Hide it in all pages (but can be opened by user manually).
remove → Remove sidebar totally.

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
sidebar:
display: post
#display: always
#display: hide
#display: remove

设置头像

https://theme-next.js.org/docs/theme-settings/sidebar.html#Configuring-Avatar

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif
# If true, the avatar will be displayed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false

显示效果如下:

image-20211220140144634

侧边栏的Posts Categories Tags统计

https://theme-next.js.org/docs/theme-settings/sidebar.html#Sidebar-Site-State

G:\Blog\blog_new\_config.next.yml
1
2
# Posts / Categories / Tags in sidebar.
site_state: true

显示效果:

image-20211220142056403

侧边栏的社交链接

https://theme-next.js.org/docs/theme-settings/sidebar.html#Sidebar-Social-Links

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
social:
GitHub: https://github.com/yourname || fab fa-github
E-Mail: mailto:yourname@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
enable: true
icons_only: false
transition: false

显示效果:

image-20211221110621775
点击社交连接,浏览器会以新标签打开这个链接

侧边栏的站内滚动链接

点击这个链接,浏览器会在当前标签页打开这个链接,之前页面的内容会被覆盖。

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
# Blog rolls
links_settings:
icon: fa fa-globe
title: Links
# Available values: block | inline
layout: block

links:
Title: https://example.com

显示效果:

image-20211221110434154

侧栏的文章目录

https://theme-next.js.org/docs/theme-settings/sidebar.html#Sidebar-TOC

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: true
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc.
max_depth: 6

显示效果:

image-20211220145140014

https://theme-next.js.org/docs/theme-settings/footer.html

站点开始时间

G:\Blog\blog_new\_config.next.yml
1
2
3
footer:
# Specify the year when the site was setup. If not defined, current year will be used.
since: 2018

页脚图标

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
footer:
...
# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/icons
name: fa fa-heart #❤作为图标
# If you want to animate the icon, set it to true.
animated: true #图标有动画效果
# Change the color of icon, using Hex Code.
color: "#ff0000" #图标的颜色

网站版权名称

G:\Blog\blog_new\_config.next.yml
1
2
footer:
copyright:

如果不设置的话,则显示作者的信息。

是否显示网站的构建平台

G:\Blog\blog_new\_config.next.yml
1
2
footer:
powered: true

如果设置范位false,则会隐藏页脚下的类似Powered by Hexo & NexT.Gemini信息

网站备案信息

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
footer:
beian:
enable: true
icp: 京ICP备 1234567890号-1
gongan_id: 1234567890
gongan_num: 京公网安备 1234567890
gongan_icon_url: /uploads/beian.png

帖子设置 文章设置

https://theme-next.js.org/docs/theme-settings/posts.html

序言文本

在文章中使用<!-- more -->显式隔开前言和正文。

文章元信息

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

文章字数统计

安装插件

进入站点目录,输入如下命令安装字数统计插件:

1
npm install hexo-word-counter

在hexo配置文件中配置

G:\Blog\blog_new\_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 字数统计插件
## npm install hexo-word-counter
symbols_count_time:
#在Post Meta部分中的帖子单词的数量
symbols: true
#在Post Meta部分中显示帖子的估计读取时间。
time: true
#在页脚中显示所有帖子单词的数量。
total_symbols: true
#在页脚中读完所有帖子的需要的估计时间。
total_time: true
#awl表示一个的单词的平均字符数
awl: 4
#wpm是指人每分钟的平均能阅读的单词数。
wpm: 275

在next配置文件中配置

G:\Blog\blog_new\_config.next.yml
1
2
3
symbols_count_time:
separated_meta: true
item_text_total: true

查看效果

先执行:
hexo clean
然后在执行
hexo s
查看效果

文章meta中的字符统计

image-20211220211332451

全站点的字符统计

image-20211220211011359

捐赠设置

https://theme-next.js.org/docs/theme-settings/posts.html#Donate-Settings

Follow Me

https://theme-next.js.org/docs/theme-settings/posts.html#Follow-Me

相关热门帖子

https://theme-next.js.org/docs/theme-settings/posts.html#Related-Popular-Posts

安装插件

进入后hexo站点目录,安装如下插件

1
npm install hexo-related-popular-posts

Post Edit

https://theme-next.js.org/docs/theme-settings/posts.html#Post-Edit

显示上一个帖子和下一个帖子

https://theme-next.js.org/docs/theme-settings/posts.html#Post-Navigation

自定义页面

https://theme-next.js.org/docs/theme-settings/custom-pages.html

使用存档页作为主页

https://theme-next.js.org/docs/theme-settings/custom-pages.html#Use-Archive-Page-as-Home-Page

这个功能真是把主页和归档页做了调换而已。设置之后原来的主页变成了归档页,原来的归档页则显示主页的内容。
我想要的效果是,使用归档页覆盖掉原来的主页,归档页也还是原来的归档页。而不是调换的效果。

没有达到我想要的效果

添加Tags页面

这几个在上面已经介绍过了。

添加Categories页面

添加 Google Calendar页面

杂项主题设置

https://theme-next.js.org/docs/theme-settings/miscellaneous.html

预连接

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Preconnect

文本对齐

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Mobile-Devices-Adaptation

移动设备适配

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Mobile-Devices-Adaptation

亮色和深色主题颜色

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Theme-Color

滚动条设置

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Body-Scrollbar

代码块样式

代码块赋值按钮

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: default
dark: tomorrow-night
prism:
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style:

返回顶部按钮

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Back-To-Top

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

阅读进度 显示条

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Reading-Progress

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
# Reading progress bar
reading_progress:
enable: true
# Available values: left | right
start_at: left
# Available values: top | bottom
position: top
reversed: false
color: "#37c6c0"
height: 3px

书签Bookmark

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Bookmark
下次访问时可以自动滚动到上次的阅读位置。

1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
enable: true
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

GitHub横幅

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#GitHub-Banner
在右上角提供Follow me on GitHub横幅。

字体定制

https://theme-next.js.org/docs/theme-settings/miscellaneous.html#Fonts-Customization

搜索引擎优化设置

https://theme-next.js.org/docs/theme-settings/seo.html

显示副标题

站长工具 网站管理员工具

https://theme-next.js.org/docs/theme-settings/seo.html#Webmaster-Tools

国际化

https://theme-next.js.org/docs/theme-settings/internationalization.html

设置成中文简体

https://theme-next.js.org/docs/theme-settings/internationalization.html#Choosing-Language

G:\Blog\blog_new\_config.yml
1
language: zh-CN

多语言切换

https://theme-next.js.org/docs/theme-settings/internationalization.html#Multilingual-Switcher

G:\Blog\blog_new\_config.yml
1
2
3
language:
- zh-CN
- en

next第三方服务

数学公式引擎

https://theme-next.js.org/docs/third-party-services/math-equations.html

评论系统

https://theme-next.js.org/docs/third-party-services/comments.html

在线编辑

https://theme-next.js.org/docs/third-party-services/post-widgets.html

统计和分析

百度分析

https://theme-next.js.org/docs/third-party-services/statistics-and-analytics.html#Baidu-Analytics-China

G:\Blog\blog_new\_config.next.yml
1
2
# Baidu Analytics ID
baidu_analytics: your_id

LeanCloud统计(国内)

https://theme-next.js.org/docs/third-party-services/statistics-and-analytics.html#LeanCloud-China

搜索服务

https://theme-next.js.org/docs/third-party-services/search-services.html#Local-Search

安装插件

进入站点根目录,输入如下命令

1
npm install hexo-generator-searchdb

在hexo配置文件中添加配置

G:\Blog\blog_new\_config.yml
1
2
3
4
5
6
7
8
# Local Search
## Install hexo-generator-searchdb by executing the following command in site root dir:
## npm install hexo-generator-searchdb
search:
path: search.xml
field: post
content: true
format: html

编辑next配置文件

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/next-theme/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

聊天服务

https://theme-next.js.org/docs/third-party-services/chat-services.html

外部库

https://theme-next.js.org/docs/third-party-services/external-libraries.html

高级设置

自定义文件

https://theme-next.js.org/docs/advanced-settings/custom-files.html

自定义CSS

自定义代码块字体大小

NexT默认的代码块字体大小为1em;。当代码块中的代码比较长时,代码块无法全部显示这样代码,当我们阅读的时候就需要频繁拖动底部的滚动条。为了方便阅读,我们可以把代码块中的字体大小调小到0.875em;
source/_data目录下创建styles.styl文件

1
2
3
4
5
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new/source/_data (master)
$ ls
languages.yml styles.styl

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new/source/_data (master)

然后在里面styles.styl文件中写上你的css代码即可。
例如设置代码块的字体大小:

G:\Blog\gongzuo_new\source\_data\styles.styl
1
2
3
4
// 代码块的字体大小
figure.highlight, pre span{
font-size: 0.875em;
}

部署

部署到github pages

安装插件

在站点根目录中输入如下命令安装插件:

1
npm install hexo-deployer-git --save

安装效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new
$ npm install hexo-deployer-git --save

added 1 package, and audited 263 packages in 3s

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

1 moderate severity vulnerability

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

Run `npm audit` for details.

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

在hexo配置文件中填写github pages的配置

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: git@github.com:你的用户名/仓库名.git
# repo: https://gh_token@github.com/lanlan2017/blog.git
# branch: master #published
branch: gh-pages #部署的分支

部署

在站点根目录下输入如下命令:

1
hexo d

部署成功效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 create mode 100644 page/9/index.html
delete mode 100644 placeholder
create mode 100644 search.xml
create mode 100644 tags/index.html
Enumerating objects: 2485, done.
Counting objects: 100% (2485/2485), done.
Delta compression using up to 4 threads
Compressing objects: 100% (1342/1342), done.
Writing objects: 100% (2485/2485), 5.29 MiB | 1.28 MiB/s, done.
Total 2485 (delta 1147), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1147/1147), done.
remote:
remote: GitHub found 1 vulnerability on lanlan2017/blog's default branch (1 moderate). To find out more, visit:
remote: https://github.com/lanlan2017/blog/security/dependabot/package.json/hexo/open
remote:
To github.com:lanlan2017/blog.git
+ 9c1e805...44e4c22 HEAD -> gh-pages (forced update)
Branch 'master' set up to track remote branch 'gh-pages' from 'git@github.com:lanlan2017/blog.git'.
INFO Deploy done: git

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new

替代旧站点

到这里,旧站点已经可以替代了,可以把旧站点blog/删除掉,然后把blog_new/站点重命名为blog_new即可。

复制旧站点的.git目录到新站点

如果在blog_new上重新执行git init命令,我还得重新配置git。
为了省事,直接冲旧站点blog/中复制.git目录,粘贴到blog_new/目录中。

然后就可以像原来的站点那样使用git了。

创建自定义的dir目录

创建dir页面

1
hexo new page dir

运行效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new (master)
$ hexo new page dir
INFO Validating config
INFO ==================================
███╗ ██╗███████╗██╗ ██╗████████╗
████╗ ██║██╔════╝╚██╗██╔╝╚══██╔══╝
██╔██╗ ██║█████╗ ╚███╔╝ ██║
██║╚██╗██║██╔══╝ ██╔██╗ ██║
██║ ╚████║███████╗██╔╝ ██╗ ██║
╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝ ╚═╝
========================================
NexT version 8.8.2
Documentation: https://theme-next.js.org
========================================
INFO Created: G:\Blog\blog_new\source\dir\index.md

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new (master)

编写dir页面

编写G:\Blog\blog_new\source\dir\index.md文件

在menu中添加dir页面和图标

G:\Blog\blog_new\_config.next.yml
1
2
3
4
5
6
7
8
9
10
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
dir: /dir/ || fa fa-sitemap
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
tags: /tags/ || fa fa-tags
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
# commonweal: /404/ || fa fa-heartbeat

给dir页面提供翻译

https://theme-next.js.org/docs/theme-settings/internationalization.html#Override-Default-Translations

创建文件source/_data/languages.yml

source/目录下创建_data/目录,并在_data/目录中创建languages.yml文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new (master)
$ ls
_config.next.yml db.json HexoD.bat HexoSTest.bat package.json public/ source/ themes/
_config.yml FM.properties HexoS.bat node_modules/ package-lock.json scaffolds/ StartWriting.bat

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new (master)
$ mkdir source/_data

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new (master)
$ ls source/
_data/ _posts/ categories/ dir/ images/ tags/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new (master)
$ cd source/_data/

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new/source/_data (master)
$ touch languages.yml

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new/source/_data (master)
$ ls
languages.yml

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog/blog_new/source/_data (master)

编辑languages.yml

G:\Blog\blog_new\source\_data\languages.yml
1
2
3
4
5
6
7
# language
zh-CN:
menu:
dir: 目录
en:
menu:
dir: directories #directory #

查看效果

输入hexo s,效果如下图:

image-20211221155312596

下载git-for-windows.exe覆盖安装

https://git-scm.com/download

命令安装

查看git版本 git version

1
2
3
4
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog
$ git version
git version 2.32.0.windows.1

更新git版本

git update

1
2
3
4
5
6
7
8
9
10
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog
$ git update
Warning! `git update` has been deprecated;
Please use `git update-git-for-windows` instead.
Git for Windows 2.32.0.windows.1 (64-bit)
Update 2.34.1.windows.1 is available
Download and install Git for Windows 2.34.1 [N/y]? N

18190@DESKTOP-SH3MQPI MINGW64 /g/Blog

git update已经不推荐使用了,应该使用:git update-git-for-windows

git update-git-for-windows

1
2
3
4
5
6
18190@DESKTOP-SH3MQPI MINGW64 /g/Blog
$ git update-git-for-windows
Git for Windows 2.32.0.windows.1 (64-bit)
Update 2.34.1.windows.1 is available
Download and install Git for Windows 2.34.1 [N/y]? y

参考链接

https://segmentfault.com/q/1010000011704285
https://stackoverflow.com/questions/13790592/how-to-upgrade-git-on-windows-to-the-latest-version

PlantUML类图

元素声明

1
2
3
4
5
6
7
8
9
10
11
12
13
@startuml
abstract 抽象
abstract class 抽象(等同abstract)
annotation 注解
circle 圆
() 圆缩写形式
class 类
diamond 菱形
<> 菱形写形式
entity 实例
enum 枚举
interface 接口
@enduml

显示效果:

类之间的关系

类之间的关系是用以下符号定义的。

类型 符号 绘图
扩展 <|-- img
组成 *-- img
聚合 o-- img

可以用.. 来代替-- ,这样就可以有一条虚线 。

知道了这些规则,就可以画出以下图画:

1
2
3
4
5
6
7
@startuml
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
@enduml

显示效果

1
2
3
4
5
6
7
@startuml
Class11 <|.. Class12
Class13 --> Class14
Class15 ..> Class16
Class17 ..|> Class18
Class19 <--* Class20
@enduml

显示效果

1
2
3
4
5
6
7
@startuml
Class21 #-- Class22
Class23 x-- Class24
Class25 }-- Class26
Class27 +-- Class28
Class29 ^-- Class30
@enduml

显示效果:

1
2
3
4
5
6
7
@startuml
Class21 #-- Class22
Class23 x-- Class24
Class25 }-- Class26
Class27 +-- Class28
Class29 ^-- Class30
@enduml

显示效果:

关系上的标签

在关系之间使用标签来说明时, 使用 :后接 标签文字。
对元素的说明,你可以在每一边使用 "" 来说明.

1
2
3
4
5
@startuml
类01 "1" *-- "many" 类02 : 包含
类03 o-- 类04 : 聚合
类05 --> "1" 类06
@enduml

显示效果:

在标签的开始或结束位置添加<>以表明是哪个对象作用到哪个对象上。

1
2
3
4
5
6
@startuml
class 汽车
发动机 - 汽车 : 驱动 >
汽车 *- 轮子 : 拥有 4 >
汽车 -- 人 : < 所属
@enduml

显示效果:

添加方法

要声明字段和方法,你可以使用符号 : 后面跟着字段或方法的名称。

系统会检查括号来选择方法和字段。

1
2
3
4
5
6
@startuml
Object <|-- ArrayList
Object : equals()
ArrayList : Object[] elementData
ArrayList : size()
@enduml

显示效果:

也可以在大括号之间分组 {} 所有字段和方法。
注意,语法对类型/名称的顺序有很大的灵活性。

1
2
3
4
5
6
7
8
9
10
@startuml
class Dummy {
String data
void methods()
}
class Flight {
flightNumber : Integer
departureTime : Date
}
@enduml

显示效果:

你可以使用 和 修改器来覆盖解析器关于字段和方法的默认行为。{field} {method}

1
2
3
4
5
6
@startuml
class Dummy {
{field} A field (despite parentheses)
{method} Some method
}
@enduml

显示效果

定义可访问性

一旦你定义了域或者方法,你可以定义 相应条目的可访问性质。

Character Icon for field Icon for method Visibility
- img img private
# img img protected
~ img img package private
+ img img public
1
2
3
4
5
6
7
8
@startuml
class Dummy {
-field1
#field2
~method1()
+method2()
}
@enduml

显示效果:

你可以采用以下命令停用这些特性 skinparam classAttributeIconSize 0

1
2
3
4
5
6
7
8
9
@startuml
skinparam classAttributeIconSize 0
class Dummy {
-field1
#field2
~method1()
+method2()
}
@enduml

显示效果:

抽象与静态

通过修饰符{static}或者{abstract},可以定义静态或者抽象的方法或者属性。

这些修饰符可以写在行的开始或者结束。也可以使用{classifier}这个修饰符来代替{static}.

1
2
3
4
5
6
@startuml
class Dummy {
{static} String id
{abstract} void methods()
}
@enduml

显示效果:

高级类体

PlantUML默认自动将方法和属性重新分组,你可以自己定义分隔符来重排方法和属性,下面的分隔符都是可用的:-- .. == __.

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
@startuml
class Foo1 {
You can use
several lines
..
as you want
and group
==
things together.
__
You can have as many groups
as you want
--
End of class
}
class User {
.. Simple Getter ..
+ getName()
+ getAddress()
.. Some setter ..
+ setName()
__ private data __
int age
-- encrypted --
String password
}
@enduml

显示效果:

备注和模板

还可以在分隔符中添加标题:
模板通过类关键字(“<<“和”>>“)来定义
你可以使用note left of , note right of , note top of , note bottom of这些关键字来添加备注。
你还可以在类的声明末尾使用note left, note right,note top, note bottom来添加备注。
此外,单独用note这个关键字也是可以的,使用 .. 符号可以作出一条连接它与其它对象的虚线。

1
2
3
4
5
6
7
8
9
10
11
@startuml
class Object << general >>
Object <|--- ArrayList
note top of Object : In java, every class\nextends this one.
note "This is a floating note" as N1
note "This note is connected\nto several objects." as N2
Object .. N2
N2 .. ArrayList
class Foo
note left: On last defined class
@enduml

显示效果:

更多注释

可以在注释中使用部分html标签:

  • <b>
  • <u>
  • <i>
  • <s>, <del>, <strike>
  • <font color="#AAAAAA"> or <font color="colorName">
  • <color:#AAAAAA> or <color:colorName>
  • <size:nn> to change font size
  • <img src="file"> or <img:file>: the file must be accessible by the filesystem

你也可以在注释中展示多行。

你也可以在定义的class之后直接使用 note left, note right, note top, note bottom 来定义注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@startuml
class Foo
note left: On last defined class
note top of Object
In java, <size:18>every</size> <u>class</u>
<b>extends</b>
<i>this</i> one.
end note
note as N1
This note is <u>also</u>
<b><color:royalBlue>on several</color>
<s>words</s> lines
And this is hosted by <img:sourceforge.jpg>
end note
@enduml

显示效果:

注释属性 (field, attribute, member) 或方法

可以在字段(field、attribute、member)或方法上添加注释。 这不能与命名空间分隔符(namespaceSeparator) :: 一起使用

注释属性或方法

1
2
3
4
5
6
7
8
9
10
11
12
@startuml
class A {
{static} int counter
+void {abstract} start(int timeout)
}
note left of A::counter
该成员已注释
end note
note right of A::start
在 UML 注释了此方法
end note
@enduml

显示效果:

给同名方法注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@startuml
class A {
{static} int counter
+void {abstract} start(int timeoutms)
+void {abstract} start(Duration timeout)
}
note left of A::counter
该成员已注释
end note
note right of A::"start(int timeoutms)"
这个start方法的参数是int类型
end note
note right of A::"start(Duration timeout)"
这个start方法的参数是Duration类型
end note
@enduml

显示效果

链接的注释

在定义链接之后,你可以用 note on link 给链接添加注释

如果想要改变注释相对于标签的位置,你也可以用 note left on linknote right on linknote bottom on link。(对应位置分别在label的左边,右边,下边)

1
2
3
4
5
6
7
8
9
10
@startuml
class Dummy
Dummy --> Foo : A link
note on link #red: note that is red
Dummy --> Foo2 : Another link
note right on link #blue
this is my note on right link
and in blue
end note
@enduml

显示效果:

抽象类和接口

用关键字abstractabstract class来定义抽象类。
抽象类用斜体显示。
也可以使用interface, annotationenum 等关键字。

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
@startuml

abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection

List <|-- AbstractList
Collection <|-- AbstractCollection

Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList

class ArrayList {
Object[] elementData
size()
}

enum TimeUnit {
DAYS
HOURS
MINUTES
}

annotation SuppressWarnings

@enduml

显示效果:

使用非字母字符

如果你想在类(或者枚举)的显示中使用非字母符号,你可以:

  • 在类的定义中使用 as 关键字
  • 在类名旁边加上 ""
1
2
3
4
5
6
@startuml
class "This is my class" as class1
class class2 as "It works this way too"

class2 *-- "foo/dummy" : use
@enduml

显示效果

隐藏属性、函数等

通过使用命令“hide/show”,你可以用参数表示类的显示方式。
基础命令是: hide empty members. 这个命令会隐藏空白的方法和属性。
empty members 外,你可以用:

  • empty fields 或者 empty attributes 空属性,
  • empty methods 空函数,
  • fieldsattributes 隐藏字段或属性,即使是被定义了
  • methods 隐藏方法,即使是被定义了
  • members 隐藏字段 和 方法,即使是被定义了
  • circle 类名前带圈的,
  • stereotype 原型。

同样可以使用 hideshow 关键词,对以下内容进行设置:

  • class 所有类,
  • interface 所有接口,
  • enum 所有枚举,
  • <<foo1>> 实现 foo1 的类,
  • 一个既定的类名。

你可以使用 show/hide 命令来定义相关规则和例外。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@startuml

class Dummy1 {
+myMethods()
}

class Dummy2 {
+hiddenMethod()
}

class Dummy3 <<Serializable>> {
String name
}

hide members
hide <<Serializable>> circle
show Dummy1 methods
show <<Serializable>> fields

@enduml

显示效果:

隐藏类

你也可以使用 show/hide 命令来隐藏类
如果你定义了一个大的!included 文件,且想在文件包含之后隐藏部分类,该功能会很有帮助。

1
2
3
4
5
6
@startuml
class Foo1
class Foo2
Foo2 *-- Foo1
hide Foo2
@enduml

显示效果:

删除类

您还可以使用remove命令来删除类。

如果您定义了一个大的 [!included file](预处理), 并且如果您想在 [file contains](预处理)之后删除一些类,这可能很有用。

1
2
3
4
5
6
7
8
9
10
@startuml

class Foo1
class Foo2

Foo2 *-- Foo1

remove Foo2

@enduml

显示效果:

隐藏或删除未关联的类

默认情况下, 所有的类都将会展示:

1
2
3
4
5
6
@startuml
class C1
class C2
class C3
C1 -- C2
@enduml

显示效果:

不过你可以使用:

  • hide @unlinked 来隐藏未关联的类:
1
2
3
4
5
6
7
8
@startuml
class C1
class C2
class C3
C1 -- C2

hide @unlinked
@enduml

显示效果

  • 或者使用 remove @unlinked 来删除未关联的类:
1
2
3
4
5
6
7
8
@startuml
class C1
class C2
class C3
C1 -- C2

remove @unlinked
@enduml

显示效果

泛型(generics)

你可以用 <> 来定义类的泛型。

1
2
3
4
5
6
7
8
@startuml

class Foo<? extends Element> {
int size()
}
Foo *- Element

@enduml

显示效果:

It is possible to disable this drawing using skinparam genericDisplay old command.

1
2
3
4
5
6
7
@startuml
skinparam genericDisplay old
class Foo<? extends Element> {
int size()
}
Foo *- Element
@enduml

显示效果:

指定标记(Spot)

通常标记字符 (C, I, E or A) 用于标记 类(classes), 接口(interface), 枚举(enum)和 抽象类(abstract classes).
但是当你想定义原型时,可以增加对应的单个字符及颜色,来定义自己的标记(spot),就像下面一样:

1
2
3
4
5
@startuml

class System << (S,#FF7700) Singleton >>
class Date << (D,orchid) >>
@enduml

显示效果:

你可以通过关键词 package 声明包,同时可选的来声明对应的背景色(通过使用html色彩代码或名称)。
注意:包可以被定义为嵌套。

1
2
3
4
5
6
7
8
9
@startuml
package "Classic Collections" #DDDDDD {
Object <|-- ArrayList
}
package net.sourceforge.plantuml {
Object <|-- Demo1
Demo1 *- Demo2
}
@enduml

显示效果:

1
2
3
4
5
6
7
8
9
@startuml
package "Classic Collections" #DDDDDD {
Object <|-- ArrayList
}
package net.sourceforge.plantuml {
Object <|-- Demo1
Demo1 *- Demo2
}
@enduml

包样式

包可以定义不同的样式。
你可以通过以下的命令来设置默认样式 : skinparam packageStyle,或者对包使用对应的模板:

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
@startuml
scale 750 width
package foo1 <<Node>> {
class Class1
}

package foo2 <<Rectangle>> {
class Class2
}

package foo3 <<Folder>> {
class Class3
}

package foo4 <<Frame>> {
class Class4
}

package foo5 <<Cloud>> {
class Class5
}

package foo6 <<Database>> {
class Class6
}

@enduml

显示效果:

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
@startuml
scale 750 width
package foo1 <<Node>> {
class Class1
}

package foo2 <<Rectangle>> {
class Class2
}

package foo3 <<Folder>> {
class Class3
}

package foo4 <<Frame>> {
class Class4
}

package foo5 <<Cloud>> {
class Class5
}

package foo6 <<Database>> {
class Class6
}

@enduml

你也可以参考下面的示例来定义包之间的连线:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@startuml

skinparam packageStyle rectangle

package foo1.foo2 {
}

package foo1.foo2.foo3 {
class Object
}

foo1.foo2 +-- foo1.foo2.foo3

@enduml

显示效果

命名空间(Namespaces)

在使用包(package)时(区别于命名空间),类名是类的唯一标识。 也就意味着,在不同的包(package)中的类,不能使用相同的类名。
在那种情况下(译注:同名、不同全限定名类),你应该使用命名空间来取而代之。
你可以从其他命名空间,使用全限定名来引用类, 默认命名空间(译注:无名的命名空间)下的类,以一个“.”开头(的类名)来引用(译注:示例中的BaseClass).

注意:你不用显示地创建命名空间:一个使用全限定名的类会自动被放置到对应的命名空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@startuml

class BaseClass

namespace net.dummy #DDDDDD {
.BaseClass <|-- Person
Meeting o-- Person

.BaseClass <|- Meeting
}

namespace net.foo {
net.dummy.Person <|- Person
.BaseClass <|-- Person

net.dummy.Meeting o-- Person
}

BaseClass <|-- net.unused.Person

@enduml

显示效果:

自动创建命名空间

使用命令 set namespaceSeparator ??? 你可以自定义命名空间分隔符(为 “.” 以外的字符).

1
2
3
4
5
6
7
@startuml

set namespaceSeparator ::
class X1::X2::foo {
some info
}
@enduml

显示效果:

禁止自动创建包则可以使用 set namespaceSeparator none.

1
2
3
4
5
6
7
8
@startuml

set namespaceSeparator none
class X1.X2.foo {
some info
}

@enduml

显示效果:

棒棒糖接口

需要定义棒棒糖样式的接口时可以遵循以下语法:

  • bar ()- foo
  • bar ()-- foo
  • foo -() bar
1
2
3
4
@startuml
class foo类
bar ()- foo类
@enduml

显示效果:

改变箭头方向

类之间默认采用两个破折号 -- 显示出垂直 方向的线. 要得到水平方向的可以像这样使用单破折号 (或者点):

1
2
3
4
@startuml
教室 o- 学生
教室 *-- 椅子
@enduml

显示效果:

你也可以通过改变倒置链接来改变方向

1
2
3
4
@startuml
学生 -o 教室
椅子 --* 教室
@enduml

显示效果:

也可通过在箭头内部使用关键字, 例如left, right, up 或者 down,来改变方向

1
2
3
4
5
6
@startuml
foo -left-> dummyLeft
foo -right-> dummyRight
foo -up-> dummyUp
foo -down-> dummyDown
@enduml

显示效果:

您可以使用缩写形式来表示方向,第一个字符(例如,-d- 而不是 -down-) 或前两个字符 (-do-)。
请注意,您不应滥用此功能:Graphviz 通常无需调整即可提供良好的结果。

同时也支持 left to right direction 参数:

1
2
3
4
5
6
7
@startuml
left to right direction
foo -left-> dummyLeft
foo -right-> dummyRight
foo -up-> dummyUp
foo -down-> dummyDown
@enduml

显示效果:

“关系”类

你可以在定义了两个类之间的关系后定义一个 关系类 association class 例如:

1
2
3
4
5
6
7
8
9
10
11
12
@startuml
class Student {
Name
}
Student "0..*" - "1..*" Course
(Student, Course) .. Enrollment

class Enrollment {
drop()
cancel()
}
@enduml

显示效果:

也可以用另一种方式:

1
2
3
4
5
6
7
8
9
10
11
12
@startuml
class Student {
Name
}
Student "0..*" -- "1..*" Course
(Student, Course) . Enrollment

class Enrollment {
drop()
cancel()
}
@enduml

显示效果:

同级关联(Association on same classe)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@startuml
class 站台 {
+名称: 字符串
}

class 通道 {
+花费: 剩余时间
}

<> 结点

通道 . 结点
结点 - "从 0..*" 站台
结点 - "到 0..* " 站台
@enduml

显示效果:

样式参数

skinparam改变字体和颜色。
可以在如下场景中使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@startuml

skinparam class {
BackgroundColor PaleGreen
ArrowColor SeaGreen
BorderColor SpringGreen
}
skinparam stereotypeCBackgroundColor YellowGreen

类01 "1" *-- "many" 类02 : 包含

类03 o-- 类04 : 聚合

@enduml

显示效果:

模型样式

你可以给模型自定义颜色和字体(You can define specific color and fonts for stereotyped classes.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@startuml
skinparam class {
BackgroundColor PaleGreen
ArrowColor SeaGreen
BorderColor SpringGreen
BackgroundColor<<Foo>> Wheat
BorderColor<<Foo>> Tomato
}
skinparam stereotypeCBackgroundColor YellowGreen
skinparam stereotypeCBackgroundColor<< Foo >> DimGray

类1 <<Foo>>
类3 <<Foo>>
类1 "1" *-- "*" 类2 : 包含(contains)

类3 o-- 类4 : 聚合(aggregation)

@enduml

显示效果:

渐变颜色

你可以使用 # 号为类、注释等等自定义颜色。

在自定义颜色中你可以使用标准颜色的名称 或 RGB 编码,参见: Colors.

你同样可以使用下面的语法为背景色声明为渐变的颜色:

渐变的两个颜色可以使用下面的符号分割:

  • |,
  • /,
  • \,
  • -,

他们的区别在于颜色渐变的方向不同。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@startuml

skinparam backgroundcolor AntiqueWhite/Gold
skinparam classBackgroundColor Wheat|CornflowerBlue

class 类1 #red-green
note left of 类1 #blue\9932CC
这是foo类的
渐变颜色
end note

package 包1 #GreenYellow/LightGoldenRodYellow {
class 类2
}

@enduml

显示效果:

辅助布局

有时候,默认布局并不完美…
你可以使用 together 关键词将某些类进行分组: 布局引擎会尝试将它们捆绑在一起(如同在一个包(package)内)
你也可以使用建立 hidden 链接的方式来强制布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@startuml

class Bar1
class Bar2
together {
class Together1
class Together2
class Together3
}
Together1 - Together2
Together2 - Together3
Together2 -[hidden]--> Bar1
Bar1 -[hidden]> Bar2

@enduml

显示效果:

拆分大文件

有些情况下,会有一些很大的图片文件。
可以用 page (hpages)x(vpages) 这个命令把生成的图片文件拆分成若干个文件。
hpages 用来表示水平方向页面数, and vpages 用来表示垂直方面页面数。
你也可以使用特定的皮肤设定来给分页添加边框(见例子)

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
@startuml
' Split into 4 pages
page 2x2
skinparam pageMargin 10
skinparam pageExternalColor gray
skinparam pageBorderColor black

class BaseClass

namespace net.dummy #DDDDDD {
.BaseClass <|-- Person
Meeting o-- Person

.BaseClass <|- Meeting

}

namespace net.foo {
net.dummy.Person <|- Person
.BaseClass <|-- Person

net.dummy.Meeting o-- Person
}

BaseClass <|-- net.unused.Person
@enduml

显示效果:

扩展(Extends) 和 实现(implements)

他们同样使用 extendsimplements 关键词.

1
2
3
4
@startuml
class ArrayList implements List
class ArrayList extends AbstractList
@enduml

显示效果:

方括号表示关系(连接或箭头)的样式

线样式

可以明确的使用 bold, dashed, dotted, hiddenplain 来表示关系, 连接或箭头:

  • 没有标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@startuml
title 使用方括号([])表示的线样式(无标签版)

class foo类
class bar类
bar类1 : [bold]
bar类2 : [dashed]
bar类3 : [dotted]
bar类4 : [hidden]
bar类5 : [plain]

foo类 --> bar类
foo类 -[bold]-> bar类1
foo类 -[dashed]-> bar类2
foo类 -[dotted]-> bar类3
foo类 -[hidden]-> bar类4
foo类 -[plain]-> bar类5
@enduml

显示效果:

  • 有标签
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    @startuml
    title 使用方括号([])表示的线样式(有标签版)

    class foo类
    class bar类
    bar类1 : [bold]
    bar类2 : [dashed]
    bar类3 : [dotted]
    bar类4 : [hidden]
    bar类5 : [plain]

    foo类 --> bar类 : ∅
    foo类 -[bold]-> bar类1 : [bold]
    foo类 -[dashed]-> bar类2 : [dashed]
    foo类 -[dotted]-> bar类3 : [dotted]
    foo类 -[hidden]-> bar类4 : [hidden]
    foo类 -[plain]-> bar类5 : [plain]
    @enduml

显示效果:

线颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@startuml
title 使用方括号([])表示的线颜色
class foo类
class bar类
bar类1 : [#red]
bar类2 : [#green]
bar类3 : [#blue]

foo类 --> bar类
foo类 -[#red]-> bar类1 : [#red]
foo类 -[#green]-> bar类2 : [#green]
foo类 -[#blue]-> bar类3 : [#blue]
'foo类 -[#blue;#yellow;#green]-> bar类4
@enduml

显示效果:

线宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@startuml
title 使用方括号([])表示的线宽度
class foo类
class bar类
bar类1 : [thickness=1]
bar类2 : [thickness=2]
bar类3 : [thickness=4]
bar类4 : [thickness=8]
bar类5 : [thickness=16]

foo类 --> bar类 : ∅
foo类 -[thickness=1]-> bar类1 : [1]
foo类 -[thickness=2]-> bar类2 : [2]
foo类 -[thickness=4]-> bar类3 : [4]
foo类 -[thickness=8]-> bar类4 : [8]
foo类 -[thickness=16]-> bar类5 : [16]

@enduml

显示效果:

混合样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@startuml
title 使用方括号([])表示的线混合样式
class foo类
class bar类
bar类1 : [#red,thickness=1]
bar类2 : [#red,dashed,thickness=2]
bar类3 : [#green,dashed,thickness=4]
bar类4 : [#blue,dotted,thickness=8]
bar类5 : [#blue,plain,thickness=16]

foo类 --> bar类 : ∅
foo类 -[#red,thickness=1]-> bar类1 : [#red,1]
foo类 -[#red,dashed,thickness=2]-> bar类2 : [#red,dashed,2]
foo类 -[#green,dashed,thickness=4]-> bar类3 : [#green,dashed,4]
foo类 -[#blue,dotted,thickness=8]-> bar类4 : [blue,dotted,8]
foo类 -[#blue,plain,thickness=16]-> bar类5 : [blue,plain,16]
@enduml

显示效果:

改变关系(线和箭头)的颜色和样式(单行样式)

你可以改变表示关系的线和箭头的颜色或样式,使用下面的单行样式格式:

  • #color;line.[bold|dashed|dotted];text:color
1
2
3
4
5
6
7
@startuml
class foo类
foo类 --> bar类 : 默认
foo类 --> bar类1 #line:red;line.bold;text:red : 红色粗线
foo类 --> bar类2 #green;line.dashed;text:green : 绿色断线
foo类 --> bar类3 #blue;line.dotted;text:blue : 蓝色点线
@enduml

显示效果:

改变类颜色和样式 (单行样式)

你可以改变定义类的 颜色 或样式, 通过下面两种指定格式:

  • #color ##[style]color
    • 第一个颜色(#color)表示背景色,然后第二个表示线的样式和颜色(##[style]color)
      1
      2
      3
      4
      5
      6
      @startuml
      abstract 抽象类
      annotation 注解 #pink ##[bold]red
      class 类 #palegreen ##[dashed]green
      interface 接口 #aliceblue ##[dotted]blue
      @enduml

显示效果:

  • #[color|back:color];header:color;line:color;line.[bold|dashed|dotted];text:color
    1
    2
    3
    4
    5
    6
    @startuml
    abstract 抽象类
    annotation 注解 #pink;line:red;line.bold;text:red
    class 类 #palegreen;line:green;line.dashed;text:green
    interface 接口 #aliceblue;line:blue;line.dotted;text:blue
    @enduml

显示效果:

第一个原始示例:

1
2
3
4
5
6
7
8
9
10
@startuml
class bar类 #line:green;back:lightblue
class bar类2 #lightblue;line:green

class Foo类1 #back:red;line:00FFFF
class Foo类Dashed #line.dashed:blue
class Foo类Dotted #line.dotted:blue
class Foo类Bold #line.bold
class Demo类1 #back:lightgreen|yellow;header:blue/red
@enduml

显示效果:

类成员的箭头方向(Arrows from/to class members)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@startuml
class Foo类 {
+ 字段1
+ 字段2
}

class Bar类 {
+ 字段3
+ 字段4
}

Foo类::字段1 --> Bar类::字段3 : foo
Foo类::字段2 --> Bar类::字段4 : bar
@enduml

显示效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@startuml
left to right direction

class User类 {
id : INTEGER
..
其他id : INTEGER
}

class Email类 {
id : INTEGER
..
用户_id : INTEGER
地址 : STRING
}

User类::id *-- Email类::用户_id
@enduml

显示效果:

分组继承关系(Grouping inheritance arrow heads)

你可以合并所有的箭头,使用 skinparam groupInheritance, 用阈值(第几组)作为参数。

阈值 1 (没有分组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@startuml
skinparam groupInheritance 1

A1 <|-- B1

A2 <|-- B2
A2 <|-- C2

A3 <|-- B3
A3 <|-- C3
A3 <|-- D3

A4 <|-- B4
A4 <|-- C4
A4 <|-- D4
A4 <|-- E4
@enduml

显示效果

阈值 2 (从第2组开始分组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@startuml
skinparam groupInheritance 2

A1 <|-- B1

A2 <|-- B2
A2 <|-- C2

A3 <|-- B3
A3 <|-- C3
A3 <|-- D3

A4 <|-- B4
A4 <|-- C4
A4 <|-- D4
A4 <|-- E4
@enduml

显示效果:

阈值 3 (从第3组开始分组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@startuml
skinparam groupInheritance 3
A1 <|-- B1

A2 <|-- B2
A2 <|-- C2

A3 <|-- B3
A3 <|-- C3
A3 <|-- D3

A4 <|-- B4
A4 <|-- C4
A4 <|-- D4
A4 <|-- E4
@enduml

显示效果: