VuePress 默认的扩展语法
君骨书生 2019-08-08 MarkDownVuePress扩展语法
# 链接
# 内部链接
.
├─ README.md
├─ foo
│ ├─ README.md
│ ├─ one.md
│ └─ two.md
└─ bar
├─ README.md
├─ three.md
└─ four.md
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->
1
2
3
4
5
2
3
4
5
# 代码块中的行高亮
``` js {4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
示例（深黑色的行底色）：
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
``` js{1,4,6-7}
export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VuePress is awesome',
lorem: 'ipsum',
}
}
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VuePress is awesome',
lorem: 'ipsum',
}
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 导入代码段
测试中
# 使用插件扩展语法
# 自定义容器 插件
安装插件 vuepress-plugin-container
npm install -D vuepress-plugin-container1
# 生成各种类型的容器
# 信息框容器
::: tip
这是一个提示
:::
::: warning
这是一个警告
:::
::: danger
这是一个危险警告
:::
::: note
这是笔记容器，在 <Badge text="v1.5.0 +" /> 版本才支持哦~
:::
::: details
这是一个详情块，在 IE / Edge 中不生效
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@vuepress/theme-default 的提示容器
提示
this is tip
npm install -g vuepress
1
STOP
危险区域，禁止通行
这是一个警告
::: note 这是笔记容器，在 v1.5.0 + 版本才支持哦~ :::
::: details 点击查看代码
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('你好，VuePress！')
```
:::
1
2
3
4
5
6
2
3
4
5
6
点击查看代码
console.log('你好，VuePress！')
1
# 布局容器
::: center
### 我是居中的内容
（可用于标题、图片等的居中）
:::
::: right
[我是右浮动的内容](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
::: 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
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::: center
# 我是居中的内容
（可用于标题、图片等的居中） :::
:::
# 卡片
::: cardList
- name: 麋鹿鲁哟
desc: 大道至简，知易行难
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
link: https://www.cnblogs.com/miluluyo/ # 可选
bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
desc: '#IOS #Volantis主题作者'
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
link: https://xaoxuu.com
bgColor: '#718971'
textColor: '#fff'
- name: 平凡的你我
desc: 理想成为大牛的小陈同学
avatar: https://reinness.com/avatar.png
link: https://reinness.com
bgColor: '#FCDBA0'
textColor: '#A05F2C'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:::
::: cardList 2
- name: 《静夜思》
desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
bgColor: '#F0DFB1'
textColor: '#242A38'
- name: Vdoing
desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
link: https://github.com/xugaoyi/vuepress-theme-vdoing
bgColor: '#DFEEE7'
textColor: '#2A3344'
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
:::
::: cardList 111 :::
# 图文卡片列表
::: cardImgList
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
link: https://xugaoyi.com/
name: 标题
desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
author: Evan Xu # 作者，可选
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
link: https://xugaoyi.com/
name: 标题
desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
author: Evan Xu
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
link: https://xugaoyi.com/
name: 标题
desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
author: Evan Xu
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:::
# flowchart流程图 插件
原生markdown改编
安装插件 vuepress-plugin-flowchart
npm install -D vuepress-plugin-flowchart1
生成流程图
@flowstart
st=>start: 开始框
e=>end: 结束框
st->e
@flowend
1
2
3
4
5
2
3
4
5
@flowstart
cond=>condition: Process?
process=>operation: Process
e=>end: End
cond(yes)->process->e
cond(no)->e
@flowend
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
@flowstart
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
@flowend
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
@flowstart
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
@flowend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@flowstart
start=>start: 开始|past
requirementAnalysis=>operation: 需求分析|past
design=>operation: 软件设计|past
coding=>operation: 编码|past
selfTestingPased=>condition: 自测通过？|approved
debug=>operation: debug|invalid
submitTestingPased=>condition: 提测通过？|rejected
modifyBug=>operation: 修bug|current
deploy=>operation: 部署|future
end=>end: 结束|future
start->requirementAnalysis->design->coding->selfTestingPased
selfTestingPased(no)->debug(right)->selfTestingPased
selfTestingPased(yes)->submitTestingPased
submitTestingPased(yes)->deploy->end
submitTestingPased(no)->modifyBug(right)->submitTestingPased
@flowend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
start=>start: 骨折
loginInfo=>inputoutput: 骨折血肿出血或组织水肿
verifyLogin=>subroutine: 室内容物体积↑ +室壁坚韧无弹性
op1=>operation: 恶性循环圈：内容物体积↑
isSuccess=>condition: 室内压↑
res1=>operation: 血液回流受阻
res2=>operation: 毛细血管静水压↑
res3=>operation: 渗出↑
op2=>operation: 室内压↑↑
cond=>condition: 筋膜室内压力↑↑
res4=>operation: 压迫动脉（缺血-肿胀-缺血）
para=>parallel: 室内的肌肉和神经发生缺血
sub1=>subroutine: 肌肉缺血肌肉坏死
sub2=>subroutine: 神经缺血神经失去营养
end=>end: 结束
start->loginInfo->verifyLogin->op1->isSuccess
isSuccess(no)->res1(top)->res2(top)->res3(left)->op1
isSuccess(yes)->op2->cond
cond(no)->res4(right)->op2
cond(yes)->end
para(path1, bottom)->sub1
para(path2, top)->sub2
start@>loginInfo({"stroke":"Red"})@>verifyLogin({"stroke":"Red"})@>isSuccess({"stroke":"Red"})@>respondSuccess({"stroke":"Red"})@>end({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
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
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
参考资料： https://flowchart.vuepress.ulivz.com/
# Mermaid 插件
原生markdown改编
安装插件 vuepress-plugin-mermaidjs
npm install -D vuepress-plugin-mermaidjs1
.vuepress/config.js
module.exports = {
// ...
plugins: [
'vuepress-plugin-mermaidjs'
]
// ...
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 生成Mermaid时序图
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop every minute
John-->Alice: Great!
end
```
1
2
3
4
5
6
7
2
3
4
5
6
7
# 生成Mermaid流程图
# 甘特图（加载困难）
# 饼图 pie Chart
# Vuepress 开发
# 公告栏插件
vuepress-plugin-window
- ./bin/displayWindow.vue
- ./index.js
添加getQR点击打赏，弹出二维码
// ./bin/displayWindow.vue
<template>
<div class="notification-content">
<h5>{{contentInfo.title}}</h5>
<img :src="contentInfo.imgUrl" alt="展示图" v-if="contentInfo.needImg" />
<div v-else class="content" :style="contentInfo.contentStyle">{{contentInfo.content}}</div>
</div>
<div style="padding: 0px 16px;">
<hr />
<!-- <a :href="bottomInfo.linkTo" class="btn-donate">{{bottomInfo.btnText}}</a> -->
<a class="btn-donate" @click="getQR">{{bottomInfo.btnText}}</a>
</div>
</template>
<script>
export default {
name: "DisplayWindow",
data() {
return {
};
},
mounted() {
},
methods: {
getQR() {
this.showQR = true;
console.log('showQR',this.showQR);
this.contentInfo.imgUrl = '/assets/img/QRcode.jpg';
},
}
}
</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
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
窗口大小
//./index.js
return {
TITLE: title || '公告',
WINDOW_STYLE: windowStyle || {
right: '20px',
top: '70px',
// width: '260px',
width: '20%',
},
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 加密功能
https://www.freesion.com/article/44421405069/
# 项目加密
# 文章加密
如果项目是公开的，而某些文章可能需要加密，需要在 frontmatter 以数组的格式设置 keys，可以设置多个密码，数组的值必须是字符串。
---
title: event对象
date: 2020-08-15
tags:
- javascript
- event
categories:
- JavaScript
author:
- 言梧
keys:
- '32位的 md5 加密密文'
---
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
http://www.msxindl.com/tools/md5.asp
加密页的遗留问题： 从某篇单独加密的文章直接进入另一篇文章时（比如导航栏）加密无法隐藏
