博客搭建-目录调整
# 一、前言
Vdoing主题新版本，作者已经把配置文件由config.js修改为config.ts了，而且所有内容都在一个文件，这里方便后面修改维护，我把内容按照模块拆分。
笔记
当然，这里你也可以不进行拆分操作，看个人习惯，我比较喜欢归类，方便后续管理。😅
# 二、目录文件创建
# 2.1 导航菜单迁移
在docs/.vuepress/nav/ 目录下创建index.ts,把config.ts中导航部分分离出来。
注意
如果没有nav目录请自行创建
index.ts 文件内容:
点击查看
// 首页导航菜单
export default [
{ text: '首页', link: '/' },
{
text: '运维',
link: '/ops/', //目录页链接，此处link是vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
items: [
// 说明：以下所有link的值只是在相应md文件头部定义的永久链接（不是什么特殊编码）。另外，注意结尾是有斜杠的
{
items: [
{ text: 'Prometheus', link: '/pages/8143cc480faf9a11/' },
{ text: 'Kubertenes', link: '/pages/09fc5c/' },
{ text: 'Docker', link: '/pages/98d096/' },
],
},
],
},
{
text: '编程',
link: '/devops/',
items: [
{ text: 'Go', link: '/pages/8309a5b876fc95e3/' },
{ text: 'Python', link: '/pages/0a83b083bdf257cb/' },
{ text: 'Vue', link: '/pages/0a83b083bdf257c1/' },
],
},
{
text: '技术专题',
link: '/technology/',
items: [
{ text: 'Jenkins', link: '/pages/9a7ee40fc232253e/' },
{ text: 'ELK', link: '/pages/4c778760be26d8b3/' },
{ text: 'LDAP', link: '/pages/41f87d890d0a02af/' },
],
},
{
text: '更多',
link: '/more/',
items: [
{ text: '学习', link: '/pages/f2a556/' },
{ text: '面试', link: '/pages/aea6571b7a8bae86/' },
{ text: '最佳实践', link: '/pages/2d615df9a36a98ed/' },
{ text: '博客搭建', link: '/pages/website/' },
],
},
{ text: '关于', link: '/about/' },
{
text: '友链',link: '/friends/',
},
{
text: '索引',
link: '/archives/',
items: [
{ text: '分类', link: '/categories/' },
{ text: '标签', link: '/tags/' },
{ text: '归档', link: '/archives/' },
],
},
]
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
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
返回config.ts配置
- 导入nav组件
- 配置nav
import nav from './nav/index.ts'
....
// 主题配置
themeConfig: {
// 导航配置
nav,
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 2.2 插件目录拆分
在docs/.vuepress/plugins 创建plugins.ts文件,复制插件相关内容至该文件中。
plugins.ts 文件内容:
点击查看
// 博客插件相关
import { UserPlugins } from 'vuepress/config'
import baiduCode from './baiduCode' // 百度统计hm码
import dayjs from 'dayjs'
const DOMAIN_NAME = 'wiki.tbchip.com' // 域名 (不带https)
// 网站feed 相关
const feed_options = {
canonical_base: 'http://wiki.tbchip.com',
count: 5000,
};
export default <UserPlugins> [
// [
// "sitemap", // 网站地图
// {
// hostname: WEB_SITE,
// },
// ],
// 顶部阅读进度条插件
[ 'reading-progress' ],
// 网站rss插件
[ 'feed', feed_options ],
// 鼠标点击星星插件
'cursor-effects',
'vuepress-plugin-baidu-autopush', // 百度自动推送
[
'vuepress-plugin-baidu-tongji', // 百度统计
{
hm: baiduCode,
},
],
// 全文搜索。 ⚠️注意：此插件会在打开网站时多加载部分js文件用于搜索，导致初次访问网站变慢。如在意初次访问速度的话可以不使用此插件！（推荐：vuepress-plugin-thirdparty-search）
// 'fulltext-search',
// 可以添加第三方搜索链接的搜索框（继承原官方搜索框的配置参数）
[
'thirdparty-search',
{
thirdparty: [
{
title: '在MDN中搜索',
frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
behindUrl: '', // 搜索链接的后面部分，可选，默认 ''
},
{
title: '在Runoob中搜索',
frontUrl: 'https://www.runoob.com/?s=',
},
{
title: '在Vue API中搜索',
frontUrl: 'https://cn.vuejs.org/v2/api/#',
},
{
title: '在Bing中搜索',
frontUrl: 'https://cn.bing.com/search?q=',
},
{
title: '通过百度搜索本站的',
frontUrl: `https://www.baidu.com/s?wd=site%3A${DOMAIN_NAME}%20`,
},
],
}
],
[
'one-click-copy', // 代码块复制按钮
{
copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
duration: 1000, // prompt message display time.
showInMobile: false, // whether to display on the mobile side, default: false.
},
],
[
'vuepress-plugin-zooming', // 放大图片
{
selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
options: {
bgColor: 'rgba(0,0,0,0.6)',
},
},
],
// 评论artalk 插件
[
'vuepress-plugin-vdoing-comment',
{
choosen: 'artalk',
options: {
server: 'http://comment.tbchip.com', // （必填）
site: '小哥之哥', // （必填）
// disableEmotion: false, // 是否禁用表情（可选）
// disablePicture: true, // 是否禁用图片（可选）
// disablePreview: false // 是否禁用预览（可选）
},
},
],
// 自定义组件插件
[
{
name: 'custom-plugins',
globalUIComponents: ["IndexBigImg"], // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles
}
],
[
'@vuepress/last-updated', // "上次更新"时间格式
{
transformer: (timestamp, lang) => {
return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
},
},
],
// 代码块儿演示
[
'demo-block',
{
settings: {
jsfiddle: false, // 是否显示 jsfiddle 链接
codepen: true, // 是否显示 codepen 链接
horizontal: false, // 是否展示为横向样式
},
},
],
]
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
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
回到config.ts
import plugins from "./config/plugins.ts";
// 插件配置
plugins,
1
2
3
4
2
3
4
# 2.5 主题文件分离
在docs/.vuepress/config目录下创建themeConfig.ts文件，把config.ts中主题相关复制到该文件中。
themeConfig.ts 文件内容:
点击查看
import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
import nav from '../nav/index.ts'
export default <VdoingThemeConfig> {
// 导航菜单配置
nav,
sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
logo: '/img/logo.png', // 导航栏logo
repo: 'tchuaxiaohua/vuepress-blog', // 导航栏右侧生成Github链接
searchMaxSuggestions: 10, // 搜索结果显示最大数
lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字 string | boolean (取值为git提交时间)
docsDir: 'docs', // 编辑的文件夹
// docsBranch: 'master', // 编辑的文件所在分支，默认master。 注意：如果你的分支是main则修改为main
editLinks: true, // 启用编辑
editLinkText: '编辑',
//*** 以下是Vdoing主题相关配置，文档：https://doc.xugaoyi.com/pages/a20ce8/ ***//
// category: false, // 是否打开分类功能，默认true
// tag: false, // 是否打开标签功能，默认true
// archive: false, // 是否打开归档功能，默认true
// categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
// pageStyle: 'line', // 页面风格，可选值：'card'卡片 | 'line' 线（未设置bodyBgImg时才生效）， 默认'card'。 说明：card时背景显示灰色衬托出卡片样式，line时背景显示纯色，并且部分模块带线条边框
// bodyBgImg: [
// 'https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
// 'https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
// 'https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
// ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时隔bodyBgImgInterval切换一张。
// bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~1.0, 默认0.5
// bodyBgImgInterval: 15, // body多张背景图时的切换间隔, 默认15，单位s
// titleBadge: false, // 文章标题前的图标是否显示，默认true
// titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
// '图标地址1',
// '图标地址2'
// ],
// contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 方格 | 2 横线 | 3 竖线 | 4 左斜线 | 5 右斜线 | 6 点状
// updateBar: { // 最近更新栏
// showToArticle: true, // 显示到文章页底部，默认true
// moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
// },
// rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示)
// sidebarOpen: false, // 初始状态是否打开左侧边栏，默认true
// pageButton: false, // 是否显示快捷翻页按钮，默认true
// 默认外观模式（用户未在页面手动修改过模式时才生效，否则以用户设置的模式为准），可选：'auto' | 'light' | 'dark' | 'read'，默认'auto'。
// defaultMode: 'auto',
// 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义> 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
sidebar: 'structuring',
// 文章默认的作者信息，(可在md文件中单独配置此信息) string | {name: string, link?: string}
author: {
name: 'tchua', // 必需
link: 'https://github.com/tchuaxiaohua', // 可选的
},
// 博主信息 (显示在首页侧边栏)
blogger: {
avatar: 'https://ldbbs.ldmnq.com/bbs/topic/attachment/2023-2/1aebdb3f-7c51-4ab9-ba55-3c3ff9bec8cc.gif',
name: '小花',
slogan: '运维扫地僧',
},
indexImg: {
navColor: 2, // 导航栏左侧名字、中间搜索框、右侧字体的颜色，1 是黑色，2 是白色。默认是 1
switchNavColor: true, // 页面移出大图片的位置后，navColor 是否变换，如由白色变黑色，黑色变白色。默认是 false
// 因为本主题的默认背景色偏向白色，如果 navColor 是 2，建议需要开启(true)，否则白背景 + 白字体 = 看不见
bgTimeColor: true, // 是否开启图片的背景色随一天的不同时间而变化，并且开启时间窗口提示，默认是 false。时间分为四种：白天（原图）、黄昏（偏黄）、晚上（偏黑）、深夜（偏深黑）
bgTimeColorArray: ['transparent', 'rgba(255, 148, 48, .2)', 'rgba(0, 0, 0, .3)', 'rgba(0, 0, 0, .5)'], // 第一个是白天的颜色（默认原图），第二个是黄昏的颜色，第三个是晚上的颜色，第四个是深夜的颜色。bgTimeColor 为 true 生效。提示：如果不想要这个效果，但是又想要时间窗口提示效果，则改为 ['transparent', 'transparent', 'transparent', 'transparent']
descFade: true, // 是否开启图片中间描述的淡入效果，默认为 false
desc: ["Web前端技术博客，积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu", "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt", "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw"], // 多个描述，如果填写则覆盖 config.js 的 description，不填写默认读取 config.js 的 description，descFade 为 true 生效
descFontSize: '1.4rem', // desc 的字体大小，默认 1.4rem。提示：原主题是 1.1rem
descFadeInTime: 200, // 描述的淡入效果持续时间，descFade 为 true 生效，默认 200 毫秒
descFadeOutTime: 100, // 描述的淡出效果持续时间，descFade 为 true 生效，默认 100 毫秒
descNextTime: 800, // 当存在多个 desc 时，一个 desc 展示完后或准备开始时，多少秒后出现下一个 desc，默认 800 毫秒
bubble: true, // 是否开启图片的气泡效果，默认为 false
bubblePosition: 0, // 气泡效果的位置，范围：0-100，不同数值代表不同的起始位置，0是整个图片，50是半张图（一半的下方）。bubble 为 true 生效。默认是 0
bubbleNum: 200, // 气泡的个数，bubble 为 true 生效，默认 200 个
},
// 社交图标 (显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social)
social: {
// iconfontCssFile: '//at.alicdn.com/t/xxx.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自己添加。阿里图片库：https://www.iconfont.cn/
icons: [
{
iconClass: 'icon-youjian',
title: '发邮件',
link: 'mailto:tchuaxiaohua@163.com',
},
{
iconClass: 'icon-github',
title: 'GitHub',
link: 'https://github.com/tchuaxiaohua',
},
{
iconClass: 'icon-rss',
title: '订阅',
link: 'http://wiki.tbchip.com/rss.xml',
},
],
},
// 页脚信息
footer: {
createYear: 2023, // 博客创建年份
copyrightInfo:
'|<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">豫ICP备2021026650号</a>', // 博客版权信息、备案信息等，支持a标签或换行标签</br>
},
// 扩展自动生成frontmatter。（当md文件的frontmatter不存在相应的字段时将自动添加。不会覆盖已有的数据。）
extendFrontmatter: {
author: {
name: 'tchua',
link: 'https://github.com/tchuaxiaohua'
}
},
}
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
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
回到config.ts文件:
import themeConfig from "./config/themeConfig"
const DOMAIN_NAME = 'wiki.tbchip.com' // 域名 (不带https)
export default defineConfig4CustomTheme({
theme: 'vdoing', // 使用npm主题包
// 主题配置
themeConfig,
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 三、完成目录结构
# 3.1 目录结构
经过上面文件调整后，目前docs/.vuepress目录结构如下
├── components // 自定义组件
│ └── IndexBigImg.vue
├── config // 主题网站配置相关
│ ├── baiduCode.ts
│ ├── htmlModules.ts
│ ├── plugins.ts // 新增 插件配置
│ ├── sidebar.js
│ └── themeConfig.ts // 新增 主题配置
├── config.ts
├── enhanceApp.js
├── nav // 新增 导航菜单配置
│ └── index.ts
├── plugins
│ └── love-me
│ ├── index.js
│ └── love-me.js
├── public
│ ├── CNAME
│ └── img
│ ├── Apifox-860x320.png
│ ├── back.jpeg
│ ├── bg01-1920.jpg
│ ├── bg-1920.jpg
│ ├── bg.jpeg
│ ├── bg.jpg
│ ├── favicon.ico
│ ├── git.png
│ ├── hacker-g9b56167fb_1280.png
│ ├── logo.png
│ ├── more.png
│ ├── ops-1920.jpg
│ ├── other.png
│ ├── panda-waving.png
│ ├── programming-1280.png
│ ├── python.png
│ ├── ui.png
│ └── web.png
└── styles
├── index.styl
└── palette.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
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
# 3.2 调整后配置文件完整内容
这里只列出常用及上面修改的文件
docs/.vuepress/config.ts文件
点击查看
/**
* 提示：如您想使用JS版本的配置文件可参考：https://github.com/xugaoyi/vuepress-theme-vdoing/tree/a2f03e993dd2f2a3afdc57cf72adfc6f1b6b0c32/docs/.vuepress
*/
import { resolve } from 'path'
import { defineConfig4CustomTheme } from 'vuepress/config'
import themeConfig from "./config/themeConfig"
import nav from './nav/index.ts'
import plugins from "./config/plugins.ts";
import htmlModules from './config/htmlModules' // 自定义插入的html块
const DOMAIN_NAME = 'wiki.tbchip.com' // 域名 (不带https)
export default defineConfig4CustomTheme({
theme: 'vdoing', // 使用npm主题包
// 基础配置
locales: {
'/': {
lang: 'zh-CN',
title: "小哥之哥", // 文章log标题
description: '运维技术博客,专注于运维相关记录。Kubertenes、Docker、Prometheus、Devops、云原生等技术文章。',
}
},
// 注入到页面<head>中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
head: [
['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹
[
'meta',
{
name: 'keywords',
content: '运维博客,个人技术博客,云原生,运维开发,技术文档,学习,面试,Kubertenes,Docker,Linux,ddevops,vue,python,go',
},
],
['meta', { name: 'baidu-site-verification', content: '7F55weZDDc' }], // 百度统计的站长验证（你可以去掉）
['meta', { name: 'theme-color', content: '#11a8cd' }], // 移动浏览器主题颜色
],
markdown: {
lineNumbers: true,
extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6'], // 提取标题到侧边栏的级别，默认['h2', 'h3']
},
// 监听文件变化并重新构建
extraWatchFiles: [
'.vuepress/config.ts',
'.vuepress/config/htmlModules.ts',
],
// 主题
themeConfig,
// 插件
plugins,
})
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
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
docs/.vuepress/config/plugins.ts文件
点击查看
import { UserPlugins } from 'vuepress/config'
import baiduCode from './baiduCode' // 百度统计hm码
import dayjs from 'dayjs'
const DOMAIN_NAME = 'wiki.tbchip.com' // 域名 (不带https)
const feed_options = {
canonical_base: 'http://wiki.tbchip.com',
count: 5000,
};
export default <UserPlugins> [
// [
// "sitemap", // 网站地图
// {
// hostname: WEB_SITE,
// },
// ],
[
'reading-progress'
],
[ 'feed', feed_options ],
'cursor-effects',
'vuepress-plugin-baidu-autopush', // 百度自动推送
[
'vuepress-plugin-baidu-tongji', // 百度统计
{
hm: baiduCode,
},
],
// 全文搜索。 ⚠️注意：此插件会在打开网站时多加载部分js文件用于搜索，导致初次访问网站变慢。如在意初次访问速度的话可以不使用此插件！（推荐：vuepress-plugin-thirdparty-search）
// 'fulltext-search',
// 可以添加第三方搜索链接的搜索框（继承原官方搜索框的配置参数）
[
'thirdparty-search',
{
thirdparty: [
{
title: '在MDN中搜索',
frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
behindUrl: '', // 搜索链接的后面部分，可选，默认 ''
},
{
title: '在Runoob中搜索',
frontUrl: 'https://www.runoob.com/?s=',
},
{
title: '在Vue API中搜索',
frontUrl: 'https://cn.vuejs.org/v2/api/#',
},
{
title: '在Bing中搜索',
frontUrl: 'https://cn.bing.com/search?q=',
},
{
title: '通过百度搜索本站的',
frontUrl: `https://www.baidu.com/s?wd=site%3A${DOMAIN_NAME}%20`,
},
],
}
],
[
'one-click-copy', // 代码块复制按钮
{
copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
duration: 1000, // prompt message display time.
showInMobile: false, // whether to display on the mobile side, default: false.
},
],
[
'vuepress-plugin-zooming', // 放大图片
{
selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
options: {
bgColor: 'rgba(0,0,0,0.6)',
},
},
],
[
'vuepress-plugin-vdoing-comment', // 评论
{
choosen: 'artalk',
options: {
server: 'http://comment.tbchip.com', // （必填）
site: '小哥之哥', // （必填）
// disableEmotion: false, // 是否禁用表情（可选）
// disablePicture: true, // 是否禁用图片（可选）
// disablePreview: false // 是否禁用预览（可选）
},
},
],
[ 'feed', feed_options ],
// 自定义插件
[
{
name: 'custom-plugins',
globalUIComponents: ["IndexBigImg"], // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles
}
],
[
'@vuepress/last-updated', // "上次更新"时间格式
{
transformer: (timestamp, lang) => {
return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
},
},
],
// 代码块儿演示
[
'demo-block',
{
settings: {
jsfiddle: false, // 是否显示 jsfiddle 链接
codepen: true, // 是否显示 codepen 链接
horizontal: false, // 是否展示为横向样式
},
},
],
]
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
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
docs/.vuepress/config/themeConfig.ts文件
import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
import nav from '../nav/index.ts'
export default <VdoingThemeConfig> {
// 导航菜单配置
nav,
sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
logo: '/img/logo.png', // 导航栏logo
repo: 'tchuaxiaohua/vuepress-blog', // 导航栏右侧生成Github链接
searchMaxSuggestions: 10, // 搜索结果显示最大数
lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字 string | boolean (取值为git提交时间)
docsDir: 'docs', // 编辑的文件夹
// docsBranch: 'master', // 编辑的文件所在分支，默认master。 注意：如果你的分支是main则修改为main
editLinks: true, // 启用编辑
editLinkText: '编辑',
//*** 以下是Vdoing主题相关配置，文档：https://doc.xugaoyi.com/pages/a20ce8/ ***//
// category: false, // 是否打开分类功能，默认true
// tag: false, // 是否打开标签功能，默认true
// archive: false, // 是否打开归档功能，默认true
// categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
// pageStyle: 'line', // 页面风格，可选值：'card'卡片 | 'line' 线（未设置bodyBgImg时才生效）， 默认'card'。 说明：card时背景显示灰色衬托出卡片样式，line时背景显示纯色，并且部分模块带线条边框
// bodyBgImg: [
// 'https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
// 'https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
// 'https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
// ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时隔bodyBgImgInterval切换一张。
// bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~1.0, 默认0.5
// bodyBgImgInterval: 15, // body多张背景图时的切换间隔, 默认15，单位s
// titleBadge: false, // 文章标题前的图标是否显示，默认true
// titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
// '图标地址1',
// '图标地址2'
// ],
// contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 方格 | 2 横线 | 3 竖线 | 4 左斜线 | 5 右斜线 | 6 点状
// updateBar: { // 最近更新栏
// showToArticle: true, // 显示到文章页底部，默认true
// moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
// },
// rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示)
// sidebarOpen: false, // 初始状态是否打开左侧边栏，默认true
// pageButton: false, // 是否显示快捷翻页按钮，默认true
// 默认外观模式（用户未在页面手动修改过模式时才生效，否则以用户设置的模式为准），可选：'auto' | 'light' | 'dark' | 'read'，默认'auto'。
// defaultMode: 'auto',
// 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义> 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
sidebar: 'structuring',
// 文章默认的作者信息，(可在md文件中单独配置此信息) string | {name: string, link?: string}
author: {
name: 'tchua', // 必需
link: 'https://github.com/tchuaxiaohua', // 可选的
},
// 博主信息 (显示在首页侧边栏)
blogger: {
avatar: 'https://ldbbs.ldmnq.com/bbs/topic/attachment/2023-2/1aebdb3f-7c51-4ab9-ba55-3c3ff9bec8cc.gif',
name: '小花',
slogan: '运维扫地僧',
},
indexImg: {
navColor: 2, // 导航栏左侧名字、中间搜索框、右侧字体的颜色，1 是黑色，2 是白色。默认是 1
switchNavColor: true, // 页面移出大图片的位置后，navColor 是否变换，如由白色变黑色，黑色变白色。默认是 false
// 因为本主题的默认背景色偏向白色，如果 navColor 是 2，建议需要开启(true)，否则白背景 + 白字体 = 看不见
bgTimeColor: true, // 是否开启图片的背景色随一天的不同时间而变化，并且开启时间窗口提示，默认是 false。时间分为四种：白天（原图）、黄昏（偏黄）、晚上（偏黑）、深夜（偏深黑）
bgTimeColorArray: ['transparent', 'rgba(255, 148, 48, .2)', 'rgba(0, 0, 0, .3)', 'rgba(0, 0, 0, .5)'], // 第一个是白天的颜色（默认原图），第二个是黄昏的颜色，第三个是晚上的颜色，第四个是深夜的颜色。bgTimeColor 为 true 生效。提示：如果不想要这个效果，但是又想要时间窗口提示效果，则改为 ['transparent', 'transparent', 'transparent', 'transparent']
descFade: true, // 是否开启图片中间描述的淡入效果，默认为 false
desc: ["Web前端技术博客，积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu", "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt", "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw"], // 多个描述，如果填写则覆盖 config.js 的 description，不填写默认读取 config.js 的 description，descFade 为 true 生效
descFontSize: '1.4rem', // desc 的字体大小，默认 1.4rem。提示：原主题是 1.1rem
descFadeInTime: 200, // 描述的淡入效果持续时间，descFade 为 true 生效，默认 200 毫秒
descFadeOutTime: 100, // 描述的淡出效果持续时间，descFade 为 true 生效，默认 100 毫秒
descNextTime: 800, // 当存在多个 desc 时，一个 desc 展示完后或准备开始时，多少秒后出现下一个 desc，默认 800 毫秒
bubble: true, // 是否开启图片的气泡效果，默认为 false
bubblePosition: 0, // 气泡效果的位置，范围：0-100，不同数值代表不同的起始位置，0是整个图片，50是半张图（一半的下方）。bubble 为 true 生效。默认是 0
bubbleNum: 200, // 气泡的个数，bubble 为 true 生效，默认 200 个
},
// 社交图标 (显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social)
social: {
// iconfontCssFile: '//at.alicdn.com/t/xxx.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自己添加。阿里图片库：https://www.iconfont.cn/
icons: [
{
iconClass: 'icon-youjian',
title: '发邮件',
link: 'mailto:tchuaxiaohua@163.com',
},
{
iconClass: 'icon-github',
title: 'GitHub',
link: 'https://github.com/tchuaxiaohua',
},
{
iconClass: 'icon-rss',
title: '订阅',
link: 'http://wiki.tbchip.com/rss.xml',
},
],
},
// 页脚信息
footer: {
createYear: 2023, // 博客创建年份
copyrightInfo:
'|<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">豫ICP备2021026650号</a>', // 博客版权信息、备案信息等，支持a标签或换行标签</br>
},
// 扩展自动生成frontmatter。（当md文件的frontmatter不存在相应的字段时将自动添加。不会覆盖已有的数据。）
extendFrontmatter: {
author: {
name: 'tchua',
link: 'https://github.com/tchuaxiaohua'
}
},
}
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
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
docs/.vuepress/nav/index.ts文件
点击查看
// 首页导航菜单
export default [
{ text: '首页', link: '/' },
{
text: '运维',
link: '/ops/', //目录页链接，此处link是vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
items: [
// 说明：以下所有link的值只是在相应md文件头部定义的永久链接（不是什么特殊编码）。另外，注意结尾是有斜杠的
{
items: [
{ text: 'Prometheus', link: '/pages/8143cc480faf9a11/' },
{ text: 'Kubertenes', link: '/pages/09fc5c/' },
{ text: 'Docker', link: '/pages/98d096/' },
],
},
],
},
{
text: '编程',
link: '/devops/',
items: [
{ text: 'Go', link: '/pages/8309a5b876fc95e3/' },
{ text: 'Python', link: '/pages/0a83b083bdf257cb/' },
{ text: 'Vue', link: '/pages/0a83b083bdf257c1/' },
],
},
{
text: '技术专题',
link: '/technology/',
items: [
{ text: 'Jenkins', link: '/pages/9a7ee40fc232253e/' },
{ text: 'ELK', link: '/pages/4c778760be26d8b3/' },
{ text: 'LDAP', link: '/pages/41f87d890d0a02af/' },
],
},
{
text: '更多',
link: '/more/',
items: [
{ text: '学习', link: '/pages/f2a556/' },
{ text: '面试', link: '/pages/aea6571b7a8bae86/' },
{ text: '最佳实践', link: '/pages/2d615df9a36a98ed/' },
{ text: '博客搭建', link: '/pages/website/' },
],
},
{ text: '关于', link: '/about/' },
{
text: '友链',link: '/friends/',
},
{
text: '索引',
link: '/archives/',
items: [
{ text: '分类', link: '/categories/' },
{ text: '标签', link: '/tags/' },
{ text: '归档', link: '/archives/' },
],
},
]
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
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
编辑 (opens new window)
上次更新: 2023/02/21, 14:35:28