mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
docs: update theme docs
This commit is contained in:
pengzhanbo
parent
5c9ae41380
commit
2fb3da0747
@ -18,6 +18,8 @@ export default defineUserConfig({
|
||||
['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }],
|
||||
],
|
||||
|
||||
pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules'],
|
||||
|
||||
bundler: viteBundler(),
|
||||
|
||||
theme,
|
||||
|
||||
@ -20,18 +20,26 @@ export const zhNotes = definePlumeNotesConfig({
|
||||
collapsed: false,
|
||||
items: [
|
||||
'编写文章',
|
||||
'国际化',
|
||||
{
|
||||
text: 'markdown',
|
||||
icon: 'material-symbols:markdown-outline',
|
||||
items: ['markdown-基础', 'markdown-扩展', 'markdown-进阶', 'markdown-试验性'],
|
||||
dir: 'markdown',
|
||||
items: ['基础', '扩展', '进阶', '试验性'],
|
||||
},
|
||||
{
|
||||
text: '图表',
|
||||
icon: 'mdi:chart-line',
|
||||
dir: '图表',
|
||||
items: ['chart', 'echarts', 'mermaid', 'flowchart'],
|
||||
},
|
||||
'国际化',
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '功能',
|
||||
icon: 'lucide:box',
|
||||
collapsed: false,
|
||||
dir: '功能',
|
||||
items: ['代码复制', '内容搜索', '评论', '加密', '组件', '友情链接页', 'seo', 'sitemap'],
|
||||
},
|
||||
{
|
||||
|
||||
1040
docs/.vuepress/public/data/flare.json
Normal file
1040
docs/.vuepress/public/data/flare.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -30,10 +30,17 @@ export const theme: Theme = themePlume({
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
frontmatter: { exclude: ['**/*.snippet.*'] },
|
||||
|
||||
shiki: { twoslash: true },
|
||||
|
||||
markdownEnhance: {
|
||||
demo: true,
|
||||
include: true,
|
||||
chart: true,
|
||||
echarts: true,
|
||||
mermaid: true,
|
||||
flowchart: true,
|
||||
},
|
||||
comment: {
|
||||
provider: 'Giscus',
|
||||
|
||||
@ -70,6 +70,13 @@ permalink: /config/frontmatter/basic/
|
||||
|
||||
当前文章是否 可评论。 仅在启用了评论功能的情况下生效。
|
||||
|
||||
### aside
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章是否 显示 右侧边栏。
|
||||
|
||||
### prev
|
||||
|
||||
- 类型： `string | { text: string, link: string, icon?: string }`
|
||||
|
||||
@ -24,7 +24,7 @@ tags:
|
||||
|
||||
### sticky
|
||||
|
||||
- 类型： `boolean \| number`
|
||||
- 类型： `boolean | number`
|
||||
- 默认值： `false`
|
||||
|
||||
是否在文章列表中，置顶当前文章。
|
||||
|
||||
@ -16,6 +16,17 @@ Shiki 支持多种编程语言。
|
||||
|
||||
关联插件： [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji)
|
||||
|
||||
相比于 官方的 [@vuepress/plugin-prismjs](https://ecosystem.vuejs.press/zh/plugins/prismjs.html) 和
|
||||
[@vuepress/plugin-shiki](https://ecosystem.vuejs.press/zh/plugins/shiki.html) 两个代码高亮插件，
|
||||
提供了更为丰富的功能支持，包括：
|
||||
|
||||
- [代码行高亮](/guide/markdown/extensions/#在代码块中实现行高亮)
|
||||
- [代码聚焦](/guide/markdown/extensions/#代码块中聚焦)
|
||||
- [代码对比差异](/guide/markdown/extensions/#代码块中的颜色差异)
|
||||
- [代码高亮“错误”和“警告”](/guide/markdown/extensions/#高亮-错误-和-警告)
|
||||
- [代码词高亮](/guide/markdown/extensions/#代码块中-词高亮)
|
||||
- [twoslash](/guide/markdown/experiment/#twoslash) <Badge tip="info" text="试验性" /> ，在代码块内提供内联类型提示。
|
||||
|
||||
默认配置：
|
||||
|
||||
```ts
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 搜索配置
|
||||
title: 内容搜索
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 09:19:26
|
||||
permalink: /config/plugins/search/
|
||||
|
||||
@ -575,7 +575,7 @@ export default config
|
||||
|
||||
**输出**
|
||||
|
||||
@[code](../snippet/snippet-1.js)
|
||||
@[code](../../snippet/snippet-1.js)
|
||||
|
||||
如果你只想导入这个文件的一部分：
|
||||
|
||||
@ -6,6 +6,405 @@ createTime: 2024/03/05 16:27:59
|
||||
permalink: /guide/markdown/advance/
|
||||
---
|
||||
|
||||
## 选项组
|
||||
|
||||
让你的 Markdown 文件支持选项卡。
|
||||
|
||||
你需要将选项卡包装在 `tabs` 容器中。
|
||||
|
||||
你可以在 `tabs` 容器中添加一个 id 后缀，该后缀将用作选项卡 id。
|
||||
所有具有相同 id 的选项卡将共享相同的切换事件。
|
||||
|
||||
```md
|
||||
::: tabs#fruit
|
||||
|
||||
<!-- 这里，fruit 将用作 id，它是可选的 -->
|
||||
|
||||
<!-- 选项卡内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
在这个容器内，你应该使用 `@tab` 标记来标记和分隔选项卡内容。
|
||||
|
||||
在 `@tab` 标记后，你可以添加文本 `:active` 默认激活选项卡，之后的文本将被解析为选项卡标题。
|
||||
|
||||
```md
|
||||
::: tabs
|
||||
|
||||
@tab 标题 1
|
||||
|
||||
<!-- tab 1 内容 -->
|
||||
|
||||
@tab 标题 2
|
||||
|
||||
<!-- tab 2 内容 -->
|
||||
|
||||
@tab:active 标题 3
|
||||
|
||||
<!-- tab 3 将会被默认激活 -->
|
||||
|
||||
<!-- tab 3 内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
默认情况下，标题将用作选项卡的值，但你可以使用 id 后缀覆盖它。
|
||||
|
||||
```md
|
||||
::: tabs
|
||||
|
||||
@tab 标题 1
|
||||
|
||||
<!-- 此处，选项卡 1 的标题“标题 1”将用作值。 -->
|
||||
|
||||
<!-- tab 1 内容 -->
|
||||
|
||||
@tab 标题 2#值 2
|
||||
|
||||
<!-- 这里，tab 2 的标题将是 “标题 2”，但它会使用 “值 2” 作为选项卡的值-->
|
||||
|
||||
<!-- tab 2 内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
你可以在每个选项卡中使用 Vue 语法和组件，并且你可以访问 value 和 isActive，
|
||||
表示选项卡的绑定值和选项卡是否处于激活状态。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
::: tabs
|
||||
@tab npm
|
||||
|
||||
npm 应该与 Node.js 被一同安装。
|
||||
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
corepack enable
|
||||
corepack use pnpm@8
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: tabs
|
||||
@tab npm
|
||||
|
||||
npm 应该与 Node.js 被一同安装。
|
||||
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
corepack enable
|
||||
corepack use pnpm@8
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 示例容器
|
||||
|
||||
有时候，你可能需要在 内容中补充一些 示例，但期望能与 其它内容 分隔开来呈现。
|
||||
主题支持在 Markdown 文件中添加示例容器。
|
||||
|
||||
### 语法
|
||||
|
||||
````md
|
||||
::: demo-wrapper
|
||||
添加你的示例
|
||||
:::
|
||||
````
|
||||
|
||||
### 选项
|
||||
|
||||
- `title="xxx"`：标题
|
||||
- `no-padding`：不添加内边距
|
||||
- `img`: 仅包含图片时使用
|
||||
- `height="xxx"`: 高度
|
||||
|
||||
### 示例
|
||||
|
||||
仅包含图片:
|
||||
|
||||
```md
|
||||
::: demo-wrapper img no-padding
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
**输出：**
|
||||
::: demo-wrapper img no-padding
|
||||
|
||||
:::
|
||||
|
||||
包含 markdown 语法：
|
||||
|
||||
```md
|
||||
::: demo-wrapper title="标题"
|
||||
### 三级标题
|
||||
|
||||
这是示例容器中的内容。
|
||||
:::
|
||||
```
|
||||
|
||||
**输出：**
|
||||
::: demo-wrapper title="标题"
|
||||
### 三级标题
|
||||
|
||||
这是示例容器中的内容。
|
||||
:::
|
||||
|
||||
包含 html /vue 代码：
|
||||
|
||||
```md
|
||||
::: demo-wrapper
|
||||
<h1 class="your-demo-title">这是标题</h1>
|
||||
<p class="your-demo-paragraph">这是段落</p>
|
||||
|
||||
<style>
|
||||
.your-demo-title {
|
||||
color: red;
|
||||
}
|
||||
.your-demo-paragraph {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
:::
|
||||
```
|
||||
|
||||
**输出：**
|
||||
::: demo-wrapper
|
||||
|
||||
<h1 class="your-demo-title">这是标题</h1>
|
||||
<p class="your-demo-paragraph">这是段落</p>
|
||||
|
||||
<style>
|
||||
.your-demo-title {
|
||||
color: red !important;
|
||||
}
|
||||
.your-demo-paragraph {
|
||||
color: blue !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
## can I use
|
||||
|
||||
在编写文章时， 提供嵌入 [can-i-use](https://caniuse.com/) WEB feature 各平台支持说明 的功能。
|
||||
|
||||
方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。
|
||||
|
||||
在你的 文章 markdown文件中，使用以下格式：
|
||||
|
||||
``` md
|
||||
::: caniuse <feature> {browser_versions}
|
||||
:::
|
||||
```
|
||||
|
||||
__示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况图标：__
|
||||
|
||||
``` md
|
||||
::: caniuse css-matches-pseudo
|
||||
:::
|
||||
```
|
||||
效果：
|
||||
|
||||
::: caniuse css-matches-pseudo
|
||||
:::
|
||||
|
||||
### 语法
|
||||
|
||||
``` md
|
||||
::: caniuse <feature> {browser_versions}
|
||||
:::
|
||||
```
|
||||
|
||||
- `<feature>`
|
||||
|
||||
必填。 正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/)
|
||||
|
||||
- `{browser_versions}`
|
||||
|
||||
可选。当前特性在多个版本中的支持情况。
|
||||
|
||||
默认值为: `{-2,-1,1}`
|
||||
|
||||
格式： `{number,number,...}` 取值范围为 `-5 ~ 3`
|
||||
|
||||
- 小于`0` 表示低于当前浏览器版本的支持情况
|
||||
- `0` 表示当前浏览器版本的支持情况
|
||||
- 大于`0` 表示高于当前浏览器版本的支持情况
|
||||
|
||||
## 导入文件
|
||||
|
||||
主题支持在 Markdown 文件中导入文件切片。
|
||||
|
||||
导入文件 默认不启用，你可以通过配置来启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
include: true, // [!code highlight]
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
### 语法
|
||||
|
||||
使用 `<!-- @include: filename -->` 导入文件。
|
||||
|
||||
如果要部分导入文件，你可以指定导入的行数:
|
||||
|
||||
- `<!-- @include: filename{start-end} -->`
|
||||
- `<!-- @include: filename{start-} -->`
|
||||
- `<!-- @include: filename{-end} -->`
|
||||
|
||||
同时你也可以导入文件区域:
|
||||
|
||||
- `<!-- @include: filename#region -->`
|
||||
|
||||
::::tip 文件区域
|
||||
文件区域是 vscode 中的一个概念，区域内容被 `#region` 和 `#endregion` 注释包围。
|
||||
|
||||
<!-- @include: ../../snippet/include-1.snippet.md -->
|
||||
::::
|
||||
|
||||
### 高级
|
||||
|
||||
你还可以设置一个对象来自定义包含文件路径和包含行为。
|
||||
|
||||
```ts
|
||||
interface IncludeOptions {
|
||||
/**
|
||||
* 处理 include 文件路径
|
||||
*
|
||||
* @default (path) => path
|
||||
*/
|
||||
resolvePath?: (path: string, cwd: string | null) => string
|
||||
/**
|
||||
* 是否深度导入包含的 Markdown 文件
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
deep?: boolean
|
||||
/**
|
||||
* 是否使用 `<!-- @include: xxx -->` 代替 `@include: xxx` 导入文件
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
useComment?: boolean
|
||||
/**
|
||||
* 是否解析包含的 Markdown 文件的里的相对图像路径
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
resolveImagePath?: boolean
|
||||
/**
|
||||
* 是否解析包含的 Markdown 文件的里的文件相对路径
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
resolveLinkPath?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
例如: 你可以使用 @src 作为源文件夹的别名。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts{5-11}
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
include: {
|
||||
resolvePath: (file) => {
|
||||
if (file.startsWith('@src'))
|
||||
return file.replace('@src', path.resolve(__dirname, '..'))
|
||||
|
||||
return file
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
此外，如果你想将 Markdown 文件直接放在实际文件旁边，但不希望它们呈现为页面，
|
||||
你可以在 VuePress 配置中设置 `pagePatterns` 选项。
|
||||
有关详细信息，请参阅 [pagePatterns](https://vuejs.press/zh/reference/config.html#pagepatterns)。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
// 现在任何带有 `.snippet.md` 扩展名的文件都不会呈现为页面
|
||||
pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules'], // [!code ++]
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
include: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
### 示例
|
||||
|
||||
在项目中有一个 `foo.snippet.md` 文件：
|
||||
:::: code-tabs
|
||||
@tab foo.snippet.md
|
||||
```md
|
||||
### 三级标题
|
||||
|
||||
这是 foo.snippet.md 文件中的内容。
|
||||
|
||||
::: info
|
||||
提示容器包括的内容
|
||||
:::
|
||||
|
||||
<!-- region snippet -->
|
||||
这里是被 `<!-- region snippet -->` 包裹的内容。
|
||||
|
||||
通过 `<!-- @include: ./foo.snippet.md#snippet -->` 来引入。
|
||||
<!-- endregion snippet -->
|
||||
```
|
||||
::::
|
||||
|
||||
使用 `<!-- @include: ./foo.snippet.md -->` 导入文件：
|
||||
|
||||
:::: demo-wrapper title="Include by file"
|
||||
<!-- @include: ../../snippet/include-2.snippet.md -->
|
||||
::::
|
||||
|
||||
使用 `<!-- @include: ./foo.snippet.md{5-7} -->` 导入文件内的 5 到 7 行：
|
||||
|
||||
:::: demo-wrapper title="Include by lines"
|
||||
<!-- @include: ../../snippet/include-2.snippet.md{5-7} -->
|
||||
::::
|
||||
|
||||
使用 `<!-- @include: ./foo.snippet.md#snippet -->` 导入 `snippet` 区域
|
||||
|
||||
:::: demo-wrapper title="Include by file region"
|
||||
<!-- @include: ../../snippet/include-2.snippet.md#snippet -->
|
||||
::::
|
||||
|
||||
## 代码演示
|
||||
|
||||
代码演示 默认不启用，你可以通过配置来启用它。
|
||||
@ -443,103 +842,3 @@ export default () => {
|
||||
:::
|
||||
````
|
||||
::::
|
||||
|
||||
## 选项组
|
||||
|
||||
让你的 Markdown 文件支持供选项卡。
|
||||
|
||||
你需要将选项卡包装在 `tabs` 容器中。
|
||||
|
||||
你可以在 `tabs` 容器中添加一个 id 后缀，该后缀将用作选项卡 id。
|
||||
所有具有相同 id 的选项卡将共享相同的切换事件。
|
||||
|
||||
```md
|
||||
::: tabs#fruit
|
||||
|
||||
<!-- 这里，fruit 将用作 id，它是可选的 -->
|
||||
|
||||
<!-- 选项卡内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
在这个容器内，你应该使用 `@tab` 标记来标记和分隔选项卡内容。
|
||||
|
||||
在 `@tab` 标记后，你可以添加文本 `:active` 默认激活选项卡，之后的文本将被解析为选项卡标题。
|
||||
|
||||
```md
|
||||
::: tabs
|
||||
|
||||
@tab 标题 1
|
||||
|
||||
<!-- tab 1 内容 -->
|
||||
|
||||
@tab 标题 2
|
||||
|
||||
<!-- tab 2 内容 -->
|
||||
|
||||
@tab:active 标题 3
|
||||
|
||||
<!-- tab 3 将会被默认激活 -->
|
||||
|
||||
<!-- tab 3 内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
默认情况下，标题将用作选项卡的值，但你可以使用 id 后缀覆盖它。
|
||||
|
||||
```md
|
||||
::: tabs
|
||||
|
||||
@tab 标题 1
|
||||
|
||||
<!-- 此处，选项卡 1 的标题“标题 1”将用作值。 -->
|
||||
|
||||
<!-- tab 1 内容 -->
|
||||
|
||||
@tab 标题 2#值 2
|
||||
|
||||
<!-- 这里，tab 2 的标题将是 “标题 2”，但它会使用 “值 2” 作为选项卡的值-->
|
||||
|
||||
<!-- tab 2 内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
你可以在每个选项卡中使用 Vue 语法和组件，并且你可以访问 value 和 isActive，
|
||||
表示选项卡的绑定值和选项卡是否处于激活状态。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
::: tabs
|
||||
@tab npm
|
||||
|
||||
npm 应该与 Node.js 被一同安装。
|
||||
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
corepack enable
|
||||
corepack use pnpm@8
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: tabs
|
||||
@tab npm
|
||||
|
||||
npm 应该与 Node.js 被一同安装。
|
||||
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
corepack enable
|
||||
corepack use pnpm@8
|
||||
```
|
||||
|
||||
:::
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 生成 sitemap
|
||||
title: sitemap
|
||||
author: pengzhanbo
|
||||
icon: mdi:sitemap-outline
|
||||
createTime: 2024/03/02 16:47:00
|
||||
@ -89,6 +89,10 @@ export default defineUserConfig({
|
||||
- 使用 `encrypt.admin` 解锁后，被认为是管理员访问，其它未解锁页面也默认解锁。
|
||||
:::
|
||||
|
||||
## 示例
|
||||
|
||||
点击访问 [加密文章，密码：123456](/article/enx7c9s/)
|
||||
|
||||
## 相关配置
|
||||
|
||||
以下配置支持在多语言配置中使用。
|
||||
@ -6,8 +6,14 @@ createTime: 2024/03/06 09:42:42
|
||||
permalink: /guide/features/component/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题提供了一些具有通用性的组件，可以在任何地方使用。
|
||||
|
||||
## `<Badge />` <Badge type="tip" text="badge" />
|
||||
|
||||
标签，用于在页面中增加一些提示信息。
|
||||
|
||||
### Props
|
||||
|
||||
- `type`
|
||||
@ -35,7 +41,9 @@ permalink: /guide/features/component/
|
||||
|
||||
## `<Iconify />`
|
||||
|
||||
支持 iconify 所有图标，支持通过 icon name 加载图标，可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
|
||||
支持 iconify 所有图标，支持通过 icon name 加载图标。
|
||||
|
||||
可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
|
||||
|
||||
### Props
|
||||
|
||||
236
docs/notes/theme/guide/功能/评论.md
Normal file
236
docs/notes/theme/guide/功能/评论.md
Normal file
@ -0,0 +1,236 @@
|
||||
---
|
||||
title: 评论
|
||||
author: pengzhanbo
|
||||
icon: la:comment
|
||||
createTime: 2024/03/04 11:58:59
|
||||
permalink: /guide/features/comments/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
文章评论由 [@vuepress/plugin-comment](https://ecosystem.vuejs.press/zh/plugins/comment/) 提供支持。
|
||||
|
||||
主题已内置插件，你无需重新安装即可使用。
|
||||
|
||||
在本主题中，通过以下字段进行配置：
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
comment: {
|
||||
// 服务提供商
|
||||
provider: '', // "Artalk“ | "Giscus" | "Twikoo" | "Waline"
|
||||
// 是否默认启用评论
|
||||
comment: true,
|
||||
|
||||
// 其它配置，根据服务提供商进行配置
|
||||
// ...
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
### 服务提供商
|
||||
|
||||
[@vuepress/plugin-comment](https://ecosystem.vuejs.press/zh/plugins/comment/) 支持
|
||||
`"Artalk“ | "Giscus" | "Twikoo" | "Waline"` 等多种不同的评论服务提供商。
|
||||
|
||||
你可以根据自己的需求进行配置。
|
||||
|
||||
- `Giscus` 是一个基于 GitHub Discussion 的评论系统，启用简便。[查看文档](https://ecosystem.vuejs.press/zh/plugins/comment/giscus/)
|
||||
- `Waline` 是一个 需要后端的评论系统，安全性较高。[查看文档](https://ecosystem.vuejs.press/zh/plugins/comment/waline/)
|
||||
- `Twikoo` 一个简洁、安全、免费的静态网站评论系统，基于 腾讯云开发。[查看文档](https://ecosystem.vuejs.press/zh/plugins/comment/twikoo/)
|
||||
- `Artalk` 是一款简洁的自托管评论系统，你可以在服务器上轻松部署并置入前端页面中。[查看文档](https://ecosystem.vuejs.press/zh/plugins/comment/artalk/)
|
||||
|
||||
::: tip 推荐的评论服务
|
||||
- 面向程序员和开发人员: Giscus
|
||||
- 面向公众: Waline
|
||||
:::
|
||||
|
||||
## Giscus
|
||||
|
||||
Giscus 是一个基于 GitHub Discussion 的评论系统，启用简便。
|
||||
|
||||
### 准备工作
|
||||
|
||||
1. 你需要创建一个公开仓库，并开启评论区，以作为评论存放的地点
|
||||
|
||||
2. 你需要安装 [Giscus App](https://github.com/apps/giscus)，使其有权限访问对应仓库。
|
||||
|
||||
3. 在完成以上步骤后，请前往 [Giscus 页面](https://giscus.app/zh-CN) 获得你的设置。
|
||||
|
||||
你只需要填写仓库和 Discussion 分类，之后滚动到页面下部的 “启用 giscus” 部分，
|
||||
获取 `data-repo`, `data-repo-id`, `data-category` 和 `data-category-id` 这四个属性。
|
||||
|
||||
### 配置
|
||||
|
||||
请配置 `provider: 'Giscus'` 并将 `data-repo`, `data-repo-id`, `data-category` 和 `data-category-id` 作为插件选项传入 `repo`, `repoId`, `category`, `categoryId` 。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
comment: {
|
||||
provider: 'Giscus', // "Artalk“ | "Giscus" | "Twikoo" | "Waline"
|
||||
comment: true,
|
||||
repo: 'Your_Repo', // [!code ++]
|
||||
repoId: 'Your_RepoId', // [!code ++]
|
||||
category: 'Your_Category', // [!code ++]
|
||||
categoryId: 'Your_CategoryId', // [!code ++]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
### 主题
|
||||
|
||||
默认情况下，Giscus 使用 `light` 或 `dark` 主题 (基于夜间模式状态)。
|
||||
|
||||
如果你想在日间模式和夜间模式下自定义主题，你可以设置 `lightTheme` 和 `darkTheme` 选项，
|
||||
使用内置主题关键字或以 `https://` 开头的自定义 css 链接。
|
||||
|
||||
## Waline
|
||||
|
||||
一个有后端的安全评论系统。
|
||||
|
||||
### 安装
|
||||
|
||||
如果你想要在主题中使用 Waline， 你需要先安装 `@waline/client`。
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
```sh
|
||||
pnpm add @waline/client
|
||||
```
|
||||
@tab npm
|
||||
```sh
|
||||
npm i @waline/client
|
||||
```
|
||||
@tab yarn
|
||||
```sh
|
||||
yarn add @waline/client
|
||||
```
|
||||
:::
|
||||
|
||||
### LeanCloud 设置 (数据库)
|
||||
|
||||
1. [登录](https://console.leancloud.app/login) 或 [注册](https://console.leancloud.app/register) `LeanCloud 国际版` 并进入 [控制台](https://console.leancloud.app/apps)
|
||||
|
||||
1. 点击左上角 [创建应用](https://console.leancloud.app/apps) 并起一个你喜欢的名字 (请选择免费的开发版):
|
||||
|
||||
|
||||
|
||||
2. 进入应用，选择左下角的 `设置` > `应用 Key`。你可以看到你的 `APP ID`,`APP Key` 和 `Master Key`。请记录它们，以便后续使用。
|
||||
|
||||
|
||||
|
||||
::: warning 国内版需要完成备案接入
|
||||
|
||||
如果你正在使用 Leancloud 国内版 ([leancloud.cn](https://leancloud.cn))，我们推荐你切换到国际版 ([leancloud.app](https://leancloud.app))。否则，你需要为应用额外绑定**已备案**的域名，同时购买独立 IP 并完成备案接入:
|
||||
|
||||
- 登录国内版并进入需要使用的应用
|
||||
- 选择 `设置` > `域名绑定` > `API 访问域名` > `绑定新域名` > 输入域名 > `确定`。
|
||||
- 按照页面上的提示按要求在 DNS 上完成 CNAME 解析。
|
||||
- 购买独立 IP 并提交工单完成备案接入。(独立 IP 目前价格为 ￥ 50/个/月)
|
||||
|
||||
|
||||
|
||||
:::
|
||||
|
||||
### Vercel 部署 (服务端)
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwalinejs%2Fwaline%2Ftree%2Fmain%2Fexample)
|
||||
|
||||
1. 点击上方按钮，跳转至 Vercel 进行 Server 端部署。
|
||||
|
||||
::: note
|
||||
|
||||
如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
|
||||
|
||||
:::
|
||||
|
||||
1. 输入一个你喜欢的 Vercel 项目名称并点击 `Create` 继续:
|
||||
|
||||
|
||||
|
||||
2. 此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。
|
||||
|
||||
|
||||
|
||||
一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 `Go to Dashboard` 可以跳转到应用的控制台。
|
||||
|
||||
|
||||
|
||||
3. 点击顶部的 `Settings` - `Environment Variables` 进入环境变量配置页，并配置三个环境变量 `LEAN_ID`, `LEAN_KEY` 和 `LEAN_MASTER_KEY` 。它们的值分别对应上一步在 LeanCloud 中获得的 `APP ID`, `APP KEY`, `Master Key`。
|
||||
|
||||
|
||||
|
||||
::: note
|
||||
|
||||
如果你使用 LeanCloud 国内版，请额外配置 `LEAN_SERVER` 环境变量，值为你绑定好的域名。
|
||||
|
||||
:::
|
||||
|
||||
4. 环境变量配置完成之后点击顶部的 `Deployments` 点击顶部最新的一次部署右侧的 `Redeploy` 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
|
||||
|
||||
|
||||
|
||||
5. 此时会跳转到 `Overview` 界面开始部署，等待片刻后 `STATUS` 会变成 `Ready`。此时请点击 `Visit` ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。
|
||||
|
||||
|
||||
|
||||
### 绑定域名 (可选)
|
||||
|
||||
1. 点击顶部的 `Settings` - `Domains` 进入域名配置页
|
||||
|
||||
1. 输入需要绑定的域名并点击 `Add`
|
||||
|
||||
|
||||
|
||||
2. 在域名服务器商处添加新的 `CNAME` 解析记录
|
||||
|
||||
| Type | Name | Value |
|
||||
| ----- | ------- | -------------------- |
|
||||
| CNAME | example | cname.vercel-dns.com |
|
||||
|
||||
3. 等待生效，你可以通过自己的域名来访问了:tada:
|
||||
|
||||
- 评论系统：example.your-domain.com
|
||||
- 评论管理：example.your-domain.com/ui
|
||||
|
||||
|
||||
|
||||
### 客户端
|
||||
|
||||
#### 使用插件
|
||||
|
||||
在插件选项中设置 `provider: "Waline"`，同时设置服务端地址 `serverURL` 为上一步获取到的值。
|
||||
|
||||
此时，将 `<CommentService>` 组件放置在你网站中合适的位置 (通常是页面的底部)，即可使用 Waline 评论功能。
|
||||
|
||||
::: tip
|
||||
|
||||
你也可以传入其他 Waline 支持的选项 (除了 `el`)。详情请见 [Waline 配置](https://ecosystem.vuejs.press/zh/plugins/comment/waline/config.html)
|
||||
|
||||
:::
|
||||
|
||||
### 评论管理 (管理端)
|
||||
|
||||
1. 部署完成后，请访问 `<serverURL>/ui/register` 进行注册。首个注册的人会被设定成管理员。
|
||||
1. 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
|
||||
1. 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。
|
||||
127
docs/notes/theme/guide/图表/chart.md
Normal file
127
docs/notes/theme/guide/图表/chart.md
Normal file
@ -0,0 +1,127 @@
|
||||
---
|
||||
title: chart.js
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/16 19:33:49
|
||||
icon: solar:chart-bold
|
||||
permalink: /guide/chart/chartjs/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题支持在 文章中 嵌入由 [chart.js](https://www.chartjs.org/docs/latest/) 图表。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
主题默认不启用该功能。
|
||||
|
||||
你需要在你的项目中安装 [chart.js](https://www.chartjs.org/docs/latest/) 库。
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
```sh
|
||||
pnpm add chart.js
|
||||
```
|
||||
@tab npm
|
||||
```sh
|
||||
npm install chart.js
|
||||
```
|
||||
@tab yarn
|
||||
```sh
|
||||
yarn add chart.js
|
||||
```
|
||||
:::
|
||||
|
||||
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
chart: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
````md
|
||||
::: chart 标题
|
||||
```json
|
||||
{
|
||||
// 此处为图表配置
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
图标配置请查看 [Chart.js文档](https://www.chartjs.org/docs/latest/) 。
|
||||
|
||||
## 示例
|
||||
|
||||
### 块状图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-1.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-1.snippet.md{2-41} -->
|
||||
|
||||
### 气泡图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-2.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-2.snippet.md{2-20} -->
|
||||
|
||||
### 折线图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-3.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-3.snippet.md{2-20} -->
|
||||
|
||||
### 玫瑰图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-4.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-4.snippet.md{2-24} -->
|
||||
|
||||
### 雷达图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-5.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-5.snippet.md{2-42} -->
|
||||
|
||||
### 散点图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-6.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/chart-6.snippet.md{2-30} -->
|
||||
237
docs/notes/theme/guide/图表/echarts.md
Normal file
237
docs/notes/theme/guide/图表/echarts.md
Normal file
@ -0,0 +1,237 @@
|
||||
---
|
||||
title: ECharts
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/16 19:34:03
|
||||
icon: raphael:piechart
|
||||
permalink: /guide/chart/echarts/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题支持在文章中嵌入 [ECharts](https://echarts.apache.org/zh/index.html) 图表。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
主题默认不启用该功能。
|
||||
|
||||
你需要在你的项目中安装 [ECharts](https://echarts.apache.org/zh/index.html) 库。
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
```sh
|
||||
pnpm add echarts
|
||||
```
|
||||
@tab npm
|
||||
```sh
|
||||
npm install echarts
|
||||
```
|
||||
@tab yarn
|
||||
```sh
|
||||
yarn add echarts
|
||||
```
|
||||
:::
|
||||
|
||||
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
echarts: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
### JSON 配置
|
||||
|
||||
如果你可以很轻松的生成数据，你可以直接通过一个 JSON 代码块来提供 Echarts 配置:
|
||||
|
||||
````md
|
||||
::: echarts 标题
|
||||
|
||||
```json
|
||||
{
|
||||
// 此处为 ECharts 图表配置
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
### JavaScript 配置
|
||||
|
||||
如果你需要通过脚本来获取数据，你可以使用 js 和 javascript 的代码块。
|
||||
|
||||
我们将通过 `myChart` 变量暴露 Echarts 实例，并且你应该将 Echart 配置赋值给 `option` 变量。
|
||||
同时，你也可以赋值 `width` 和 `height` 来设置图表大小。
|
||||
|
||||
````md
|
||||
::: echarts Title
|
||||
```js
|
||||
const option = {
|
||||
// 此处为 ECharts 图表配置
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
:::tip
|
||||
你可以使用顶级 `await` 和 `fetch` 来从网络请求中获取数据。
|
||||
:::
|
||||
|
||||
相关配置，详见 [ECharts 文档](https://echarts.apache.org/handbook/zh/get-started/)
|
||||
|
||||
## 高级
|
||||
|
||||
你可以在 [客户端配置文件](https://vuejs.press/zh/guide/configuration.html##使用脚本) 中导入并使用 `defineEchartsConfig` 来自定义 Echarts:
|
||||
|
||||
```ts
|
||||
import { defineClientConfig } from 'vuepress/client'
|
||||
import { defineEchartsConfig } from 'vuepress-theme-plume/client'
|
||||
|
||||
defineEchartsConfig({
|
||||
options: {
|
||||
// 全局 Echarts 配置
|
||||
},
|
||||
setup: async () => {
|
||||
// Echarts 设置
|
||||
// 例如: await import("echarts-wordcloud")
|
||||
},
|
||||
})
|
||||
|
||||
export default defineClientConfig({
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
## 示例
|
||||
|
||||
### 线图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-1.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-1.snippet.md{2-100} -->
|
||||
|
||||
### 柱状图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-2.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-2.snippet.md{2-75} -->
|
||||
|
||||
### 饼图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-3.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-3.snippet.md{2-74} -->
|
||||
|
||||
### 散点图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-4.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-4.snippet.md{2-39} -->
|
||||
|
||||
### 极坐标图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-5.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-5.snippet.md{2-40} -->
|
||||
|
||||
### 烛台图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-6.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-6.snippet.md{2-308} -->
|
||||
|
||||
### 雷达图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-7.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-7.snippet.md{2-36} -->
|
||||
|
||||
### 热力图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-8.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-8.snippet.md{2-179} -->
|
||||
|
||||
### 树图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-9.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-9.snippet.md{2-33} -->
|
||||
|
||||
### 多图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/echarts-10.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/echarts-10.snippet.md{2-69} -->
|
||||
332
docs/notes/theme/guide/图表/flowchart.md
Normal file
332
docs/notes/theme/guide/图表/flowchart.md
Normal file
@ -0,0 +1,332 @@
|
||||
---
|
||||
title: flowchart
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/16 19:34:31
|
||||
icon: f7:flowchart
|
||||
permalink: /guide/chart/flowchart/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题支持在 文章中 嵌入由 [flowchart](http://flowchart.js.org/) 。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
主题默认不启用该功能。
|
||||
|
||||
你需要在你的项目中安装 [flowchart.ts](http://flowchart.js.org/) 库。
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
```sh
|
||||
pnpm add flowchart.ts
|
||||
```
|
||||
@tab npm
|
||||
```sh
|
||||
npm install flowchart.ts
|
||||
```
|
||||
@tab yarn
|
||||
```sh
|
||||
yarn add flowchart.ts
|
||||
```
|
||||
:::
|
||||
|
||||
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
flowchart: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
````md
|
||||
<!------- ↓ :preset 是可选的 -->
|
||||
```flow:preset
|
||||
|
||||
<!-- 放置你的流程图代码 -->
|
||||
|
||||
```
|
||||
````
|
||||
|
||||
目前可用的预设:
|
||||
|
||||
- vue (默认)
|
||||
- ant
|
||||
- pie
|
||||
|
||||
## 演示
|
||||
|
||||
::: md-demo Vue 主题
|
||||
|
||||
```flow
|
||||
st=>start: 开始|past:>http://www.google.com[blank]
|
||||
e=>end: 结束|future:>http://www.google.com
|
||||
op1=>operation: 操作1|past
|
||||
op2=>operation: 操作2|current
|
||||
sub1=>subroutine: 子程序|invalid
|
||||
cond=>condition: 是/否?|approved:>http://www.google.com
|
||||
c2=>condition: 判断2|rejected
|
||||
io=>inputoutput: 进行反思...|future
|
||||
|
||||
st->op1(right)->cond
|
||||
cond(yes, right)->c2
|
||||
cond(no)->sub1(left)->op1
|
||||
c2(yes)->io->e
|
||||
c2(no)->op2->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: md-demo Ant 主题
|
||||
|
||||
```flow:ant
|
||||
st=>start: 开始|past:>http://www.google.com[blank]
|
||||
e=>end: 结束|future:>http://www.google.com
|
||||
op1=>operation: 操作1|past
|
||||
op2=>operation: 操作2|current
|
||||
sub1=>subroutine: 子程序|invalid
|
||||
cond=>condition: 是/否?|approved:>http://www.google.com
|
||||
c2=>condition: 判断2|rejected
|
||||
io=>inputoutput: 进行反思...|future
|
||||
|
||||
st->op1(right)->cond
|
||||
cond(yes, right)->c2
|
||||
cond(no)->sub1(left)->op1
|
||||
c2(yes)->io->e
|
||||
c2(no)->op2->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: md-demo Pie 主题
|
||||
|
||||
```flow:pie
|
||||
st=>start: 开始|past:>http://www.google.com[blank]
|
||||
e=>end: 结束|future:>http://www.google.com
|
||||
op1=>operation: 操作1|past
|
||||
op2=>operation: 操作2|current
|
||||
sub1=>subroutine: 子程序|invalid
|
||||
cond=>condition: 是/否?|approved:>http://www.google.com
|
||||
c2=>condition: 判断2|rejected
|
||||
io=>inputoutput: 进行反思...|future
|
||||
|
||||
st->op1(right)->cond
|
||||
cond(yes, right)->c2
|
||||
cond(no)->sub1(left)->op1
|
||||
c2(yes)->io->e
|
||||
c2(no)->op2->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 流程图介绍
|
||||
|
||||
### 节点类型
|
||||
|
||||
定义了结点形状。
|
||||
|
||||
#### 开始 & 结束
|
||||
|
||||
- `[Variable]->start: [Text]`
|
||||
|
||||
被用于流程开始的第一个节点。
|
||||
默认文字为 `Start`.
|
||||
|
||||
- `[Variable]->end: [Text]`
|
||||
|
||||
被用于流程结束的最后一个节点。
|
||||
默认文字为 `End`.
|
||||
|
||||
::: md-demo 开始 & 结束
|
||||
|
||||
```flow
|
||||
st=>start: 开始
|
||||
e=>end: 结束
|
||||
|
||||
st->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#### 操作
|
||||
|
||||
`[Variable]->operation: [Text]`
|
||||
|
||||
::: md-demo 操作
|
||||
```flow
|
||||
process=>operation: 操作
|
||||
e=>end: 结束
|
||||
|
||||
process->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#### 输入输出
|
||||
|
||||
`[Variable]->inputoutput: [Text]`
|
||||
|
||||
::: md-demo 输入输出
|
||||
```flow
|
||||
process=>inputoutput: 输入输出
|
||||
e=>end: 结束
|
||||
|
||||
process->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#### 子程序
|
||||
|
||||
`[Variable]->subroutine: [Text]`
|
||||
|
||||
::: md-demo 子程序
|
||||
```flow
|
||||
process=>subroutine: 子程序
|
||||
e=>end: 结束
|
||||
|
||||
process->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#### 条件
|
||||
|
||||
- `[Variable]->condition: [Text]`
|
||||
|
||||
- `[Variable]([yesText])->[Position]`
|
||||
- `[Variable]([noText])->[Position]`
|
||||
|
||||
::: md-demo 条件
|
||||
```flow
|
||||
cond=>condition: 是否执行操作?
|
||||
process=>operation: 操作
|
||||
e=>end: 结束
|
||||
|
||||
cond(yes)->process->e
|
||||
cond(no)->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#### 平行
|
||||
|
||||
定义同时开始的多个程序。
|
||||
|
||||
- `[Variable]->parallel: [Text]`
|
||||
- `[Variable](path1, direction)->[Position]`
|
||||
- `[Variable](path1, direction)->[Position]`
|
||||
|
||||
::: md-demo 平行
|
||||
```flow
|
||||
para=>parallel: 平行任务
|
||||
process=>operation: 操作
|
||||
e=>end: 结束
|
||||
|
||||
para(path1, bottom)->process->e
|
||||
para(path2)->e
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 链接
|
||||
|
||||
连接方式在流程图中节点定义后描述，使用 `->` 指定一个节点之间的链接，例如 `nodeVar1->nodeVar2->nodeVar3`
|
||||
|
||||
流程可以被分开:
|
||||
|
||||
```md
|
||||
nodeVar1->nodeVar2
|
||||
nodeVar2->nodeVar3
|
||||
```
|
||||
|
||||
连接格式定义如下:
|
||||
|
||||
`<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]`
|
||||
|
||||
在 `[]` 中的项是可选的。
|
||||
|
||||
### 方向
|
||||
|
||||
以下方向可用，并定义了连接将从节点离开的方向。如果指定符不止一个，则总是最后一个。所有节点都有默认方向，这使其成为可选规范。`<direction>` 的可选值为:
|
||||
|
||||
- `left`
|
||||
- `right`
|
||||
- `top`
|
||||
- `bottom`
|
||||
|
||||
### 节点特定说明符
|
||||
|
||||
每个节点变量都有可选的说明符，例如方向，有些变量有特殊的说明符，具体取决于下面定义的节点类型。在 `()` 中的变量名后添加说明符，并用`,` 分隔，例如 `nodeVar (spec1，spec2)`。
|
||||
|
||||
- **start**
|
||||
**operation**
|
||||
**inputoutput**
|
||||
**subroutine**
|
||||
|
||||
可选方向
|
||||
|
||||
`startVar(<direction>)->nextNode`
|
||||
|
||||
`operationVar(<direction>)->nextNode`
|
||||
|
||||
`inputoutputVar(<direction>)->nextNode`
|
||||
|
||||
`subroutineVar(<direction>)->nextNode`
|
||||
|
||||
- **condition**
|
||||
|
||||
必需指定 `yes` or `no`
|
||||
|
||||
可选方向
|
||||
|
||||
```md
|
||||
conditionalVar(yes, <direction>)->nextNode1
|
||||
conditionalVar(no, <direction>)->nextNode2
|
||||
```
|
||||
|
||||
- **parallel**
|
||||
|
||||
必需指定路径方向 `path1`, `path2`, 或 `path3`
|
||||
|
||||
可选方向
|
||||
|
||||
```md
|
||||
parallelVar(path1, <direction>)->nextNode1
|
||||
parallelVar(path2, <direction>)->nextNode2
|
||||
parallelVar(path3, <direction>)->nextNode3
|
||||
```
|
||||
|
||||
### 网址
|
||||
|
||||
可以使用 `:>` 运算符将外部链接添加到节点。
|
||||
|
||||
`[blank]` 指定打开新的页面
|
||||
|
||||
```md
|
||||
st=>start: Start:>http://www.google.com[blank]
|
||||
e=>end: End:>http://www.yahoo.com
|
||||
```
|
||||
|
||||
### 建议
|
||||
|
||||
文本中可能不应该使用的符号: `=>`、`->`、 `:>`、`|`、`@>` 和 `:$`
|
||||
|
||||
如果要在流程图中强调特定路径，则可以另外定义它，如下所示:
|
||||
|
||||
```
|
||||
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
|
||||
```
|
||||
313
docs/notes/theme/guide/图表/mermaid.md
Normal file
313
docs/notes/theme/guide/图表/mermaid.md
Normal file
@ -0,0 +1,313 @@
|
||||
---
|
||||
title: mermaid
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/16 19:34:16
|
||||
icon: file-icons:mermaid
|
||||
permalink: /guide/chart/mermaid/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题支持在 文章中 嵌入由 [Mermaid](https://mermaid.js.org/) 。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
主题默认不启用该功能。
|
||||
|
||||
你需要在你的项目中安装 [mermaid](https://mermaid.js.org/) 库。
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
```sh
|
||||
pnpm add mermaid
|
||||
```
|
||||
@tab npm
|
||||
```sh
|
||||
npm install mermaid
|
||||
```
|
||||
@tab yarn
|
||||
```sh
|
||||
yarn add mermaid
|
||||
```
|
||||
:::
|
||||
|
||||
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
mermaid: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
````md
|
||||
```mermaid
|
||||
|
||||
<!-- 在此处放置 mermaid 代码 -->
|
||||
|
||||
```
|
||||
````
|
||||
|
||||
除了使用 mermaid 代码块，你也可以直接使用以下代码块：
|
||||
|
||||
- class: `classDiagram`
|
||||
- c4c: `C4Context`
|
||||
- er: `erDiagram`
|
||||
- gantt: `gantt`
|
||||
- git-graph: `gitGraph`
|
||||
- journey: `journey`
|
||||
- mindmap: `mindmap`
|
||||
- pie: `pie`
|
||||
- quadrant: `quadrantChart`
|
||||
- requirement: `requirementDiagram`
|
||||
- sankey: `sankey-beta`
|
||||
- sequence: `sequenceDiagram`
|
||||
- state: `stateDiagram-v2`
|
||||
- timeline: `timeline`
|
||||
- xy: `xychart-beta`
|
||||
|
||||
你不需要再声明图表类型，也不需要缩进图表代码。
|
||||
|
||||
当图表支持设置标题时，你可以直接在代码块信息后添加标题:
|
||||
|
||||
````md
|
||||
```sequence 代码标题
|
||||
<!-- 顺序图代码内容
|
||||
... -->
|
||||
```
|
||||
````
|
||||
|
||||
配置文档详见 [Mermaid 文档](https://mermaid.js.org/)
|
||||
|
||||
## 高级
|
||||
|
||||
你可以在 [客户端配置文件](https://vuejs.press/zh/guide/configuration.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6) 中导入并使用 `defineMermaidConfig` 来自定义 Mermaid 配置:
|
||||
|
||||
```ts
|
||||
import { defineClientConfig } from 'vuepress/client'
|
||||
import { defineMermaidConfig } from 'vuepress-theme-plume/client'
|
||||
|
||||
defineMermaidConfig({
|
||||
// 在此设置 mermaid 选项
|
||||
})
|
||||
|
||||
export default defineClientConfig({
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
## 示例
|
||||
|
||||
### 流程图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-1.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-1.snippet.md{2-20} -->
|
||||
|
||||
### 循序图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-2.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-2.snippet.md{2-11} -->
|
||||
|
||||
### 类图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-3.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-3.snippet.md{2-25} -->
|
||||
|
||||
### 状态图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-4.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-4.snippet.md{2-9} -->
|
||||
|
||||
### 关系图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-5.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-5.snippet.md{2-15} -->
|
||||
|
||||
### 用户日记图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-6.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-6.snippet.md{2-11} -->
|
||||
|
||||
### 甘特图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-7.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-7.snippet.md{2-31} -->
|
||||
|
||||
### 饼图
|
||||
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
```pie
|
||||
title What Voldemort doesn't have?
|
||||
"FRIENDS" : 2
|
||||
"FAMILY" : 3
|
||||
"NOSE" : 45
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```pie
|
||||
title What Voldemort doesn't have?
|
||||
"FRIENDS" : 2
|
||||
"FAMILY" : 3
|
||||
"NOSE" : 45
|
||||
```
|
||||
|
||||
### Git 图表
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-8.snippet.md-->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-8.snippet.md{2-44} -->
|
||||
|
||||
### C4C 图表
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-9.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-9.snippet.md{2-34} -->
|
||||
|
||||
### 思维导图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-10.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-10.snippet.md{2-19} -->
|
||||
|
||||
### 时序图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-11.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-11.snippet.md{2-11} -->
|
||||
|
||||
### 桑基图
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-12.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-12.snippet.md{2-71} -->
|
||||
|
||||
### 依赖图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-13.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-13.snippet.md{2-15} -->
|
||||
|
||||
### 象限图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-14.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-14.snippet.md{2-16} -->
|
||||
|
||||
### XY图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-15.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-15.snippet.md{2-8} -->
|
||||
|
||||
### 块图
|
||||
|
||||
**输入：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-16.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-16.snippet.md{2-12} -->
|
||||
|
||||
### 复杂例子
|
||||
|
||||
**输入：**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-17.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-17.snippet.md{2-24} -->
|
||||
@ -82,6 +82,11 @@ npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
主题当前版本 已适配至 `vuepress@2.0.0-rc.8`，你应该安装这个版本的 VuePress。
|
||||
高于或低于这个版本，可能会存在潜在的兼容性问题。
|
||||
:::
|
||||
|
||||
### 步骤 4
|
||||
|
||||
**在 `package.json` 中添加 `script`**
|
||||
@ -141,6 +146,11 @@ export default defineUserConfig({
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
无论是否需要使用 **多语言** ，你都应该为 VuePress 配置 正确 `lang` 选项值。
|
||||
主题需要根据 `lang` 选项来确定语言环境文本。
|
||||
:::
|
||||
|
||||
### 步骤 7
|
||||
|
||||
**在 `docs` 目录下新建 `README.md` 文件**
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
---
|
||||
title: 评论
|
||||
author: pengzhanbo
|
||||
icon: la:comment
|
||||
createTime: 2024/03/04 11:58:59
|
||||
permalink: /guide/features/comments/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
文章评论由 [vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment2/zh) 提供支持。
|
||||
|
||||
在本主题中，通过以下字段进行配置：
|
||||
|
||||
```ts
|
||||
// .vuepress/config.ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
comment: {
|
||||
// comment options
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 服务提供商
|
||||
|
||||
[vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment2/zh) 支持
|
||||
`"Artalk“ | "Giscus" | "Twikoo" | "Waline"` 等多种不同的评论服务提供商。
|
||||
|
||||
你可以根据自己的需求进行配置。
|
||||
|
||||
- `Giscus` 是一个基于 GitHub Discussion 的评论系统，启用简便。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/giscus.html)
|
||||
- `Waline` 是一个 需要后端的评论系统，安全性较高。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/waline.html)
|
||||
- `Twikoo` 一个简洁、安全、免费的静态网站评论系统，基于 腾讯云开发。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/twikoo.html)
|
||||
- `Artalk` 是一款简洁的自托管评论系统，你可以在服务器上轻松部署并置入前端页面中。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/artalk.html)
|
||||
42
docs/notes/theme/snippet/chart-1.snippet.md
Normal file
42
docs/notes/theme/snippet/chart-1.snippet.md
Normal file
@ -0,0 +1,42 @@
|
||||
````md
|
||||
::: chart 块状图案例
|
||||
```json
|
||||
{
|
||||
"type": "bar",
|
||||
"data": {
|
||||
"labels": ["红色", "蓝色", "黄色", "绿色", "紫色", "橙色"],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "投票数",
|
||||
"data": [12, 19, 3, 5, 2, 3],
|
||||
"backgroundColor": [
|
||||
"rgba(255, 99, 132, 0.2)",
|
||||
"rgba(54, 162, 235, 0.2)",
|
||||
"rgba(255, 206, 86, 0.2)",
|
||||
"rgba(75, 192, 192, 0.2)",
|
||||
"rgba(153, 102, 255, 0.2)",
|
||||
"rgba(255, 159, 64, 0.2)"
|
||||
],
|
||||
"borderColor": [
|
||||
"rgba(255, 99, 132, 1)",
|
||||
"rgba(54, 162, 235, 1)",
|
||||
"rgba(255, 206, 86, 1)",
|
||||
"rgba(75, 192, 192, 1)",
|
||||
"rgba(153, 102, 255, 1)",
|
||||
"rgba(255, 159, 64, 1)"
|
||||
],
|
||||
"borderWidth": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"y": {
|
||||
"beginAtZero": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
21
docs/notes/theme/snippet/chart-2.snippet.md
Normal file
21
docs/notes/theme/snippet/chart-2.snippet.md
Normal file
@ -0,0 +1,21 @@
|
||||
````md
|
||||
::: chart 气泡图案例
|
||||
```json
|
||||
{
|
||||
"type": "bubble",
|
||||
"data": {
|
||||
"datasets": [
|
||||
{
|
||||
"label": "第一个数据集",
|
||||
"data": [
|
||||
{ "x": 20, "y": 30, "r": 15 },
|
||||
{ "x": 40, "y": 10, "r": 10 }
|
||||
],
|
||||
"backgroundColor": "rgb(255, 99, 132)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
21
docs/notes/theme/snippet/chart-3.snippet.md
Normal file
21
docs/notes/theme/snippet/chart-3.snippet.md
Normal file
@ -0,0 +1,21 @@
|
||||
````md
|
||||
::: chart 折线图案例
|
||||
```json
|
||||
{
|
||||
"type": "line",
|
||||
"data": {
|
||||
"labels": ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "我的第一个数据集",
|
||||
"data": [65, 59, 80, 81, 56, 55, 40],
|
||||
"fill": false,
|
||||
"borderColor": "rgb(75, 192, 192)",
|
||||
"tension": 0.1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
25
docs/notes/theme/snippet/chart-4.snippet.md
Normal file
25
docs/notes/theme/snippet/chart-4.snippet.md
Normal file
@ -0,0 +1,25 @@
|
||||
````md
|
||||
::: chart 玫瑰图案例
|
||||
```json
|
||||
{
|
||||
"type": "polarArea",
|
||||
"data": {
|
||||
"labels": ["红色", "绿色", "黄色", "灰色", "蓝色"],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "我的第一个数据集",
|
||||
"data": [11, 16, 7, 3, 14],
|
||||
"backgroundColor": [
|
||||
"rgb(255, 99, 132)",
|
||||
"rgb(75, 192, 192)",
|
||||
"rgb(255, 205, 86)",
|
||||
"rgb(201, 203, 207)",
|
||||
"rgb(54, 162, 235)"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
43
docs/notes/theme/snippet/chart-5.snippet.md
Normal file
43
docs/notes/theme/snippet/chart-5.snippet.md
Normal file
@ -0,0 +1,43 @@
|
||||
````md
|
||||
::: chart 雷达图案例
|
||||
```json
|
||||
{
|
||||
"type": "radar",
|
||||
"data": {
|
||||
"labels": ["吃饭", "喝水", "睡觉", "设计", "编程", "骑车", "跑步"],
|
||||
"datasets": [
|
||||
{
|
||||
"label": "我的第一个数据集",
|
||||
"data": [65, 59, 90, 81, 56, 55, 40],
|
||||
"fill": true,
|
||||
"backgroundColor": "rgba(255, 99, 132, 0.2)",
|
||||
"borderColor": "rgb(255, 99, 132)",
|
||||
"pointBackgroundColor": "rgb(255, 99, 132)",
|
||||
"pointBorderColor": "#fff",
|
||||
"pointHoverBackgroundColor": "#fff",
|
||||
"pointHoverBorderColor": "rgb(255, 99, 132)"
|
||||
},
|
||||
{
|
||||
"label": "我的第二个数据集",
|
||||
"data": [28, 48, 40, 19, 96, 27, 100],
|
||||
"fill": true,
|
||||
"backgroundColor": "rgba(54, 162, 235, 0.2)",
|
||||
"borderColor": "rgb(54, 162, 235)",
|
||||
"pointBackgroundColor": "rgb(54, 162, 235)",
|
||||
"pointBorderColor": "#fff",
|
||||
"pointHoverBackgroundColor": "#fff",
|
||||
"pointHoverBorderColor": "rgb(54, 162, 235)"
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {
|
||||
"elements": {
|
||||
"line": {
|
||||
"borderWidth": 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
31
docs/notes/theme/snippet/chart-6.snippet.md
Normal file
31
docs/notes/theme/snippet/chart-6.snippet.md
Normal file
@ -0,0 +1,31 @@
|
||||
````md
|
||||
::: chart 散点图案例
|
||||
```json
|
||||
{
|
||||
"type": "scatter",
|
||||
"data": {
|
||||
"datasets": [
|
||||
{
|
||||
"label": "散点数据集",
|
||||
"data": [
|
||||
{ "x": -10, "y": 0 },
|
||||
{ "x": 0, "y": 10 },
|
||||
{ "x": 10, "y": 5 },
|
||||
{ "x": 0.5, "y": 5.5 }
|
||||
],
|
||||
"backgroundColor": "rgb(255, 99, 132)"
|
||||
}
|
||||
]
|
||||
},
|
||||
"options": {
|
||||
"scales": {
|
||||
"x": {
|
||||
"type": "linear",
|
||||
"position": "bottom"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
101
docs/notes/theme/snippet/echarts-1.snippet.md
Normal file
101
docs/notes/theme/snippet/echarts-1.snippet.md
Normal file
@ -0,0 +1,101 @@
|
||||
````md
|
||||
::: echarts Dynamic Data & Time Axis
|
||||
```js
|
||||
const oneDay = 86400000
|
||||
const data = []
|
||||
let now = new Date(1997, 9, 3)
|
||||
let value = Math.random() * 1000
|
||||
|
||||
function randomData() {
|
||||
now = new Date(+now + oneDay)
|
||||
value = value + Math.random() * 21 - 10
|
||||
return {
|
||||
name: now.toString(),
|
||||
value: [
|
||||
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
|
||||
Math.round(value),
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < 1000; i++) data.push(randomData())
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
params = params[0]
|
||||
const date = new Date(params.name)
|
||||
return (
|
||||
`${date.getDate()
|
||||
}/${
|
||||
date.getMonth() + 1
|
||||
}/${
|
||||
date.getFullYear()
|
||||
} : ${
|
||||
params.value[1]}`
|
||||
)
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '100%'],
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: {
|
||||
show: true,
|
||||
},
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false,
|
||||
},
|
||||
restore: {
|
||||
show: true,
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Fake Data',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data,
|
||||
},
|
||||
],
|
||||
}
|
||||
const timeId = setInterval(() => {
|
||||
if (myChart._disposed)
|
||||
return clearInterval(timeId)
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
data.shift()
|
||||
data.push(randomData())
|
||||
}
|
||||
myChart.setOption({
|
||||
series: [
|
||||
{
|
||||
data,
|
||||
},
|
||||
],
|
||||
})
|
||||
}, 1000)
|
||||
```
|
||||
:::
|
||||
````
|
||||
70
docs/notes/theme/snippet/echarts-10.snippet.md
Normal file
70
docs/notes/theme/snippet/echarts-10.snippet.md
Normal file
@ -0,0 +1,70 @@
|
||||
````md
|
||||
::: echarts
|
||||
```js
|
||||
const option = {
|
||||
legend: {},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
|
||||
['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
|
||||
['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
|
||||
['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
|
||||
['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
|
||||
],
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: { gridIndex: 0 },
|
||||
grid: { top: '55%' },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
seriesLayoutBy: 'row',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
seriesLayoutBy: 'row',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
seriesLayoutBy: 'row',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
seriesLayoutBy: 'row',
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
id: 'pie',
|
||||
radius: '30%',
|
||||
center: ['50%', '25%'],
|
||||
emphasis: {
|
||||
focus: 'self',
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}: {@2012} ({d}%)',
|
||||
},
|
||||
encode: {
|
||||
itemName: 'product',
|
||||
value: '2012',
|
||||
tooltip: '2012',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const height = 800
|
||||
```
|
||||
:::
|
||||
````
|
||||
76
docs/notes/theme/snippet/echarts-2.snippet.md
Normal file
76
docs/notes/theme/snippet/echarts-2.snippet.md
Normal file
@ -0,0 +1,76 @@
|
||||
````md
|
||||
::: echarts A bar chart
|
||||
```js
|
||||
const data = []
|
||||
|
||||
for (let i = 0; i < 5; i++) data.push(Math.round(Math.random() * 200))
|
||||
|
||||
const option = {
|
||||
xAxis: {
|
||||
max: 'dataMax',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['A', 'B', 'C', 'D', 'E'],
|
||||
inverse: true,
|
||||
animationDuration: 300,
|
||||
animationDurationUpdate: 300,
|
||||
max: 2, // only the largest 3 bars will be displayed
|
||||
},
|
||||
series: [
|
||||
{
|
||||
realtimeSort: true,
|
||||
name: 'X',
|
||||
type: 'bar',
|
||||
data,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
valueAnimation: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: {
|
||||
show: true,
|
||||
},
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false,
|
||||
},
|
||||
restore: {
|
||||
show: true,
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
animationDuration: 0,
|
||||
animationDurationUpdate: 3000,
|
||||
animationEasing: 'linear',
|
||||
animationEasingUpdate: 'linear',
|
||||
}
|
||||
function run() {
|
||||
for (let i = 0; i < data.length; i++)
|
||||
data[i] += Math.round(Math.random() * Math.random() > 0.9 ? 2000 : 200)
|
||||
|
||||
myChart.setOption({
|
||||
series: [{ type: 'bar', data }],
|
||||
})
|
||||
}
|
||||
|
||||
const timeId = setInterval(() => {
|
||||
if (myChart._disposed)
|
||||
return clearInterval(timeId)
|
||||
|
||||
run()
|
||||
}, 3000)
|
||||
```
|
||||
:::
|
||||
````
|
||||
75
docs/notes/theme/snippet/echarts-3.snippet.md
Normal file
75
docs/notes/theme/snippet/echarts-3.snippet.md
Normal file
@ -0,0 +1,75 @@
|
||||
````md
|
||||
::: echarts A nightingale chart
|
||||
```json
|
||||
{
|
||||
"legend": {
|
||||
"top": "bottom"
|
||||
},
|
||||
"toolbox": {
|
||||
"show": true,
|
||||
"feature": {
|
||||
"mark": {
|
||||
"show": true
|
||||
},
|
||||
"dataView": {
|
||||
"show": true,
|
||||
"readOnly": false
|
||||
},
|
||||
"restore": {
|
||||
"show": true
|
||||
},
|
||||
"saveAsImage": {
|
||||
"show": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "Nightingale Chart",
|
||||
"type": "pie",
|
||||
"radius": [20, 100],
|
||||
"center": ["50%", "50%"],
|
||||
"roseType": "area",
|
||||
"itemStyle": {
|
||||
"borderRadius": 8
|
||||
},
|
||||
"data": [
|
||||
{
|
||||
"value": 40,
|
||||
"name": "rose 1"
|
||||
},
|
||||
{
|
||||
"value": 38,
|
||||
"name": "rose 2"
|
||||
},
|
||||
{
|
||||
"value": 32,
|
||||
"name": "rose 3"
|
||||
},
|
||||
{
|
||||
"value": 30,
|
||||
"name": "rose 4"
|
||||
},
|
||||
{
|
||||
"value": 28,
|
||||
"name": "rose 5"
|
||||
},
|
||||
{
|
||||
"value": 26,
|
||||
"name": "rose 6"
|
||||
},
|
||||
{
|
||||
"value": 22,
|
||||
"name": "rose 7"
|
||||
},
|
||||
{
|
||||
"value": 18,
|
||||
"name": "rose 8"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
40
docs/notes/theme/snippet/echarts-4.snippet.md
Normal file
40
docs/notes/theme/snippet/echarts-4.snippet.md
Normal file
@ -0,0 +1,40 @@
|
||||
````md
|
||||
::: echarts A scatter chart
|
||||
```json
|
||||
{
|
||||
"xAxis": {},
|
||||
"yAxis": {},
|
||||
"series": [
|
||||
{
|
||||
"symbolSize": 20,
|
||||
"data": [
|
||||
[10.0, 8.04],
|
||||
[8.07, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.05, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 7.66],
|
||||
[13.4, 6.81],
|
||||
[10.0, 6.33],
|
||||
[14.0, 8.96],
|
||||
[12.5, 6.82],
|
||||
[9.15, 7.2],
|
||||
[11.5, 7.2],
|
||||
[3.03, 4.23],
|
||||
[12.2, 7.83],
|
||||
[2.02, 4.47],
|
||||
[1.05, 3.33],
|
||||
[4.05, 4.96],
|
||||
[6.03, 7.24],
|
||||
[12.0, 6.26],
|
||||
[12.0, 8.84],
|
||||
[7.08, 5.82],
|
||||
[5.02, 5.68]
|
||||
],
|
||||
"type": "scatter"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
41
docs/notes/theme/snippet/echarts-5.snippet.md
Normal file
41
docs/notes/theme/snippet/echarts-5.snippet.md
Normal file
@ -0,0 +1,41 @@
|
||||
````md
|
||||
::: echarts Two Value-Axes in Polar
|
||||
```js
|
||||
const data = []
|
||||
|
||||
for (let i = 0; i <= 100; i++) {
|
||||
const theta = (i / 100) * 360
|
||||
const r = 5 * (1 + Math.sin((theta / 180) * Math.PI))
|
||||
data.push([r, theta])
|
||||
}
|
||||
|
||||
const height = 450
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
data: ['line'],
|
||||
},
|
||||
polar: {},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'value',
|
||||
startAngle: 0,
|
||||
},
|
||||
radiusAxis: {},
|
||||
series: [
|
||||
{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
data,
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
309
docs/notes/theme/snippet/echarts-6.snippet.md
Normal file
309
docs/notes/theme/snippet/echarts-6.snippet.md
Normal file
@ -0,0 +1,309 @@
|
||||
````md
|
||||
::: echarts Stocks
|
||||
```js
|
||||
const upColor = '#ec0000'
|
||||
const upBorderColor = '#8A0000'
|
||||
const downColor = '#00da3c'
|
||||
const downBorderColor = '#008F28'
|
||||
|
||||
function splitData(rawData) {
|
||||
const categoryData = []
|
||||
const values = []
|
||||
|
||||
for (let i = 0; i < rawData.length; i++) {
|
||||
categoryData.push(rawData[i].splice(0, 1)[0])
|
||||
values.push(rawData[i])
|
||||
}
|
||||
|
||||
return {
|
||||
categoryData,
|
||||
values,
|
||||
}
|
||||
}
|
||||
|
||||
// Each item: open，close，lowest，highest
|
||||
const data0 = splitData([
|
||||
['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
|
||||
['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
|
||||
['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
|
||||
['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
|
||||
['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
|
||||
['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
|
||||
['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
|
||||
['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
|
||||
['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
|
||||
['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
|
||||
['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
|
||||
['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
|
||||
['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
|
||||
['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
|
||||
['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
|
||||
['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
|
||||
['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
|
||||
['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
|
||||
['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
|
||||
['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
|
||||
['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
|
||||
['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
|
||||
['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
|
||||
['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
|
||||
['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
|
||||
['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
|
||||
['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
|
||||
['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
|
||||
['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
|
||||
['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
|
||||
['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
|
||||
['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
|
||||
['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
|
||||
['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
|
||||
['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
|
||||
['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
|
||||
['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
|
||||
['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
|
||||
['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
|
||||
['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
|
||||
['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
|
||||
['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
|
||||
['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
|
||||
['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
|
||||
['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
|
||||
['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
|
||||
['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
|
||||
['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
|
||||
['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
|
||||
['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
|
||||
['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
|
||||
['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
|
||||
['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
|
||||
['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
|
||||
['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
|
||||
['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
|
||||
['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
|
||||
['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
|
||||
['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
|
||||
['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
|
||||
['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
|
||||
['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
|
||||
['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
|
||||
['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
|
||||
['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
|
||||
['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
|
||||
['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
|
||||
['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
|
||||
['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
|
||||
['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
|
||||
['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
|
||||
['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
|
||||
['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
|
||||
['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
|
||||
['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
|
||||
['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
|
||||
['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
|
||||
['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
|
||||
['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
|
||||
['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
|
||||
['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
|
||||
['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
|
||||
['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
|
||||
['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
|
||||
['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
|
||||
['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
|
||||
['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
|
||||
['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1],
|
||||
])
|
||||
|
||||
function calculateMA(dayCount) {
|
||||
const result = []
|
||||
|
||||
for (let i = 0; i < data0.values.length; i++) {
|
||||
if (i < dayCount) {
|
||||
result.push('-')
|
||||
continue
|
||||
}
|
||||
let sum = 0
|
||||
|
||||
for (let j = 0; j < dayCount; j++) sum += +data0.values[i - j][1]
|
||||
|
||||
result.push(sum / dayCount)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data0.categoryData,
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 50,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
start: 50,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '日K',
|
||||
type: 'candlestick',
|
||||
data: data0.values,
|
||||
itemStyle: {
|
||||
color: upColor,
|
||||
color0: downColor,
|
||||
borderColor: upBorderColor,
|
||||
borderColor0: downBorderColor,
|
||||
},
|
||||
markPoint: {
|
||||
label: {
|
||||
formatter: param =>
|
||||
param == null ? '' : Math.round(param.value).toString(),
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: 'Mark',
|
||||
coord: ['2013/5/31', 2300],
|
||||
value: 2300,
|
||||
itemStyle: {
|
||||
color: 'rgb(41,60,85)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'highest value',
|
||||
type: 'max',
|
||||
valueDim: 'highest',
|
||||
},
|
||||
{
|
||||
name: 'lowest value',
|
||||
type: 'min',
|
||||
valueDim: 'lowest',
|
||||
},
|
||||
{
|
||||
name: 'average value on close',
|
||||
type: 'average',
|
||||
valueDim: 'close',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: param => `${param.name}<br>${param.data.coord || ''}`,
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
symbol: ['none', 'none'],
|
||||
data: [
|
||||
[
|
||||
{
|
||||
name: 'from lowest to highest',
|
||||
type: 'min',
|
||||
valueDim: 'lowest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'max',
|
||||
valueDim: 'highest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
{
|
||||
name: 'min line on close',
|
||||
type: 'min',
|
||||
valueDim: 'close',
|
||||
},
|
||||
{
|
||||
name: 'max line on close',
|
||||
type: 'max',
|
||||
valueDim: 'close',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'MA5',
|
||||
type: 'line',
|
||||
data: calculateMA(5),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'MA10',
|
||||
type: 'line',
|
||||
data: calculateMA(10),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'MA20',
|
||||
type: 'line',
|
||||
data: calculateMA(20),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'MA30',
|
||||
type: 'line',
|
||||
data: calculateMA(30),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
37
docs/notes/theme/snippet/echarts-7.snippet.md
Normal file
37
docs/notes/theme/snippet/echarts-7.snippet.md
Normal file
@ -0,0 +1,37 @@
|
||||
````md
|
||||
::: echarts A Radar Chart
|
||||
```json
|
||||
{
|
||||
"legend": {
|
||||
"data": ["Allocated Budget", "Actual Spending"]
|
||||
},
|
||||
"radar": {
|
||||
"indicator": [
|
||||
{ "name": "Sales", "max": 6500 },
|
||||
{ "name": "Administration", "max": 16000 },
|
||||
{ "name": "Information Technology", "max": 30000 },
|
||||
{ "name": "Customer Support", "max": 38000 },
|
||||
{ "name": "Development", "max": 52000 },
|
||||
{ "name": "Marketing", "max": 25000 }
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "Budget vs spending",
|
||||
"type": "radar",
|
||||
"data": [
|
||||
{
|
||||
"value": [4200, 3000, 20000, 35000, 50000, 18000],
|
||||
"name": "Allocated Budget"
|
||||
},
|
||||
{
|
||||
"value": [5000, 14000, 28000, 26000, 42000, 21000],
|
||||
"name": "Actual Spending"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
:::
|
||||
````
|
||||
180
docs/notes/theme/snippet/echarts-8.snippet.md
Normal file
180
docs/notes/theme/snippet/echarts-8.snippet.md
Normal file
@ -0,0 +1,180 @@
|
||||
````md
|
||||
::: echarts
|
||||
```js
|
||||
/* eslint-disable */
|
||||
|
||||
function getNoiseHelper() {
|
||||
class Grad {
|
||||
constructor(x, y, z) {
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.z = z
|
||||
}
|
||||
|
||||
dot2(x, y) {
|
||||
return this.x * x + this.y * y
|
||||
}
|
||||
|
||||
dot3(x, y, z) {
|
||||
return this.x * x + this.y * y + this.z * z
|
||||
}
|
||||
}
|
||||
const grad3 = [
|
||||
new Grad(1, 1, 0),
|
||||
new Grad(-1, 1, 0),
|
||||
new Grad(1, -1, 0),
|
||||
new Grad(-1, -1, 0),
|
||||
new Grad(1, 0, 1),
|
||||
new Grad(-1, 0, 1),
|
||||
new Grad(1, 0, -1),
|
||||
new Grad(-1, 0, -1),
|
||||
new Grad(0, 1, 1),
|
||||
new Grad(0, -1, 1),
|
||||
new Grad(0, 1, -1),
|
||||
new Grad(0, -1, -1),
|
||||
]
|
||||
const p = [
|
||||
151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140,
|
||||
36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120,
|
||||
234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33,
|
||||
88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71,
|
||||
134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133,
|
||||
230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161,
|
||||
1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130,
|
||||
116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250,
|
||||
124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227,
|
||||
47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44,
|
||||
154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98,
|
||||
108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34,
|
||||
242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14,
|
||||
239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121,
|
||||
50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243,
|
||||
141, 128, 195, 78, 66, 215, 61, 156, 180,
|
||||
]
|
||||
// To remove the need for index wrapping, double the permutation table length
|
||||
const perm = Array.from({ length: 512 })
|
||||
const gradP = Array.from({ length: 512 })
|
||||
// This isn't a very good seeding function, but it works ok. It supports 2^16
|
||||
// different seed values. Write something better if you need more seeds.
|
||||
function seed(seed) {
|
||||
if (seed > 0 && seed < 1) {
|
||||
// Scale the seed out
|
||||
seed *= 65536
|
||||
}
|
||||
seed = Math.floor(seed)
|
||||
if (seed < 256)
|
||||
seed |= seed << 8
|
||||
|
||||
for (let i = 0; i < 256; i++) {
|
||||
let v
|
||||
if (i & 1)
|
||||
v = p[i] ^ (seed & 255)
|
||||
else
|
||||
v = p[i] ^ ((seed >> 8) & 255)
|
||||
|
||||
perm[i] = perm[i + 256] = v
|
||||
gradP[i] = gradP[i + 256] = grad3[v % 12]
|
||||
}
|
||||
}
|
||||
seed(0)
|
||||
// ##### Perlin noise stuff
|
||||
function fade(t) {
|
||||
return t * t * t * (t * (t * 6 - 15) + 10)
|
||||
}
|
||||
function lerp(a, b, t) {
|
||||
return (1 - t) * a + t * b
|
||||
}
|
||||
// 2D Perlin Noise
|
||||
function perlin2(x, y) {
|
||||
// Find unit grid cell containing point
|
||||
let X = Math.floor(x)
|
||||
let Y = Math.floor(y)
|
||||
// Get relative xy coordinates of point within that cell
|
||||
x = x - X
|
||||
y = y - Y
|
||||
// Wrap the integer cells at 255 (smaller integer period can be introduced here)
|
||||
X = X & 255
|
||||
Y = Y & 255
|
||||
// Calculate noise contributions from each of the four corners
|
||||
const n00 = gradP[X + perm[Y]].dot2(x, y)
|
||||
const n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1)
|
||||
const n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y)
|
||||
const n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1)
|
||||
// Compute the fade curve value for x
|
||||
const u = fade(x)
|
||||
// Interpolate the four results
|
||||
return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y))
|
||||
}
|
||||
return {
|
||||
seed,
|
||||
perlin2,
|
||||
}
|
||||
}
|
||||
|
||||
const noise = getNoiseHelper()
|
||||
const xData = []
|
||||
const yData = []
|
||||
noise.seed(Math.random())
|
||||
|
||||
const data = []
|
||||
for (let i = 0; i <= 200; i++) {
|
||||
for (let j = 0; j <= 100; j++)
|
||||
data.push([i, j, noise.perlin2(i / 40, j / 20) + 0.5])
|
||||
|
||||
xData.push(i)
|
||||
}
|
||||
for (let j = 0; j < 100; j++)
|
||||
yData.push(j)
|
||||
|
||||
option = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: yData,
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1,
|
||||
calculable: true,
|
||||
realtime: false,
|
||||
inRange: {
|
||||
color: [
|
||||
'#313695',
|
||||
'#4575b4',
|
||||
'#74add1',
|
||||
'#abd9e9',
|
||||
'#e0f3f8',
|
||||
'#ffffbf',
|
||||
'#fee090',
|
||||
'#fdae61',
|
||||
'#f46d43',
|
||||
'#d73027',
|
||||
'#a50026',
|
||||
],
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Gaussian',
|
||||
type: 'heatmap',
|
||||
data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderColor: '#333',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
progressive: 1000,
|
||||
animation: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const height = 500
|
||||
```
|
||||
:::
|
||||
````
|
||||
34
docs/notes/theme/snippet/echarts-9.snippet.md
Normal file
34
docs/notes/theme/snippet/echarts-9.snippet.md
Normal file
@ -0,0 +1,34 @@
|
||||
````md
|
||||
::: echarts Tree
|
||||
```js
|
||||
const data = await fetch(
|
||||
'/data/flare.json',
|
||||
).then(res => res.json())
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'tree',
|
||||
data: [data],
|
||||
top: '18%',
|
||||
bottom: '14%',
|
||||
layout: 'radial',
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 7,
|
||||
initialTreeDepth: 3,
|
||||
animationDurationUpdate: 750,
|
||||
emphasis: {
|
||||
focus: 'descendant',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const height = 600
|
||||
```
|
||||
:::
|
||||
````
|
||||
252
docs/notes/theme/snippet/include-1.snippet.md
Normal file
252
docs/notes/theme/snippet/include-1.snippet.md
Normal file
@ -0,0 +1,252 @@
|
||||
::: code-tabs
|
||||
|
||||
@tab HTML
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- region snippet -->
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi,
|
||||
repellendus. Voluptatibus alias cupiditate at, fuga tenetur error officiis
|
||||
provident quisquam autem, porro facere! Neque quibusdam animi quaerat
|
||||
eligendi recusandae eaque.
|
||||
</p>
|
||||
<!-- endregion snippet -->
|
||||
<p>
|
||||
Veniam harum illum natus omnis necessitatibus numquam architecto eum
|
||||
dignissimos, quos a adipisci et non quam maxime repellendus alias ipsum,
|
||||
vero praesentium laborum commodi perferendis velit repellat? Vero,
|
||||
cupiditate sequi.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@tab Markdown
|
||||
```md
|
||||
## Hello world
|
||||
|
||||
<!-- #region snippet -->
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
|
||||
inventore iure quo aut doloremque, ipsum ab voluptatem ipsa, velit laborum
|
||||
illo quae omnis reiciendis hic, ut dolorem non debitis in!
|
||||
|
||||
<!-- #endregion snippet -->
|
||||
|
||||
Veniam harum illum natus omnis necessitatibus numquam architecto eum
|
||||
dignissimos, quos a adipisci et non quam maxime repellendus alias ipsum,
|
||||
vero praesentium laborum commodi perferendis velit repellat? Vero,
|
||||
cupiditate sequi.
|
||||
```
|
||||
|
||||
@tab TS
|
||||
```ts
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { include } from '@mdit/plugin-include'
|
||||
|
||||
// #region snippet
|
||||
const mdIt = MarkdownIt().use(include, {
|
||||
// your options, currentPath is required
|
||||
currentPath: env => env.filePath,
|
||||
})
|
||||
// #endregion snippet
|
||||
|
||||
mdIt.render('<!-- @include: ./path/to/include/file.md -->', {
|
||||
filePath: 'path/to/current/file.md',
|
||||
})
|
||||
```
|
||||
|
||||
@tab JS
|
||||
```js
|
||||
const MarkdownIt = require('markdown-it')
|
||||
const { include } = require('@mdit/plugin-include')
|
||||
|
||||
// #region snippet
|
||||
const mdIt = MarkdownIt().use(include, {
|
||||
// your options, currentPath is required
|
||||
currentPath: env => env.filePath,
|
||||
})
|
||||
// #endregion snippet
|
||||
|
||||
mdIt.render('<!-- @include: ./path/to/include/file.md -->', {
|
||||
filePath: 'path/to/current/file.md',
|
||||
})
|
||||
```
|
||||
|
||||
@tab css
|
||||
```css
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* #region snippet */
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/* #endregion snippet */
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
```
|
||||
|
||||
@tab Less
|
||||
```less
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* #region snippet */
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/* #endregion snippet */
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
```
|
||||
|
||||
@tab Sass
|
||||
```scss
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* #region snippet */
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/* #endregion snippet */
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
```
|
||||
|
||||
@tab Java
|
||||
```java
|
||||
public class HelloWorld {
|
||||
// #region snippet
|
||||
public static void main(String args[]){
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
// #endregion snippet
|
||||
}
|
||||
```
|
||||
|
||||
@tab Python
|
||||
```py
|
||||
class MyClass:
|
||||
msg = "world"
|
||||
|
||||
#region snippet
|
||||
def sayHello(self):
|
||||
print("Hello " + self.msg + "!")
|
||||
#region snippet
|
||||
|
||||
def sayBye(self):
|
||||
print("Bye " + self.msg + "!")
|
||||
```
|
||||
|
||||
@tab Visual Basic
|
||||
```vb
|
||||
Imports System
|
||||
|
||||
Module Module1
|
||||
# Region snippet
|
||||
Sub Main()
|
||||
Console.WriteLine("Hello World!")
|
||||
Console.WriteLine("Press Enter Key to Exit.")
|
||||
Console.ReadLine()
|
||||
End Sub
|
||||
# EndRegion
|
||||
End Module
|
||||
```
|
||||
|
||||
@tab Bat
|
||||
```bat
|
||||
>nul 2>&1 "%SYSTEMROOT%\system32\cacls.exe" "%SYSTEMROOT%\system32\config\system"
|
||||
if '%errorlevel%' NEQ '0' (
|
||||
echo Requesting administrative privileges...
|
||||
goto UACPrompt
|
||||
) else ( goto gotAdmin )
|
||||
|
||||
::#region snippet
|
||||
:UACPrompt
|
||||
echo Set UAC = CreateObject^("Shell.Application"^) > "%temp%\getadmin.vbs"
|
||||
echo UAC.ShellExecute "%~s0", "", "", "runas", 1 >> "%temp%\getadmin.vbs"
|
||||
"%temp%\getadmin.vbs"
|
||||
exit /B
|
||||
::#endregion snippet
|
||||
|
||||
:gotAdmin
|
||||
if exist "%temp%\getadmin.vbs" ( del "%temp%\getadmin.vbs" )
|
||||
pushd "%CD%"
|
||||
CD /D "%~dp0"
|
||||
```
|
||||
|
||||
@tab C\#
|
||||
```cs
|
||||
using System;
|
||||
|
||||
namespace HelloWorldApp {
|
||||
|
||||
class Geeks {
|
||||
|
||||
// #region snippet
|
||||
static void Main(string[] args) {
|
||||
|
||||
// statement
|
||||
// printing Hello World!
|
||||
Console.WriteLine("Hello World!");
|
||||
|
||||
// To prevents the screen from
|
||||
// running and closing quickly
|
||||
Console.ReadKey();
|
||||
}
|
||||
// #endregion snippet
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@tab C/C++
|
||||
```cpp
|
||||
#include <iostream>
|
||||
#include <vector>
|
||||
|
||||
std::vector<int> v;
|
||||
|
||||
#pragma region snippet
|
||||
int f() {
|
||||
for (int item : v) std::cout << item << std::endl;
|
||||
return v.size();
|
||||
}
|
||||
#pragma endregion snippet
|
||||
|
||||
int main() {
|
||||
int n, u;
|
||||
std::cin >> n;
|
||||
for (int i = 1; i <= n; ++i) {
|
||||
std::cin >> u;
|
||||
v.push_back(u);
|
||||
}
|
||||
std::cout << f();
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
:::
|
||||
14
docs/notes/theme/snippet/include-2.snippet.md
Normal file
14
docs/notes/theme/snippet/include-2.snippet.md
Normal file
@ -0,0 +1,14 @@
|
||||
### 三级标题
|
||||
|
||||
这是 foo.snippet.md 文件中的内容。
|
||||
|
||||
:::info
|
||||
提示容器包括的内容
|
||||
:::
|
||||
|
||||
<!-- region snippet -->
|
||||
这里是被 `<!-- region snippet -->` 包裹的内容。
|
||||
|
||||
通过 `<!-- @include: ./foo.snippet.md#snippet -->` 来引入。
|
||||
|
||||
<!-- endregion snippet -->
|
||||
21
docs/notes/theme/snippet/mermaid-1.snippet.md
Normal file
21
docs/notes/theme/snippet/mermaid-1.snippet.md
Normal file
@ -0,0 +1,21 @@
|
||||
````md
|
||||
```mermaid
|
||||
---
|
||||
title: Flowchart
|
||||
---
|
||||
flowchart TB
|
||||
c1-->a2
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
one --> two
|
||||
three --> two
|
||||
two --> c2
|
||||
```
|
||||
````
|
||||
20
docs/notes/theme/snippet/mermaid-10.snippet.md
Normal file
20
docs/notes/theme/snippet/mermaid-10.snippet.md
Normal file
@ -0,0 +1,20 @@
|
||||
````md
|
||||
```mindmap
|
||||
root((VuePress))
|
||||
Out of box
|
||||
Default theme
|
||||
Navbar
|
||||
Sidebar
|
||||
Darkmode
|
||||
I18n
|
||||
Search
|
||||
Search
|
||||
DocSearch<br />by algolia
|
||||
Customize
|
||||
Theme
|
||||
(hope)
|
||||
Plugins
|
||||
(components)
|
||||
(md-enhance)
|
||||
```
|
||||
````
|
||||
12
docs/notes/theme/snippet/mermaid-11.snippet.md
Normal file
12
docs/notes/theme/snippet/mermaid-11.snippet.md
Normal file
@ -0,0 +1,12 @@
|
||||
````md
|
||||
```timeline
|
||||
title Timeline of Industrial Revolution
|
||||
section 17th-20th century
|
||||
Industry 1.0 : Machinery, Water power, Steam <br>power
|
||||
Industry 2.0 : Electricity, Internal combustion engine, Mass production
|
||||
Industry 3.0 : Electronics, Computers, Automation
|
||||
section 21st century
|
||||
Industry 4.0 : Internet, Robotics, Internet of Things
|
||||
Industry 5.0 : Artificial intelligence, Big data,3D printing
|
||||
```
|
||||
````
|
||||
72
docs/notes/theme/snippet/mermaid-12.snippet.md
Normal file
72
docs/notes/theme/snippet/mermaid-12.snippet.md
Normal file
@ -0,0 +1,72 @@
|
||||
````md
|
||||
```sankey
|
||||
Agricultural 'waste',Bio-conversion,124.729
|
||||
Bio-conversion,Liquid,0.597
|
||||
Bio-conversion,Losses,26.862
|
||||
Bio-conversion,Solid,280.322
|
||||
Bio-conversion,Gas,81.144
|
||||
Biofuel imports,Liquid,35
|
||||
Biomass imports,Solid,35
|
||||
Coal imports,Coal,11.606
|
||||
Coal reserves,Coal,63.965
|
||||
Coal,Solid,75.571
|
||||
District heating,Industry,10.639
|
||||
District heating,Heating and cooling - commercial,22.505
|
||||
District heating,Heating and cooling - homes,46.184
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
Electricity grid,Industry,342.165
|
||||
Electricity grid,Road transport,37.797
|
||||
Electricity grid,Agriculture,4.412
|
||||
Electricity grid,Heating and cooling - commercial,40.858
|
||||
Electricity grid,Losses,56.691
|
||||
Electricity grid,Rail transport,7.863
|
||||
Electricity grid,Lighting & appliances - commercial,90.008
|
||||
Electricity grid,Lighting & appliances - homes,93.494
|
||||
Gas imports,Ngas,40.719
|
||||
Gas reserves,Ngas,82.233
|
||||
Gas,Heating and cooling - commercial,0.129
|
||||
Gas,Losses,1.401
|
||||
Gas,Thermal generation,151.891
|
||||
Gas,Agriculture,2.096
|
||||
Gas,Industry,48.58
|
||||
Geothermal,Electricity grid,7.013
|
||||
H2 conversion,H2,20.897
|
||||
H2 conversion,Losses,6.242
|
||||
H2,Road transport,20.897
|
||||
Hydro,Electricity grid,6.995
|
||||
Liquid,Industry,121.066
|
||||
Liquid,International shipping,128.69
|
||||
Liquid,Road transport,135.835
|
||||
Liquid,Domestic aviation,14.458
|
||||
Liquid,International aviation,206.267
|
||||
Liquid,Agriculture,3.64
|
||||
Liquid,National navigation,33.218
|
||||
Liquid,Rail transport,4.413
|
||||
Marine algae,Bio-conversion,4.375
|
||||
Ngas,Gas,122.952
|
||||
Nuclear,Thermal generation,839.978
|
||||
Oil imports,Oil,504.287
|
||||
Oil reserves,Oil,107.703
|
||||
Oil,Liquid,611.99
|
||||
Other waste,Solid,56.587
|
||||
Other waste,Bio-conversion,77.81
|
||||
Pumped heat,Heating and cooling - homes,193.026
|
||||
Pumped heat,Heating and cooling - commercial,70.672
|
||||
Solar PV,Electricity grid,59.901
|
||||
Solar Thermal,Heating and cooling - homes,19.263
|
||||
Solar,Solar Thermal,19.263
|
||||
Solar,Solar PV,59.901
|
||||
Solid,Agriculture,0.882
|
||||
Solid,Thermal generation,400.12
|
||||
Solid,Industry,46.477
|
||||
Thermal generation,Electricity grid,525.531
|
||||
Thermal generation,Losses,787.129
|
||||
Thermal generation,District heating,79.329
|
||||
Tidal,Electricity grid,9.452
|
||||
UK land based bioenergy,Bio-conversion,182.01
|
||||
Wave,Electricity grid,19.013
|
||||
Wind,Electricity grid,289.366
|
||||
```
|
||||
````
|
||||
16
docs/notes/theme/snippet/mermaid-13.snippet.md
Normal file
16
docs/notes/theme/snippet/mermaid-13.snippet.md
Normal file
@ -0,0 +1,16 @@
|
||||
````md
|
||||
```requirement
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
```
|
||||
````
|
||||
17
docs/notes/theme/snippet/mermaid-14.snippet.md
Normal file
17
docs/notes/theme/snippet/mermaid-14.snippet.md
Normal file
@ -0,0 +1,17 @@
|
||||
````md
|
||||
```quadrant
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]
|
||||
```
|
||||
````
|
||||
9
docs/notes/theme/snippet/mermaid-15.snippet.md
Normal file
9
docs/notes/theme/snippet/mermaid-15.snippet.md
Normal file
@ -0,0 +1,9 @@
|
||||
````md
|
||||
```xy
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
```
|
||||
````
|
||||
13
docs/notes/theme/snippet/mermaid-16.snippet.md
Normal file
13
docs/notes/theme/snippet/mermaid-16.snippet.md
Normal file
@ -0,0 +1,13 @@
|
||||
````md
|
||||
```block
|
||||
columns 3
|
||||
前端 blockArrowId6<[" "]>(right) 后端
|
||||
space:2 down<[" "]>(down)
|
||||
硬盘 left<[" "]>(left) Database[("数据库")]
|
||||
|
||||
classDef front fill:#696,stroke:#333;
|
||||
classDef back fill:#969,stroke:#333;
|
||||
class Frontend front
|
||||
class Backend,Database back
|
||||
```
|
||||
````
|
||||
25
docs/notes/theme/snippet/mermaid-17.snippet.md
Normal file
25
docs/notes/theme/snippet/mermaid-17.snippet.md
Normal file
@ -0,0 +1,25 @@
|
||||
````md
|
||||
```mermaid
|
||||
graph TB
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
|
||||
subgraph A
|
||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
e --> od3>Really long text with line break<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
|
||||
cyr[Cyrillic]-->cyr2((Circle shape));
|
||||
|
||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange
|
||||
```
|
||||
````
|
||||
12
docs/notes/theme/snippet/mermaid-2.snippet.md
Normal file
12
docs/notes/theme/snippet/mermaid-2.snippet.md
Normal file
@ -0,0 +1,12 @@
|
||||
````md
|
||||
```sequence Greetings
|
||||
Alice ->> Bob: Hello Bob, how are you?
|
||||
Bob-->>John: How about you John?
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||||
|
||||
Bob-->Alice: Checking with John...
|
||||
Alice->John: Yes... John, how are you?
|
||||
```
|
||||
````
|
||||
26
docs/notes/theme/snippet/mermaid-3.snippet.md
Normal file
26
docs/notes/theme/snippet/mermaid-3.snippet.md
Normal file
@ -0,0 +1,26 @@
|
||||
````md
|
||||
```class Animal Example
|
||||
note "From Duck till Zebra"
|
||||
Animal <|-- Duck
|
||||
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
````
|
||||
10
docs/notes/theme/snippet/mermaid-4.snippet.md
Normal file
10
docs/notes/theme/snippet/mermaid-4.snippet.md
Normal file
@ -0,0 +1,10 @@
|
||||
````md
|
||||
```state Check if n is negative
|
||||
|
||||
state if_state <<choice>>
|
||||
[*] --> IsPositive
|
||||
IsPositive --> if_state
|
||||
if_state --> False: if n < 0
|
||||
if_state --> True : if n >= 0
|
||||
```
|
||||
````
|
||||
16
docs/notes/theme/snippet/mermaid-5.snippet.md
Normal file
16
docs/notes/theme/snippet/mermaid-5.snippet.md
Normal file
@ -0,0 +1,16 @@
|
||||
````md
|
||||
```er Er Example
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
```
|
||||
````
|
||||
12
docs/notes/theme/snippet/mermaid-6.snippet.md
Normal file
12
docs/notes/theme/snippet/mermaid-6.snippet.md
Normal file
@ -0,0 +1,12 @@
|
||||
````md
|
||||
```journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
```
|
||||
````
|
||||
32
docs/notes/theme/snippet/mermaid-7.snippet.md
Normal file
32
docs/notes/theme/snippet/mermaid-7.snippet.md
Normal file
@ -0,0 +1,32 @@
|
||||
````md
|
||||
```gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
excludes weekends
|
||||
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid :1d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :active, a1, after des1, 3d
|
||||
Add gantt diagram to demo page :after a1 , 20h
|
||||
Add another diagram to demo page :doc1, after a1 , 48h
|
||||
|
||||
section Last section
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
```
|
||||
````
|
||||
45
docs/notes/theme/snippet/mermaid-8.snippet.md
Normal file
45
docs/notes/theme/snippet/mermaid-8.snippet.md
Normal file
@ -0,0 +1,45 @@
|
||||
````md
|
||||
```git-graph
|
||||
commit
|
||||
branch hotfix
|
||||
checkout hotfix
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit id:"ash" tag:"abc"
|
||||
branch featureB
|
||||
checkout featureB
|
||||
commit type:HIGHLIGHT
|
||||
checkout main
|
||||
checkout hotfix
|
||||
commit type:NORMAL
|
||||
checkout develop
|
||||
commit type:REVERSE
|
||||
checkout featureB
|
||||
commit
|
||||
checkout main
|
||||
merge hotfix
|
||||
checkout featureB
|
||||
commit
|
||||
checkout develop
|
||||
branch featureA
|
||||
commit
|
||||
checkout develop
|
||||
merge hotfix
|
||||
checkout featureA
|
||||
commit
|
||||
checkout featureB
|
||||
commit
|
||||
checkout develop
|
||||
merge featureA
|
||||
branch release
|
||||
checkout release
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
checkout release
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
```
|
||||
````
|
||||
35
docs/notes/theme/snippet/mermaid-9.snippet.md
Normal file
35
docs/notes/theme/snippet/mermaid-9.snippet.md
Normal file
@ -0,0 +1,35 @@
|
||||
````md
|
||||
```c4c
|
||||
title System Context diagram for Internet Banking System
|
||||
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
Person(customerB, "Banking Customer B")
|
||||
Person_Ext(customerC, "Banking Customer C")
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
|
||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
System_Boundary(b2, "BankBoundary2") {
|
||||
System(SystemA, "Banking System A")
|
||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||
|
||||
Boundary(b3, "BankBoundary3", "boundary") {
|
||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
|
||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "Uses")
|
||||
BiRel(SystemAA, SystemE, "Uses")
|
||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||
Rel(SystemC, customerA, "Sends e-mails to")
|
||||
```
|
||||
````
|
||||
@ -14,6 +14,10 @@
|
||||
"dependencies": {
|
||||
"@vuepress/bundler-vite": "2.0.0-rc.8",
|
||||
"anywhere": "^1.6.0",
|
||||
"chart.js": "^4.4.2",
|
||||
"echarts": "^5.5.0",
|
||||
"flowchart.ts": "^3.0.0",
|
||||
"mermaid": "^10.9.0",
|
||||
"vue": "^3.4.21",
|
||||
"vuepress-theme-plume": "workspace:*"
|
||||
},
|
||||
|
||||
@ -17,10 +17,11 @@ export default config({
|
||||
'vue/no-v-text-v-html-on-component': 'off',
|
||||
},
|
||||
}, {
|
||||
files: ['**/*.md/*.ts'],
|
||||
files: ['**/*.md/*.{js,ts}'],
|
||||
rules: {
|
||||
'import/no-duplicates': 'off',
|
||||
'import/first': 'off',
|
||||
'no-new': 'off',
|
||||
'eslint-comments/no-unlimited-disable': 'off',
|
||||
},
|
||||
})
|
||||
|
||||
792
pnpm-lock.yaml
generated
792
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user