编程指南
Nevermore 2023-01-11
# 关于导航栏
- 本模板已经设置了自动导航栏，不许要手动添加文件名称到目录中了。文件在侧边栏出现的名称由
title关键字决定，但是对于文件夹的路径需要手动指明，具体为：
在docs文件夹下添加目录（文章分类），此目录名称会决定侧边栏显示的名称，包括大小写：
然后在docs/.vuepress/config/nav.js中进行修改，添加或删除目录（目录名称不区分大小写），具体可参考已有的编写方式。
# 关于编程的样式
记录一些markdown语法和vue的使用
- 图片
<img src="./Your-Link/banboo.jpg">
1
- 图片样式
<div align=center><img src="./Your-Link/chinese.jpg" width="90%" height="90%"></div>
1
字体颜色：
红色绿色黄色蓝色紫色浅灰色
</font><font color=red>红色</font><font color=#008000>绿色</font><font color=yellow>黄色</font><font color=Blue>蓝色</font><font color= #871F78>紫色</font><font color= #DCDCDC>浅灰色</font><br/>
1
- 字体尺寸：
尺寸5尺寸10
<font size=5>尺寸5</font><font size=10>尺寸10</font>
1
- 强调语句
hello world
hello world
hello world
以上强调语句代码编写方式
:::tip
hello world
:::
::: warning
hello world
:::
::: danger
hello world
:::
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 引用语式：
::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
1
2
3
4
5
6
2
3
4
5
6
- 详情块
详情块
这是一个详情块，在 IE / Edge 中不生效
::: details 详情块
这是一个详情块，在 IE / Edge 中不生效
:::
1
2
3
2
3
在node_modules\vuepress-theme-reco\components\Password.vue中可修改reco-theme
# 添加密码
---
title: vuepress-theme-reco
date: 2019-04-09
author: reco_luan
keys:
- '32位的 md5 加密密文'
---
1
2
3
4
5
6
7
2
3
4
5
6
7
# 背景（已完成设置，仅作记录）
- 1、首页背景
添加到README.md
heroImageStyle: {
maxWidth: '600px',
width: '100%',
display: block,
margin: '9rem auto 2rem',
background: '#fff',
borderRadius: '1rem',
}
bgImage: /picture/abstract.jpg
bgImageStyle: {
height: '700px'
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 2、在readme中修改添加向下跳转
添加到README.md
<style>
.anchor-down {
display: block;
margin: 12rem auto 0;
bottom: 45px;
width: 20px;
height: 20px;
font-size: 34px;
text-align: center;
animation: bounce-in 5s 3s infinite;
position: absolute;
left: 50%;
bottom: 30%;
margin-left: -10px;
cursor: pointer;
}
@-webkit-keyframes bounce-in{
0%{transform:translateY(0)}
20%{transform:translateY(0)}
50%{transform:translateY(-20px)}
80%{transform:translateY(0)}
to{transform:translateY(0)}
}
.anchor-down::before {
content: "";
width: 20px;
height: 20px;
display: block;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
transform: rotate(135deg);
position: absolute;
bottom: 10px;
}
.anchor-down::after {
content: "";
width: 20px;
height: 20px;
display: block;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
transform: rotate(135deg);
}
</style>
<script>
export default {
mounted () {
const ifJanchor = document.getElementById("JanchorDown");
ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);
let a = document.createElement('a');
a.id = 'JanchorDown';
a.className = 'anchor-down';
document.getElementsByClassName('hero')[0].append(a);
let targetA = document.getElementById("JanchorDown");
targetA.addEventListener('click', e => { // 添加点击事件
this.scrollFn();
})
},
methods: {
scrollFn() {
const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度
document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置
}
}
}
</script>
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
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
- 3、背景图
添加到README.md
body{
background-image: url(背景图的url);
}
1
2
3
2
3
# 添加插件（可选）
添加到config.js
yarn add @vuepress-reco/vuepress-plugin-bgm-player -D
plugins: [
[
"@vuepress-reco/vuepress-plugin-bgm-player",
{
audios: [
{
name: "Nightingale",
artist: "Yanni",
url: "/music/Nightingale.mp3",
cover: "/music/Nightingale.jpg",
},
],
autoShrink: true,
shrinkMode: "float",
floatStyle: { bottom: "30px", "z-index": "999999" },
},
],
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
添加到config.js
yarn @vuepress-reco/vuepress-plugin-bulletin-popover
plugins: [
['@vuepress-reco/vuepress-plugin-bulletin-popover', {
width: '300px', // 默认 260px
title: '消息提示',
body: [
{
type: 'title',
content: '欢迎加入QQ交流群 🎉🎉🎉',
style: 'text-aligin: center;'
},
{
type: 'image',
src: '/rvcode_qq.png'
}
],
footer: [
{
type: 'button',
text: '打赏',
link: '/donate'
},
{
type: 'button',
text: '打赏',
link: '/donate'
}
]
}]
]
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
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
提取代码1 (opens new window) 提取代码2 (opens new window)
添加到config.js
yarn add @vuepress-reco/vuepress-plugin-extract-code
yarn add vuepress-plugin-nuggets-style-copy -D
module.exports = {
plugins: [
'@vuepress-reco/extract-code'
]
}
plugins: [
["vuepress-plugin-nuggets-style-copy", {
copyText: "复制代码",
tip: {
content: "复制成功"
}
}]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
儿回来咯分
1
