docs: lint fix md
This commit is contained in:
pengzhanbo
parent
36f80431d3
commit
822d861dae
@ -2,7 +2,8 @@
|
||||
|
||||
## 概览
|
||||
|
||||
项目仓库借助于 [pnpm 工作空间](https://pnpm.io/zh/workspaces) 来实现 [Monorepo](https://en.wikipedia.org/wiki/Monorepo) ，存放了多个互相关联的独立 Package 。
|
||||
项目仓库借助于 [pnpm 工作空间](https://pnpm.io/zh/workspaces) 来实现
|
||||
[Monorepo](https://en.wikipedia.org/wiki/Monorepo) ，存放了多个互相关联的独立 Package 。
|
||||
|
||||
- 主题于 `theme` 目录中进行开发维护。
|
||||
- 插件于 `plugins` 目录中进行开发维护。
|
||||
|
||||
@ -9,6 +9,7 @@ tags:
|
||||
- 标签
|
||||
---
|
||||
|
||||
<!-- markdownlint-disable MD025 -->
|
||||
# 标题H1
|
||||
|
||||
## 标题H2
|
||||
@ -29,13 +30,15 @@ tags:
|
||||
|
||||
正文内容。
|
||||
|
||||
`@property` CSS at-rule是 [CSS Houdini API](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Houdini) 的一部分，它允许开发者显式地定义他们的 [CSS 自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*), 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
|
||||
`@property` CSS at-rule是 [CSS Houdini API](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Houdini)
|
||||
的一部分，它允许开发者显式地定义他们的 [CSS 自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*),
|
||||
允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
|
||||
|
||||
`@property` 的出现，极大的增强了 CSS 的能力。
|
||||
|
||||
**加粗文字**
|
||||
加粗：**加粗文字**
|
||||
|
||||
_斜体文字_
|
||||
斜体： _斜体文字_
|
||||
|
||||
~~删除文字~~
|
||||
|
||||
@ -85,22 +88,22 @@ H~2~O
|
||||
|
||||
[外部链接](https://github.com/pengzhanbo)
|
||||
|
||||
|
||||
|
||||
|
||||
**Badge**
|
||||
**Badge：**
|
||||
|
||||
- <Badge type="info" text="info badge" />
|
||||
- <Badge type="tip" text="tip badge" />
|
||||
- <Badge type="warning" text="warning badge" />
|
||||
- <Badge type="danger" text="danger badge" />
|
||||
|
||||
**图标**
|
||||
**图标：**
|
||||
|
||||
- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
|
||||
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
||||
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
|
||||
|
||||
**demo wrapper**
|
||||
**demo wrapper：**
|
||||
|
||||
::: demo-wrapper title="示例" no-padding height="200px"
|
||||
<style scoped>
|
||||
@ -121,7 +124,7 @@ H~2~O
|
||||
|
||||
:::
|
||||
|
||||
**代码**
|
||||
**代码：**
|
||||
|
||||
```js whitespace
|
||||
const a = 1
|
||||
@ -142,7 +145,7 @@ const obj = {
|
||||
}
|
||||
```
|
||||
|
||||
**Code Blocks TwoSlash**
|
||||
**Code Blocks TwoSlash：**
|
||||
|
||||
```ts twoslash
|
||||
// @errors: 2339
|
||||
@ -204,24 +207,28 @@ const count = ref(0)
|
||||
</template>
|
||||
```
|
||||
|
||||
**代码分组**
|
||||
**代码分组：**
|
||||
|
||||
::: code-tabs
|
||||
@tab tab1
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
const b = 2
|
||||
const c = a + b
|
||||
```
|
||||
|
||||
@tab tab2
|
||||
|
||||
```ts
|
||||
const a: number = 1
|
||||
const b: number = 2
|
||||
const c: number = a + b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
**代码块高亮**
|
||||
**代码块高亮：**
|
||||
|
||||
```ts
|
||||
function foo() {
|
||||
@ -237,7 +244,7 @@ function foo() {
|
||||
}
|
||||
```
|
||||
|
||||
**代码块聚焦**
|
||||
**代码块聚焦：**
|
||||
|
||||
```ts
|
||||
function foo() {
|
||||
@ -247,59 +254,71 @@ function foo() {
|
||||
|
||||
::: note 注释
|
||||
注释内容 [link](https://github.com/pengzhanbo) `inline code`
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
const b = 2
|
||||
const c = a + b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: info 信息
|
||||
信息内容 [link](https://github.com/pengzhanbo) `inline code`
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
const b = 2
|
||||
const c = a + b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tip 提示
|
||||
提示内容 [link](https://github.com/pengzhanbo) `inline code`
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
const b = 2
|
||||
const c = a + b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: warning 警告
|
||||
警告内容 [link](https://github.com/pengzhanbo) `inline code`
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
const b = 2
|
||||
const c = a + b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: caution 错误
|
||||
错误内容 [link](https://github.com/pengzhanbo) `inline code`
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
const b = 2
|
||||
const c = a + b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: important 重要
|
||||
重要内容 [link](https://github.com/pengzhanbo) `inline code`
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
const b = 2
|
||||
const c = a + b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
**GFM alert**
|
||||
**GFM alert：**
|
||||
|
||||
> [!note]
|
||||
> note
|
||||
@ -319,7 +338,7 @@ const c = a + b
|
||||
> [!important]
|
||||
> important
|
||||
|
||||
**代码演示**
|
||||
**代码演示：**
|
||||
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
@ -342,7 +361,7 @@ span {
|
||||
|
||||
:::
|
||||
|
||||
**选项卡**
|
||||
**选项卡：**
|
||||
|
||||
::: tabs
|
||||
@tab 标题1
|
||||
@ -362,7 +381,7 @@ span {
|
||||
:::
|
||||
::::
|
||||
|
||||
**脚注**
|
||||
**脚注：**
|
||||
|
||||
脚注 1 链接[^first]。
|
||||
|
||||
|
||||
@ -123,23 +123,30 @@ config:
|
||||
|
||||
:::code-tabs
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
pnpm add vuepress@next vuepress-theme-plume vue
|
||||
```
|
||||
|
||||
@tab npm
|
||||
|
||||
```sh
|
||||
npm install vuepress@next vuepress-theme-plume
|
||||
```
|
||||
|
||||
@tab yarn
|
||||
|
||||
```sh
|
||||
yarn add vuepress@next vuepress-theme-plume
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 配置
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
@ -151,6 +158,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 更新记录
|
||||
|
||||
@ -15,19 +15,23 @@ permalink: /plugins/plugin-caniuse/
|
||||
|
||||
::: code-tabs
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
npm install @vuepress-plume/plugin-caniuse
|
||||
```
|
||||
|
||||
@tab:active yarn
|
||||
|
||||
``` sh
|
||||
yarn add @vuepress-plume/plugin-caniuse
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
|
||||
``` sh
|
||||
pnpm add @vuepress-plume/plugin-caniuse
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
@ -38,6 +42,7 @@ pnpm add @vuepress-plume/plugin-caniuse
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
``` ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { caniusePlugin } from '@vuepress-plume/plugin-caniuse'
|
||||
@ -48,6 +53,7 @@ export default defineUserConfig({
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Step2：在markdown中使用
|
||||
@ -65,6 +71,7 @@ __示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情
|
||||
::: caniuse css-matches-pseudo
|
||||
:::
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
::: caniuse css-matches-pseudo
|
||||
|
||||
@ -26,17 +26,23 @@ permalink: /plugins/plugin-content-update/
|
||||
|
||||
::: code-tabs
|
||||
@tabs npm
|
||||
|
||||
```sh
|
||||
npm install @vuepress-plume/plugin-content-update
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
pnpm add @vuepress-plume/plugin-content-update
|
||||
```
|
||||
|
||||
@tab yarn
|
||||
|
||||
```sh
|
||||
yarn add @vuepress-plume/plugin-content-update
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
@ -45,6 +51,7 @@ yarn add @vuepress-plume/plugin-content-update
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
``` ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { contentUpdatePlugin } from '@vuepress-plume/plugin-content-update'
|
||||
@ -55,6 +62,7 @@ export default defineUserConfig({
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
在 客户端文件中使用：
|
||||
|
||||
@ -15,19 +15,23 @@ permalink: /plugins/plugin-iconify/
|
||||
|
||||
::: code-tabs
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
npm install @vuepress-plume/plugin-iconify
|
||||
```
|
||||
|
||||
@tab:active yarn
|
||||
|
||||
``` sh
|
||||
yarn add @vuepress-plume/plugin-iconify
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
|
||||
``` sh
|
||||
pnpm add @vuepress-plume/plugin-iconify
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
@ -18,17 +18,21 @@ permalink: /plugins/plugin-netlify-functions/
|
||||
|
||||
::: code-tabs
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
npm install vuepress-plugin-netlify-functions
|
||||
```
|
||||
|
||||
@tab:active yarn
|
||||
|
||||
``` sh
|
||||
yarn add vuepress-plugin-netlify-functions
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
|
||||
``` sh
|
||||
pnpm add vuepress-plugin-netlify-functions
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
@ -10,6 +10,7 @@ permalink: /plugins/plugin-netlify-functions/functions/
|
||||
### 在一个 vuepress 项目中
|
||||
|
||||
在默认配置下，如果你 packages.json
|
||||
|
||||
``` json
|
||||
{
|
||||
"scripts": {
|
||||
@ -18,6 +19,7 @@ permalink: /plugins/plugin-netlify-functions/functions/
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
即， 你的 `sourceDir` 为 `src` 目录， 那么，你的functions目录则为 `src/.vuepress/functions`。
|
||||
|
||||
在这个目录下，直属的 `ts/js` 文件，均为一个个独立的 `function`， 不包括这个目录下的子目录。
|
||||
@ -33,6 +35,7 @@ src/.vuepress/functions
|
||||
### 在一个 vuepress plugin 项目中
|
||||
|
||||
以官方仓库插件的基本组织结构为例
|
||||
|
||||
``` sh
|
||||
src/node
|
||||
├─functions
|
||||
|
||||
@ -9,19 +9,23 @@ permalink: /plugins/plugin-netlify-functions/usage/
|
||||
|
||||
::: code-tabs
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
npm install vuepress-plugin-netlify-functions
|
||||
```
|
||||
|
||||
@tab:active yarn
|
||||
|
||||
``` sh
|
||||
yarn add vuepress-plugin-netlify-functions
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
|
||||
``` sh
|
||||
pnpm add vuepress-plugin-netlify-functions
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 在vuepress中使用
|
||||
@ -32,6 +36,7 @@ pnpm add vuepress-plugin-netlify-functions
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.{ts,js}
|
||||
|
||||
``` ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { netlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'
|
||||
@ -44,6 +49,7 @@ export default defineUserConfig({
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 编写 functions
|
||||
@ -58,6 +64,7 @@ export default defineUserConfig({
|
||||
|
||||
::: code-tabs
|
||||
@tab typescript
|
||||
|
||||
``` ts
|
||||
import * as path from 'node:path'
|
||||
import { App } from '@vuepress/core'
|
||||
@ -82,9 +89,11 @@ function myPlugin(): Plugin {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
在你的插件开发目录，假如是以下结构：
|
||||
|
||||
``` sh
|
||||
.
|
||||
└─src # 开发目录
|
||||
@ -110,6 +119,7 @@ async function fetchMyFunction() {
|
||||
// do something
|
||||
}
|
||||
```
|
||||
|
||||
就像调用一个普通接口一个样简单。
|
||||
|
||||
## 环境变量
|
||||
@ -127,14 +137,17 @@ async function fetchMyFunction() {
|
||||
|
||||
::: code-tabs
|
||||
@tab .env
|
||||
|
||||
```
|
||||
YOUR_ENV_VAR='your env var'
|
||||
```
|
||||
|
||||
@tab functions/my_function.ts
|
||||
|
||||
``` ts
|
||||
const YOUR_ENV_VAR = process.env.YOUR_ENV_VAR
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 示例
|
||||
|
||||
@ -13,19 +13,23 @@ permalink: /plugins/plugin-shikiji/
|
||||
|
||||
::: code-tabs
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
npm install @vuepress-plume/plugin-shikiji
|
||||
```
|
||||
|
||||
@tab:active yarn
|
||||
|
||||
``` sh
|
||||
yarn add @vuepress-plume/plugin-shikiji
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
|
||||
``` sh
|
||||
pnpm add @vuepress-plume/plugin-shikiji
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
@ -10,6 +10,7 @@ permalink: /config/plugins/
|
||||
## 配置
|
||||
|
||||
所有主题内部使用的插件， 均在 `plugins` 字段中进行配置。
|
||||
|
||||
``` js
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
@ -92,6 +92,7 @@ permalink: /config/basic/
|
||||
- `avatar.organization`: 用户所在组织/公司
|
||||
|
||||
示例：
|
||||
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
@ -141,6 +142,7 @@ export default {
|
||||
- `{ svg: string }`: 自定义图标，传入 svg 字符串
|
||||
|
||||
示例：
|
||||
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
@ -259,7 +261,9 @@ type NavItem = string | {
|
||||
activeMatch?: string
|
||||
}
|
||||
```
|
||||
|
||||
- 示例1：
|
||||
|
||||
``` js
|
||||
export default {
|
||||
theme: plumeTheme({
|
||||
@ -277,7 +281,9 @@ type NavItem = string | {
|
||||
}),
|
||||
}
|
||||
```
|
||||
|
||||
- 示例2：
|
||||
|
||||
``` js
|
||||
export default {
|
||||
theme: plumeTheme({
|
||||
|
||||
@ -15,6 +15,7 @@ permalink: /config/locales/
|
||||
|
||||
::: code-tabs
|
||||
@tab 单语言
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
@ -23,7 +24,9 @@ export default defineUserConfig({
|
||||
lang: 'zh-CN',
|
||||
})
|
||||
```
|
||||
|
||||
@tab 多语言
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
@ -40,6 +43,7 @@ export default defineUserConfig({
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 多语言配置
|
||||
|
||||
@ -15,6 +15,7 @@ permalink: /config/navigation/
|
||||
|
||||
::: code-tabs
|
||||
@tab default config
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
@ -28,12 +29,14 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
当开启了 多语言配置，则会生成对应语言的导航栏的默认配置：
|
||||
|
||||
::: code-tabs
|
||||
@tab default config
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
@ -62,6 +65,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
但是，通常情况下，随着站点内容变得越来越丰富，包括了 博客文章列表、notes、友情链接、 外部链接等等，
|
||||
@ -172,6 +176,7 @@ export default defineUserConfig({
|
||||
|
||||
::: code-tabs
|
||||
@tab navbar.ts
|
||||
|
||||
```ts
|
||||
import { defineNavbar } from 'vuepress-theme-plume'
|
||||
|
||||
@ -181,4 +186,5 @@ export default defineNavbar([
|
||||
// ... more
|
||||
])
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
@ -14,11 +14,19 @@ Markdown 的目标是实现「易读易写」。
|
||||
|
||||
## 概述
|
||||
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，
|
||||
并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，
|
||||
包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，
|
||||
然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
|
||||
因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
|
||||
因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。
|
||||
像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。
|
||||
假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
|
||||
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，
|
||||
这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。
|
||||
Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，
|
||||
如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
|
||||
## 用途
|
||||
|
||||
@ -34,7 +42,9 @@ Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强
|
||||
|
||||
不在 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。
|
||||
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。
|
||||
而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，
|
||||
可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
|
||||
举例来说，在 Markdown 文件里加上一段 HTML 表格:
|
||||
|
||||
@ -96,7 +106,9 @@ Markdown 将会把它转换为:
|
||||
4 < 5
|
||||
```
|
||||
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，
|
||||
这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，你要把所有的 `<` 和 `&`
|
||||
都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
|
||||
---
|
||||
|
||||
@ -106,7 +118,9 @@ Markdown 将会把它转换为:
|
||||
|
||||
一个段落是由一个以上相连接的行句组成，而一个以上的空行则会切分出不同的段落 (空行的定义是显示上看起来像是空行，便会被视为空行。比方说，若某一行只包含空白和 tab，则该行也会被视为空行) ，一般的段落不需要用空白或断行缩进。
|
||||
|
||||
「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，其它的格式会把每个断行都转成 `<br />` 标签。
|
||||
「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，
|
||||
这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，
|
||||
其它的格式会把每个断行都转成 `<br />` 标签。
|
||||
|
||||
<!-- markdownlint-disable MD038 -->
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ permalink: /guide/markdown/extensions/
|
||||
|
||||
标题会自动应用锚点。
|
||||
|
||||
#### 自定义锚点
|
||||
### 自定义锚点
|
||||
|
||||
要为标题指定自定义锚点而不是使用自动生成的锚点，请向标题添加后缀：
|
||||
|
||||
@ -27,7 +27,7 @@ permalink: /guide/markdown/extensions/
|
||||
主题默认对每个 md 文件自动生成一个新的 链接，并保存在对应的 md 文件的 frontmatter 的 `permalink` 中。
|
||||
你可以随时修改它们。
|
||||
|
||||
#### 内部链接
|
||||
### 内部链接
|
||||
|
||||
建议使用 生成的 `permalink` 作为内部链接的目标。
|
||||
|
||||
@ -39,7 +39,7 @@ permalink: /guide/markdown/extensions/
|
||||
|
||||
[Markdown](/guide/markdown/)
|
||||
|
||||
#### 外部链接
|
||||
### 外部链接
|
||||
|
||||
外部链接带有 `target="_blank" rel="noreferrer"` ：
|
||||
|
||||
@ -47,7 +47,7 @@ permalink: /guide/markdown/extensions/
|
||||
|
||||
## Github风格的表格
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
| Tables | Are | Cool |
|
||||
@ -57,7 +57,7 @@ permalink: /guide/markdown/extensions/
|
||||
| zebra stripes | are neat | $1 |
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
| Tables | Are | Cool |
|
||||
| ------------- | :-----------: | ----: |
|
||||
@ -67,13 +67,13 @@ permalink: /guide/markdown/extensions/
|
||||
|
||||
## Emoji :tada:
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
:tada: :100:
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
:tada: :100:
|
||||
|
||||
@ -81,13 +81,13 @@ permalink: /guide/markdown/extensions/
|
||||
|
||||
## 目录表
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
[[TOC]]
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
[[TOC]]
|
||||
|
||||
@ -97,7 +97,7 @@ permalink: /guide/markdown/extensions/
|
||||
|
||||
### 默认标题
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
::: note
|
||||
@ -125,7 +125,7 @@ This is a details block.
|
||||
:::
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
::: note
|
||||
This is a note box
|
||||
@ -155,7 +155,7 @@ This is a details block.
|
||||
|
||||
可以通过在容器的 "type" 之后附加文本来设置自定义标题。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
::: caution STOP
|
||||
@ -169,23 +169,25 @@ console.log('Hello, VitePress!')
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
::: caution STOP
|
||||
危险区域，请勿继续
|
||||
:::
|
||||
|
||||
::: details 点我查看代码
|
||||
|
||||
```js
|
||||
console.log('Hello, VitePress!')
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## GitHub 风格的警报
|
||||
|
||||
主题 同样支持以标注的方式渲染 [GitHub 风格的警报](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。它们和[自定义容器](#自定义容器)的渲染方式相同。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
> [!NOTE]
|
||||
@ -204,12 +206,11 @@ console.log('Hello, VitePress!')
|
||||
> 行为可能带来的负面影响。
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
> [!NOTE]
|
||||
> 强调用户在快速浏览文档时也不应忽略的重要信息。
|
||||
|
||||
> [!TIP]
|
||||
> 有助于用户更顺利达成目标的建议性信息。
|
||||
|
||||
> [!IMPORTANT]
|
||||
@ -226,7 +227,7 @@ console.log('Hello, VitePress!')
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||||
Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
@ -247,7 +248,7 @@ export default {
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -268,7 +269,7 @@ export default {
|
||||
|
||||
## 在代码块中实现行高亮
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js{4}
|
||||
@ -282,7 +283,7 @@ export default {
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```js{4}
|
||||
export default {
|
||||
@ -300,7 +301,7 @@ export default {
|
||||
- 多个单行：例如 `{4,7,9}`
|
||||
- 多行与单行：例如 `{4,7-13,16,23-27,40}`
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js{1,4,6-8}
|
||||
@ -318,7 +319,7 @@ export default { // Highlighted
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
@ -336,7 +337,7 @@ export default { // Highlighted
|
||||
|
||||
也可以使用 `// [!code highlight]` 注释实现行高亮。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
@ -350,7 +351,7 @@ export default {
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -368,7 +369,7 @@ export default {
|
||||
|
||||
此外，可以使用 `// [!code focus:<lines>]` 定义要聚焦的行数。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
@ -382,7 +383,7 @@ export default {
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -398,7 +399,7 @@ export default {
|
||||
|
||||
在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff，同时保留代码块的颜色。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
@ -413,7 +414,7 @@ export default {
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -430,7 +431,7 @@ export default {
|
||||
|
||||
在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
@ -445,7 +446,7 @@ export default {
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -460,7 +461,7 @@ export default {
|
||||
|
||||
## 代码块中 词高亮
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```ts
|
||||
@ -471,7 +472,7 @@ export function foo() { // [\!code word:Hello]
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```ts
|
||||
export function foo() { // [!code word:Hello]
|
||||
@ -482,7 +483,7 @@ export function foo() { // [!code word:Hello]
|
||||
|
||||
你还可以指定高亮显示的次数，例如 `[!code word:options:2]` 会高亮显示近两个 `options`。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```ts
|
||||
@ -493,7 +494,7 @@ console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
```ts
|
||||
// [!code word:options:2]
|
||||
@ -506,7 +507,7 @@ console.log(options.foo) // 这个不会被高亮显示
|
||||
|
||||
可以像这样对多个代码块进行分组：
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
::: code-tabs
|
||||
@ -535,10 +536,11 @@ export default config
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
@ -549,7 +551,9 @@ const config = {
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
@tab config.ts
|
||||
|
||||
```ts
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
@ -559,13 +563,14 @@ const config: UserConfig = {
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
你还可以通过 `@tab:active`
|
||||
|
||||
## 导入代码块
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
你可以使用下面的语法，从文件中导入代码块：
|
||||
|
||||
@ -573,7 +578,7 @@ export default config
|
||||
@[code](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
@[code](../../snippet/snippet-1.js)
|
||||
|
||||
@ -596,7 +601,7 @@ export default config
|
||||
|
||||
## 数学方程
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
||||
@ -611,7 +616,7 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
@ -628,13 +633,13 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
使用 `== ==` 进行标记。请注意两边需要有空格。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
|
||||
@ -643,21 +648,21 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
- 使用 `^ ^` 进行上角标标注。
|
||||
- 使用 `~ ~` 进行下角标标注。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
- 19^th^
|
||||
- H~2~O
|
||||
```
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
- 19^th^
|
||||
- H~2~O
|
||||
|
||||
## 自定义对齐
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
::: left
|
||||
@ -673,7 +678,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
::: left
|
||||
左对齐的内容
|
||||
@ -691,9 +696,10 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
|
||||
你可以使用特殊标记为 Markdown 元素添加属性。
|
||||
|
||||
**为图片添加属性**
|
||||
**为图片添加属性：**
|
||||
|
||||
这将为图片添加 一个 名为 `full-width` 的 class 属性，以及一个 `width` 属性，值为 `100%`。
|
||||
|
||||
```md
|
||||
{.full-width width="100%"}
|
||||
```
|
||||
@ -714,7 +720,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
|
||||
## 任务列表
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
- [ ] 任务 1
|
||||
@ -722,7 +728,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
- [ ] 任务 3
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
- [ ] 任务 1
|
||||
- [x] 任务 2
|
||||
@ -730,7 +736,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
|
||||
## 脚注
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
人生自古谁无死，留取丹心照汗青[^脚注1]。
|
||||
@ -738,7 +744,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
人生自古谁无死，留取丹心照汗青[^脚注1]。
|
||||
|
||||
|
||||
@ -11,10 +11,12 @@ permalink: /guide/markdown/experiment/
|
||||
为代码块添加支持 [TypeScript TwoSlash](https://www.typescriptlang.org/dev/twoslash/) 支持。
|
||||
在代码块内提供内联类型提示。
|
||||
|
||||
该功能由 [shiki](https://shiki.style/) 和 [@shikijs/twoslash](https://shiki.style/packages/twoslash) 提供支持，并整合在 [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji) 中。
|
||||
该功能由 [shiki](https://shiki.style/) 和 [@shikijs/twoslash](https://shiki.style/packages/twoslash) 提供支持，
|
||||
并整合在 [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji) 中。
|
||||
|
||||
> [!important]
|
||||
> 该功能当前仅在以下版本中通过可用性验证，在后续的所有的版本中均不能保证其可用性，请谨慎使用：
|
||||
>
|
||||
> - [x] `vuepress@2.0.0-rc.0`
|
||||
> - [x] `vuepress@2.0.0-rc.2`
|
||||
> - [x] `vuepress@2.0.0-rc.7`
|
||||
@ -82,7 +84,7 @@ const c = 1
|
||||
在项目根目录下，通过 `pnpm patch` 命令对 `@vuepress/markdown` 包进行补丁:
|
||||
|
||||
```sh
|
||||
$ pnpm patch @vuepress/markdown --edit-dir _tmp/vuepress__markdown
|
||||
pnpm patch @vuepress/markdown --edit-dir _tmp/vuepress__markdown
|
||||
```
|
||||
|
||||
该命令将会在你的项目根目录下生成一个 `_tmp/vuepress__markdown` 目录，该目录将会包含 `@vuepress/markdown` 包的源码。
|
||||
@ -110,7 +112,7 @@ const code = options.highlight?.(token.content, language.name, info || '') || md
|
||||
将源码修改进行 补丁提交，执行下面的命令：
|
||||
|
||||
```sh
|
||||
$ pnpm patch-commit '_tmp/vuepress__markdown'
|
||||
pnpm patch-commit '_tmp/vuepress__markdown'
|
||||
```
|
||||
|
||||
此命令将会在你的项目根目录下生成一个 `patch` 目录，该目录将会包含 `@vuepress/markdown` 包的补丁，
|
||||
@ -221,6 +223,7 @@ const welcome = 'Tudo bem gente?'
|
||||
const words = welcome.contains(' ')
|
||||
```
|
||||
````
|
||||
|
||||
```ts twoslash
|
||||
// @errors: 2339
|
||||
const welcome = 'Tudo bem gente?'
|
||||
|
||||
@ -72,7 +72,7 @@ permalink: /guide/markdown/advance/
|
||||
你可以在每个选项卡中使用 Vue 语法和组件，并且你可以访问 value 和 isActive，
|
||||
表示选项卡的绑定值和选项卡是否处于激活状态。
|
||||
|
||||
**输入**
|
||||
**输入：**
|
||||
|
||||
````
|
||||
::: tabs
|
||||
@ -90,7 +90,7 @@ corepack use pnpm@8
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
**输出：**
|
||||
|
||||
::: tabs
|
||||
@tab npm
|
||||
@ -132,13 +132,13 @@ corepack use pnpm@8
|
||||
|
||||
```md
|
||||
::: demo-wrapper img no-padding
|
||||
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
**输出：**
|
||||
::: demo-wrapper img no-padding
|
||||
|
||||
|
||||
:::
|
||||
|
||||
包含 markdown 语法：
|
||||
@ -153,6 +153,7 @@ corepack use pnpm@8
|
||||
|
||||
**输出：**
|
||||
::: demo-wrapper title="标题"
|
||||
|
||||
### 三级标题
|
||||
|
||||
这是示例容器中的内容。
|
||||
@ -206,12 +207,13 @@ corepack use pnpm@8
|
||||
:::
|
||||
```
|
||||
|
||||
__示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况图标：__
|
||||
**示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况图标：**
|
||||
|
||||
``` md
|
||||
::: caniuse css-matches-pseudo
|
||||
:::
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
::: caniuse css-matches-pseudo
|
||||
@ -248,6 +250,7 @@ __示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
@ -259,6 +262,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 语法
|
||||
@ -324,6 +328,7 @@ interface IncludeOptions {
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts{5-11}
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
@ -342,6 +347,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
此外，如果你想将 Markdown 文件直接放在实际文件旁边，但不希望它们呈现为页面，
|
||||
@ -350,6 +356,7 @@ export default defineUserConfig({
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
// 现在任何带有 `.snippet.md` 扩展名的文件都不会呈现为页面
|
||||
@ -363,6 +370,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 示例
|
||||
@ -370,6 +378,7 @@ export default defineUserConfig({
|
||||
在项目中有一个 `foo.snippet.md` 文件：
|
||||
:::: code-tabs
|
||||
@tab foo.snippet.md
|
||||
|
||||
```md
|
||||
### 三级标题
|
||||
|
||||
@ -385,6 +394,7 @@ export default defineUserConfig({
|
||||
通过 `<!-- @include: ./foo.snippet.md#snippet -->` 来引入。
|
||||
<!-- endregion snippet -->
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
使用 `<!-- @include: ./foo.snippet.md -->` 导入文件：
|
||||
@ -411,6 +421,7 @@ export default defineUserConfig({
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
@ -422,6 +433,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 语法
|
||||
@ -444,6 +456,7 @@ export default defineUserConfig({
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: tip 提示
|
||||
JSON 块是可选的，可用的配置详见[配置](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/config.html)
|
||||
:::
|
||||
@ -514,6 +527,7 @@ h1 {
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: normal-demo 一个使用浏览器不支持解析语言 Demo
|
||||
|
||||
@ -541,10 +555,13 @@ h1 {
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### 普通代码演示
|
||||
|
||||
格式：
|
||||
|
||||
```` md
|
||||
::: normal-demo 可选的标题文字
|
||||
|
||||
@ -574,6 +591,7 @@ h1 {
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document，请访问` `window.document`。
|
||||
:::
|
||||
@ -602,6 +620,7 @@ span {
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
@ -624,11 +643,13 @@ span {
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### Vue 代码演示
|
||||
|
||||
#### 格式
|
||||
|
||||
```` md
|
||||
::: vue-demo 可选的标题文字
|
||||
|
||||
@ -659,6 +680,7 @@ export default {
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
|
||||
- 你只能使用 `Vue3`。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
@ -705,6 +727,7 @@ export default {
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: vue-demo 一个 Vue Composition 演示
|
||||
|
||||
@ -744,6 +767,7 @@ export default {
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### React 代码演示
|
||||
@ -770,6 +794,7 @@ export default {
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
|
||||
- 使用 React 的时候，为了解析 JSX 必须引入 Babel，此过程由插件自动完成。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
@ -809,6 +834,7 @@ export default () => {
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
@ -841,4 +867,5 @@ export default () => {
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
@ -23,6 +23,7 @@ VuePress 是一个 [静态站点生成器](https://en.wikipedia.org/wiki/Static_
|
||||
## 优势
|
||||
|
||||
与 vuepress 默认主题相比：
|
||||
|
||||
- 大幅度优化了界面、交互，更具美观度，更好的用户体验。
|
||||
- 同时，还添加了大量的丰富实用的功能，如 代码分组、提示容器、任务列表、数学公式、代码演示、
|
||||
内容搜索、文章评论、加密 等。
|
||||
|
||||
@ -61,7 +61,12 @@ export default defineUserConfig({
|
||||
|
||||
## SEO 介绍
|
||||
|
||||
搜索引擎优化 (**S**earch **E**ngine **O**ptimization)，是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。 所谓“针对搜索引擎作最优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。搜索引擎优化就是通过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是做好用户体验。
|
||||
搜索引擎优化 (**S**earch **E**ngine **O**ptimization)，是一种透过了解搜索引擎的运作规则来调整网站，
|
||||
以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最
|
||||
前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。
|
||||
所谓“针对搜索引擎作最优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做
|
||||
一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。
|
||||
搜索引擎优化就是通过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是做好用户体验。
|
||||
|
||||
## 相关文档
|
||||
|
||||
|
||||
@ -28,15 +28,19 @@ export default a
|
||||
|
||||
::: code-tabs
|
||||
@tab foo.js
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
|
||||
export default a
|
||||
```
|
||||
|
||||
@tab bar.js
|
||||
|
||||
```js
|
||||
const b = 1
|
||||
|
||||
export default b
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
@ -15,7 +15,8 @@ permalink: /guide/features/content-search/
|
||||
|
||||
## 本地内容搜索
|
||||
|
||||
本地内容搜索由 [@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search) 插件提供支持。
|
||||
本地内容搜索由
|
||||
[@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search) 插件提供支持。
|
||||
|
||||
该插件使用 [minisearch](https://github.com/lucaong/minisearch) 进行内容搜索。
|
||||
|
||||
@ -41,7 +42,8 @@ export default defineUserConfig({
|
||||
该插件会根据你的页面，在本地生成搜索索引，然后在用户访问站点时加载搜索索引文件。
|
||||
换句话说，这是一个轻量级的内置搜索能力，不会进行任何外部请求。
|
||||
|
||||
然而，当你的站点包含大量页面时，搜索索引文件也会变得非常大，它可能会拖慢你的页面加载速度。在这种情况下，我们建议你使用更成熟的解决方案 - [Algolia DocSearch](#algolia-docsearch) 。
|
||||
然而，当你的站点包含大量页面时，搜索索引文件也会变得非常大，它可能会拖慢你的页面加载速度。
|
||||
在这种情况下，我们建议你使用更成熟的解决方案 - [Algolia DocSearch](#algolia-docsearch) 。
|
||||
|
||||
## Algolia DocSearch
|
||||
|
||||
@ -66,9 +68,14 @@ export default defineUserConfig({
|
||||
|
||||
### 获取搜索索引
|
||||
|
||||
你需要 [提交你的网站 URL](https://docsearch.algolia.com/apply/) 来加入 DocSearch 项目。当你的索引成功创建后， DocSearch 团队会将 [apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和 [indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname) 发送到你的邮箱。接下来，你就可以配置该插件，在 VuePress 中启用 DocSearch 了。
|
||||
你需要 [提交你的网站 URL](https://docsearch.algolia.com/apply/) 来加入 DocSearch 项目。
|
||||
当你的索引成功创建后， DocSearch 团队会将 [apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和 [indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname)
|
||||
发送到你的邮箱。接下来，你就可以配置该插件，在 VuePress 中启用 DocSearch 了。
|
||||
|
||||
或者，你也可以 [运行你自己的爬虫](https://docsearch.algolia.com/docs/run-your-own/) 来创建索引，然后使用你自己的 [appId](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#appId), [apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和 [indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname) 来配置该插件。
|
||||
或者，你也可以 [运行你自己的爬虫](https://docsearch.algolia.com/docs/run-your-own/) 来创建索引，
|
||||
然后使用你自己的 [appId](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#appId),
|
||||
[apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和
|
||||
[indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname) 来配置该插件。
|
||||
|
||||
以下是本主题使用的 爬虫配置示例, 你可以前往 [Algolia Crawler](https://crawler.algolia.com/admin/crawlers/)
|
||||
根据你的需求进行修改:
|
||||
@ -214,6 +221,7 @@ new Crawler({
|
||||
### 配置示例
|
||||
|
||||
以下是本主题使用的配置：
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
@ -83,6 +83,7 @@ export default defineUserConfig({
|
||||
`encrypt.rules` 的 **键** 将作为 匹配规则，**值** 将作为 该规则对应的密码，可以设置 一个或多个密码。
|
||||
|
||||
:::tip 说明
|
||||
|
||||
- 密码 必须是 普通的字符串。
|
||||
- 如果是 加密的是 整个目录，解锁时也是解锁整个目录，而不是解锁该目录下的某个文章。
|
||||
- `encrypt.admin` 也可用于解锁 **部分加密** 的页面。
|
||||
|
||||
@ -15,6 +15,7 @@ permalink: /guide/friend-links/
|
||||
|
||||
::: code-tabs
|
||||
@tab friends.md
|
||||
|
||||
```md
|
||||
---
|
||||
friends: true
|
||||
@ -34,6 +35,7 @@ list:
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
---
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
主题会根据 配置信息 生成友情链接页。 如果未配置 `permalink` ，默认为 `/friends/`。
|
||||
|
||||
@ -16,6 +16,7 @@ permalink: /guide/features/comments/
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
@ -36,6 +37,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 服务提供商
|
||||
@ -51,6 +53,7 @@ export default defineUserConfig({
|
||||
- `Artalk` 是一款简洁的自托管评论系统，你可以在服务器上轻松部署并置入前端页面中。[查看文档](https://ecosystem.vuejs.press/zh/plugins/comment/artalk/)
|
||||
|
||||
::: tip 推荐的评论服务
|
||||
|
||||
- 面向程序员和开发人员: Giscus
|
||||
- 面向公众: Waline
|
||||
:::
|
||||
@ -72,10 +75,12 @@ Giscus 是一个基于 GitHub Discussion 的评论系统，启用简便。
|
||||
|
||||
### 配置
|
||||
|
||||
请配置 `provider: 'Giscus'` 并将 `data-repo`, `data-repo-id`, `data-category` 和 `data-category-id` 作为插件选项传入 `repo`, `repoId`, `category`, `categoryId` 。
|
||||
请配置 `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'
|
||||
@ -95,6 +100,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 主题
|
||||
@ -114,34 +120,42 @@ export default defineUserConfig({
|
||||
|
||||
::: 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. 点击左上角 [创建应用](https://console.leancloud.app/apps) 并起一个你喜欢的名字 (请选择免费的开发版):
|
||||
|
||||
|
||||
|
||||
2. 进入应用，选择左下角的 `设置` > `应用 Key`。你可以看到你的 `APP ID`,`APP Key` 和 `Master Key`。请记录它们，以便后续使用。
|
||||
3. 进入应用，选择左下角的 `设置` > `应用 Key`。你可以看到你的 `APP ID`,`APP Key` 和 `Master Key`。
|
||||
请记录它们，以便后续使用。
|
||||
|
||||
|
||||
|
||||
::: warning 国内版需要完成备案接入
|
||||
|
||||
如果你正在使用 Leancloud 国内版 ([leancloud.cn](https://leancloud.cn))，我们推荐你切换到国际版 ([leancloud.app](https://leancloud.app))。否则，你需要为应用额外绑定**已备案**的域名，同时购买独立 IP 并完成备案接入:
|
||||
如果你正在使用 Leancloud 国内版 ([leancloud.cn](https://leancloud.cn))，我们推荐你切换到国际版 ([leancloud.app](https://leancloud.app))。
|
||||
否则，你需要为应用额外绑定**已备案**的域名，同时购买独立 IP 并完成备案接入:
|
||||
|
||||
- 登录国内版并进入需要使用的应用
|
||||
- 选择 `设置` > `域名绑定` > `API 访问域名` > `绑定新域名` > 输入域名 > `确定`。
|
||||
@ -164,11 +178,11 @@ yarn add @waline/client
|
||||
|
||||
:::
|
||||
|
||||
1. 输入一个你喜欢的 Vercel 项目名称并点击 `Create` 继续:
|
||||
2. 输入一个你喜欢的 Vercel 项目名称并点击 `Create` 继续:
|
||||
|
||||
|
||||
|
||||
2. 此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。
|
||||
3. 此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。
|
||||
|
||||
|
||||
|
||||
@ -176,7 +190,9 @@ yarn add @waline/client
|
||||
|
||||
|
||||
|
||||
3. 点击顶部的 `Settings` - `Environment Variables` 进入环境变量配置页，并配置三个环境变量 `LEAN_ID`, `LEAN_KEY` 和 `LEAN_MASTER_KEY` 。它们的值分别对应上一步在 LeanCloud 中获得的 `APP ID`, `APP KEY`, `Master Key`。
|
||||
4. 点击顶部的 `Settings` - `Environment Variables` 进入环境变量配置页，
|
||||
并配置三个环境变量 `LEAN_ID`, `LEAN_KEY` 和 `LEAN_MASTER_KEY` 。
|
||||
它们的值分别对应上一步在 LeanCloud 中获得的 `APP ID`, `APP KEY`, `Master Key`。
|
||||
|
||||
|
||||
|
||||
@ -186,11 +202,11 @@ yarn add @waline/client
|
||||
|
||||
:::
|
||||
|
||||
4. 环境变量配置完成之后点击顶部的 `Deployments` 点击顶部最新的一次部署右侧的 `Redeploy` 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
|
||||
5. 环境变量配置完成之后点击顶部的 `Deployments` 点击顶部最新的一次部署右侧的 `Redeploy` 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
|
||||
|
||||
|
||||
|
||||
5. 此时会跳转到 `Overview` 界面开始部署，等待片刻后 `STATUS` 会变成 `Ready`。此时请点击 `Visit` ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。
|
||||
6. 此时会跳转到 `Overview` 界面开始部署，等待片刻后 `STATUS` 会变成 `Ready`。此时请点击 `Visit` ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。
|
||||
|
||||
|
||||
|
||||
@ -198,17 +214,17 @@ yarn add @waline/client
|
||||
|
||||
1. 点击顶部的 `Settings` - `Domains` 进入域名配置页
|
||||
|
||||
1. 输入需要绑定的域名并点击 `Add`
|
||||
2. 输入需要绑定的域名并点击 `Add`
|
||||
|
||||
|
||||
|
||||
2. 在域名服务器商处添加新的 `CNAME` 解析记录
|
||||
3. 在域名服务器商处添加新的 `CNAME` 解析记录
|
||||
|
||||
| Type | Name | Value |
|
||||
| ----- | ------- | -------------------- |
|
||||
| CNAME | example | cname.vercel-dns.com |
|
||||
|
||||
3. 等待生效，你可以通过自己的域名来访问了:tada:
|
||||
4. 等待生效，你可以通过自己的域名来访问了:tada:
|
||||
|
||||
- 评论系统：example.your-domain.com
|
||||
- 评论管理：example.your-domain.com/ui
|
||||
|
||||
@ -26,7 +26,7 @@ permalink: /guide/blog/
|
||||
主题允许你展示博主的基本信息。
|
||||
|
||||
::: center
|
||||
{style="max-width:250px;"}
|
||||
{style="max-width:250px;"}
|
||||
:::
|
||||
|
||||
### 配置
|
||||
@ -35,6 +35,7 @@ permalink: /guide/blog/
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
@ -47,6 +48,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 文章元数据
|
||||
|
||||
@ -20,23 +20,30 @@ permalink: /guide/chart/chartjs/
|
||||
|
||||
::: 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({
|
||||
@ -48,6 +55,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
@ -20,23 +20,30 @@ permalink: /guide/chart/echarts/
|
||||
|
||||
::: 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({
|
||||
@ -48,6 +55,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
@ -20,23 +20,30 @@ permalink: /guide/chart/flowchart/
|
||||
|
||||
::: 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({
|
||||
@ -48,6 +55,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
@ -166,6 +174,7 @@ st->e
|
||||
`[Variable]->operation: [Text]`
|
||||
|
||||
::: md-demo 操作
|
||||
|
||||
```flow
|
||||
process=>operation: 操作
|
||||
e=>end: 结束
|
||||
@ -180,6 +189,7 @@ process->e
|
||||
`[Variable]->inputoutput: [Text]`
|
||||
|
||||
::: md-demo 输入输出
|
||||
|
||||
```flow
|
||||
process=>inputoutput: 输入输出
|
||||
e=>end: 结束
|
||||
@ -194,6 +204,7 @@ process->e
|
||||
`[Variable]->subroutine: [Text]`
|
||||
|
||||
::: md-demo 子程序
|
||||
|
||||
```flow
|
||||
process=>subroutine: 子程序
|
||||
e=>end: 结束
|
||||
@ -211,6 +222,7 @@ process->e
|
||||
- `[Variable]([noText])->[Position]`
|
||||
|
||||
::: md-demo 条件
|
||||
|
||||
```flow
|
||||
cond=>condition: 是否执行操作?
|
||||
process=>operation: 操作
|
||||
@ -231,6 +243,7 @@ cond(no)->e
|
||||
- `[Variable](path1, direction)->[Position]`
|
||||
|
||||
::: md-demo 平行
|
||||
|
||||
```flow
|
||||
para=>parallel: 平行任务
|
||||
process=>operation: 操作
|
||||
|
||||
@ -20,23 +20,30 @@ permalink: /guide/chart/mermaid/
|
||||
|
||||
::: 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({
|
||||
@ -48,6 +55,7 @@ export default defineUserConfig({
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
@ -93,7 +101,8 @@ export default defineUserConfig({
|
||||
|
||||
## 高级
|
||||
|
||||
你可以在 [客户端配置文件](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 配置:
|
||||
你可以在 [客户端配置文件](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'
|
||||
|
||||
@ -12,6 +12,7 @@ permalink: /guide/quick-start/
|
||||
- [pnpm 8+](https://pnpm.io/zh/) 或 [Yarn 2+](https://yarnpkg.com/)
|
||||
|
||||
::: info 提示
|
||||
|
||||
- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要安装 `vue` 作为 peer-dependencies 。
|
||||
- 使用 [Yarn 2+](https://yarnpkg.com/) 时，你需要在 `.yarnrc.yml` 文件中设置 `nodeLinker: 'node-modules'` 。
|
||||
:::
|
||||
@ -22,7 +23,7 @@ permalink: /guide/quick-start/
|
||||
|
||||
### 步骤 1
|
||||
|
||||
**创建一个新文件夹，并进入目录**
|
||||
**创建一个新文件夹，并进入目录：**
|
||||
|
||||
``` sh
|
||||
mkdir my-blog
|
||||
@ -31,41 +32,50 @@ cd my-blog
|
||||
|
||||
### 步骤 2
|
||||
|
||||
**初始化项目**
|
||||
**初始化项目：**
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
|
||||
``` sh
|
||||
git init
|
||||
pnpm init
|
||||
```
|
||||
|
||||
@tab yarn
|
||||
|
||||
``` sh
|
||||
git init
|
||||
yarn init
|
||||
```
|
||||
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
git init
|
||||
npm init
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 步骤 3
|
||||
|
||||
**安装相关依赖**
|
||||
**安装相关依赖：**
|
||||
|
||||
安装 `vuepress@next` 和 `vuepress-theme-plume` 作为本地依赖。
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
# 安装 vuepress
|
||||
pnpm add -D vuepress@next vue
|
||||
# 安装 主题和打包工具
|
||||
pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
|
||||
@tab yarn
|
||||
|
||||
``` sh
|
||||
# 安装 vuepress
|
||||
yarn add -D vuepress@next
|
||||
@ -74,12 +84,14 @@ yarn add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
# 安装 vuepress
|
||||
npm i -D vuepress@next
|
||||
# 安装 主题和打包工具
|
||||
npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::warning
|
||||
@ -93,6 +105,7 @@ npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
|
||||
::: code-tabs
|
||||
@tab package.json
|
||||
|
||||
``` json
|
||||
{
|
||||
"scripts": {
|
||||
@ -101,6 +114,7 @@ npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
`vuepress` 默认将文档源码放在 `docs` 目录下。
|
||||
@ -111,17 +125,21 @@ npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
|
||||
::: code-tabs
|
||||
@tab .gitignore
|
||||
|
||||
``` txt
|
||||
node_modules
|
||||
.temp
|
||||
.cache
|
||||
```
|
||||
|
||||
@tab sh
|
||||
|
||||
``` sh
|
||||
echo 'node_modules' >> .gitignore
|
||||
echo '.temp' >> .gitignore
|
||||
echo '.cache' >> .gitignore
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 步骤 6
|
||||
@ -130,6 +148,7 @@ echo '.cache' >> .gitignore
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.js
|
||||
|
||||
``` ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { viteBundler } from '@vuepress/bundler-vite'
|
||||
@ -144,6 +163,7 @@ export default defineUserConfig({
|
||||
bundler: viteBundler(),
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::warning
|
||||
@ -158,31 +178,38 @@ export default defineUserConfig({
|
||||
声明首页配置。
|
||||
::: code-tabs
|
||||
@tab README.md
|
||||
|
||||
``` md
|
||||
---
|
||||
home: true
|
||||
---
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 步骤 8
|
||||
|
||||
**在本地服务器启动你的文档站点**
|
||||
**在本地服务器启动你的文档站点：**
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
@tab yarn
|
||||
|
||||
``` sh
|
||||
yarn dev
|
||||
```
|
||||
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Vuepress 会在 [http://localhost:8080](http://localhost:8080) 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
|
||||
|
||||
@ -26,14 +26,17 @@ permalink: /guide/write/
|
||||
### 文件夹命名约定
|
||||
|
||||
由于文件夹名称将作为分类名称，且不在主题配置中进行排序配置，对于有排序需要的场景，使用以下规则进行命名
|
||||
|
||||
``` ts
|
||||
const dir = /\d+\.[^]+/
|
||||
// 即 数字 + . + 分类名称
|
||||
// 如： 1.前端
|
||||
```
|
||||
|
||||
数字将作为 __排序__ 的依据。 如果不带数字，则以默认的规则进行排序。
|
||||
|
||||
__example:__
|
||||
|
||||
``` txt
|
||||
.{sourceDir}
|
||||
- 1.前端
|
||||
|
||||
@ -31,6 +31,7 @@ Style 文件的路径是 `.vuepress/styles/index.scss` 。
|
||||
你也可以利用它来覆盖默认主题的预定义 CSS 变量。
|
||||
|
||||
以下是部分预定义变量， 完整列表请参考 [vars.scss](https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/theme/src/client/styles/vars.scss)
|
||||
|
||||
```scss
|
||||
:root {
|
||||
/** 主题颜色 */
|
||||
|
||||
@ -14,6 +14,7 @@ permalink: /guide/custom-home/
|
||||
|
||||
::: code-tabs
|
||||
@tab README.md
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
@ -21,6 +22,7 @@ config:
|
||||
- type: custom
|
||||
---
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。
|
||||
@ -130,10 +132,10 @@ config:
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
**效果：**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-banner.png" />
|
||||
<img src="/images/custom-banner.png" alt="" />
|
||||
:::
|
||||
|
||||
### hero
|
||||
@ -166,7 +168,7 @@ interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
|
||||
}
|
||||
```
|
||||
|
||||
**示例**
|
||||
**示例：**
|
||||
|
||||
```md
|
||||
---
|
||||
@ -192,10 +194,10 @@ config:
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
**效果：**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-hero.png" />
|
||||
<img src="/images/custom-hero.png" alt="Theme Plume" />
|
||||
:::
|
||||
|
||||
### features
|
||||
@ -238,7 +240,7 @@ type FeatureIcon = string | {
|
||||
}
|
||||
```
|
||||
|
||||
**示例**
|
||||
**示例：**
|
||||
|
||||
```md
|
||||
---
|
||||
@ -286,10 +288,10 @@ config:
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
**效果：**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-features.png" />
|
||||
<img src="/images/custom-features.png" alt="" />
|
||||
:::
|
||||
|
||||
### text-image | image-text
|
||||
@ -314,7 +316,7 @@ type PlumeThemeImage =
|
||||
| { dark: string, light: string, alt?: string }
|
||||
```
|
||||
|
||||
**示例**
|
||||
**示例：**
|
||||
|
||||
```md
|
||||
---
|
||||
@ -359,14 +361,14 @@ config:
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
**效果：**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-image-text.png" />
|
||||
<img src="/images/custom-image-text.png" alt="image-text" />
|
||||
:::
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-text-image.png" />
|
||||
<img src="/images/custom-text-image.png" alt="text-image" />
|
||||
:::
|
||||
|
||||
### profile
|
||||
@ -390,7 +392,7 @@ type PlumeThemeImage =
|
||||
| { dark: string, light: string, alt?: string }
|
||||
```
|
||||
|
||||
**示例**
|
||||
**示例：**
|
||||
|
||||
```md
|
||||
---
|
||||
@ -404,10 +406,10 @@ config:
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
**效果：**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-profile.png" />
|
||||
<img src="/images/custom-profile.png" alt="profile" />
|
||||
:::
|
||||
|
||||
### custom
|
||||
@ -422,7 +424,7 @@ interface PlumeThemeHomeCustom extends PlumeHomeConfigBase {
|
||||
}
|
||||
```
|
||||
|
||||
**示例**
|
||||
**示例：**
|
||||
|
||||
````md
|
||||
---
|
||||
@ -450,10 +452,10 @@ yarn add vuepress@next vuepress-theme-plume
|
||||
:::
|
||||
````
|
||||
|
||||
**效果**
|
||||
**效果：**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-content.png" />
|
||||
<img src="/images/custom-content.png" alt="content" />
|
||||
:::
|
||||
|
||||
## 自定义区域类型
|
||||
@ -466,6 +468,7 @@ yarn add vuepress@next vuepress-theme-plume
|
||||
|
||||
::: code-tabs
|
||||
@tab your-component.vue
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { HomeBox, type PlumeHomeConfigBase } from 'vuepress-theme-plume/client'
|
||||
@ -487,11 +490,13 @@ const props = defineProps<PlumeHomeConfigBase & {
|
||||
</HomeBox>
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
在 `.vuepress/client.ts` 在 `enhance` 钩子中添加 组件
|
||||
::: code-tabs
|
||||
@tab .vuepress/client.ts
|
||||
|
||||
```ts
|
||||
import { defineClientConfig } from 'vuepress/client'
|
||||
import YourComponent from 'your-component.vue'
|
||||
@ -502,6 +507,7 @@ export default defineClientConfig({
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
然后，你就可以在 `README.md` 中使用 `your-component` 了。
|
||||
|
||||
@ -242,7 +242,8 @@ heroku login
|
||||
|
||||
## 云开发 CloudBase
|
||||
|
||||
[云开发 CloudBase](https://cloudbase.net/?site=vuepress) 是一个云原生一体化的 Serverless 云平台，支持静态网站、容器等多种托管能力，并提供简便的部署工具 [CloudBase Framework](https://cloudbase.net/framework.html?site=vuepress) 来一键部署应用。
|
||||
[云开发 CloudBase](https://cloudbase.net/?site=vuepress) 是一个云原生一体化的 Serverless 云平台，
|
||||
支持静态网站、容器等多种托管能力，并提供简便的部署工具 [CloudBase Framework](https://cloudbase.net/framework.html?site=vuepress) 来一键部署应用。
|
||||
|
||||
1. 全局安装 CloudBase CLI ：
|
||||
|
||||
@ -250,7 +251,8 @@ heroku login
|
||||
pnpm install -g @cloudbase/cli
|
||||
```
|
||||
|
||||
2. 在项目根目录运行以下命令一键部署 VuePress 应用，在部署之前可以先 [开通环境](https://console.cloud.tencent.com/tcb/env/index?tdl_anchor=ad&tdl_site=vuejs)：
|
||||
2. 在项目根目录运行以下命令一键部署 VuePress 应用，在部署之前可以先
|
||||
[开通环境](https://console.cloud.tencent.com/tcb/env/index?tdl_anchor=ad&tdl_site=vuejs)：
|
||||
|
||||
```bash
|
||||
cloudbase init --without-template
|
||||
|
||||
@ -11,7 +11,9 @@ pnpm add @vuepress-plume/plugin-auto-frontmatter
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-auto-frontmatter
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
// .vuepress/config.[jt]s
|
||||
import { autoFrontmatterPlugin } from '@vuepress-plume/plugin-auto-frontmatter'
|
||||
@ -49,6 +51,7 @@ export default {
|
||||
|
||||
- `formatter`
|
||||
配置`frontmatter`每个字段的生成规则。
|
||||
|
||||
```ts
|
||||
interface MarkdownFile {
|
||||
filepath: string
|
||||
|
||||
@ -11,7 +11,9 @@ pnpm add @vuepress-plume/plugin-baidu-tongji
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-baidu-tongji
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
// .vuepress/config.[jt]s
|
||||
import { baiduTongjiPlugin } from '@vuepress-plume/plugin-baidu-tongji'
|
||||
|
||||
@ -7,6 +7,7 @@ VuePress 2 插件
|
||||
在Markdown中添加 [can-i-use](https://caniuse.com/) 支持，这对于你在写前端技术博客时，说明某个feature的兼容性时特别有用。
|
||||
|
||||
## Install
|
||||
|
||||
``` sh
|
||||
npm install @vuepress-plume/plugin-caniuse
|
||||
# or
|
||||
@ -65,5 +66,6 @@ export default {
|
||||
::: caniuse css-matches-pseudo {-2,-1,1}
|
||||
:::
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
@ -12,7 +12,9 @@ pnpm add @vuepress-plume/plugin-content-update
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-content-update
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
// .vuepress/config.[jt]s
|
||||
import { contentUpdatePlugin } from '@vuepress-plume/plugin-content-update'
|
||||
|
||||
@ -9,7 +9,9 @@ pnpm add @vuepress-plume/plugin-copy-code
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-copy-code
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
// .vuepress/config.js
|
||||
import { copyCodePlugin } from '@vuepress-plume/plugin-copy-code'
|
||||
|
||||
@ -11,7 +11,9 @@ pnpm add @vuepress-plume/plugin-iconify
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-iconify
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
// .vuepress/config.[jt]s
|
||||
import { iconifyPlugin } from '@vuepress-plume/plugin-iconify'
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
English | [简体中文](./README.md)
|
||||
|
||||
# `vuepress-plugin-netlify-functions`
|
||||
|
||||
English | [简体中文](./README.md)
|
||||
|
||||
If your vuepress site is deployed on `netlify` and you want to be able to use `netlify functions` for `serverless`.
|
||||
|
||||
You may need this plugin to provide support.
|
||||
@ -10,8 +10,11 @@ You may need this plugin to provide support.
|
||||
|
||||
- On the Vuepress local server, start a `Netlify Functions` local service to help you debug `functions` locally.
|
||||
- Generate a usable `netlify.toml` and add the appropriate 'functions' configurations if you have already created`netlify.toml`
|
||||
- This plugin does not provide specific `function` scripts, only `netlify functions` support; It can be used directly in themes, directly in vuepress projects, or based on this plugin, new plugins can be developed to provide more detailed functionality support.
|
||||
- Use `dotenv` to provide support similar to `Netlify Environment variables` in the local service environment. Create `.env` files in the project root directory to hold development-time environment variables
|
||||
- This plugin does not provide specific `function` scripts, only `netlify functions` support;
|
||||
It can be used directly in themes, directly in vuepress projects, or based on this plugin,
|
||||
new plugins can be developed to provide more detailed functionality support.
|
||||
- Use `dotenv` to provide support similar to `Netlify Environment variables` in the local service
|
||||
environment. Create `.env` files in the project root directory to hold development-time environment variables
|
||||
|
||||
## Install
|
||||
|
||||
@ -73,7 +76,7 @@ plugin function
|
||||
|
||||
In the Vuepress configuration, or in the Vuepress topic configuration.
|
||||
|
||||
__options__
|
||||
#### options
|
||||
|
||||
- `options.sourceDirectory` functions source directory。
|
||||
|
||||
@ -93,9 +96,7 @@ __options__
|
||||
|
||||
Used in the plugin when developing the VuePress plugin
|
||||
|
||||
__app__: `App`
|
||||
|
||||
__options__
|
||||
- `app`: **App**
|
||||
|
||||
- `options.directory`
|
||||
|
||||
@ -103,4 +104,5 @@ __options__
|
||||
|
||||
## Example
|
||||
|
||||
- [vuepress-plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-page-collection) Log and display the number of page views/visits of blog articles by connecting `leanCloud` in functions based on `netlify-functions`
|
||||
- [vuepress-plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-page-collection)
|
||||
Log and display the number of page views/visits of blog articles by connecting `leanCloud` in functions based on `netlify-functions`
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
[English](./README.en-US.md) | 简体中文
|
||||
|
||||
# `vuepress-plugin-netlify-functions`
|
||||
|
||||
[English](./README.en-US.md) | 简体中文
|
||||
|
||||
如果你的 vuepress 站点是部署在 `netlify` 的，而且希望能够使用`netlify functions` 来做 `serverless`。
|
||||
|
||||
那么你可能需要本插件提供支持。
|
||||
|
||||
## 功能
|
||||
|
||||
- 在 vuepress 本地服务器上，启动一个 `netlify functions` 本地服务，帮助你在本地对 `functions` 进行调试。
|
||||
- 帮助生成一个 可用的 `netlify.toml` ，如果你已经创建了 `netlify.toml`，会添加合适的 `functions` 配置
|
||||
- 本插件不提供具体的 `function` 脚本,仅提供 `netlify functions` 支持；可以在主题中直接只用，也可以在 vuepress 项目中直接使用，也可以基于本插件，开发新的插件提供更详细的功能支持。
|
||||
@ -25,6 +26,7 @@ yarn add vuepress-plugin-netlify-functions
|
||||
## 使用
|
||||
|
||||
1. 在 vuepress 项目中，或者在一个 vuepress 主题中
|
||||
|
||||
``` js
|
||||
// .vuepress/config.[jt]s
|
||||
import { netlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'
|
||||
@ -39,6 +41,7 @@ yarn add vuepress-plugin-netlify-functions
|
||||
```
|
||||
|
||||
2. 在 vuepress plugin 中：
|
||||
|
||||
``` js
|
||||
import { useNetlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'
|
||||
|
||||
@ -70,7 +73,7 @@ yarn add vuepress-plugin-netlify-functions
|
||||
|
||||
在 vuepress 配置中，或者在 vuepress 主题配置中使用。
|
||||
|
||||
__options__
|
||||
#### options
|
||||
|
||||
- `options.sourceDirectory` functions 源文件夹。
|
||||
|
||||
@ -90,9 +93,7 @@ __options__
|
||||
|
||||
在 开发 vuepress 插件时， 在插件中使用
|
||||
|
||||
__app__: `App`
|
||||
|
||||
__options__
|
||||
- `app`: **App**
|
||||
|
||||
- `options.directory`
|
||||
|
||||
@ -108,4 +109,5 @@ __options__
|
||||
|
||||
### 插件开发示例
|
||||
|
||||
- [vuepress-plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-page-collection) 基于 netlify-functions 的，通过在 functions中连接 `leancloud` 实现 博客文章页 阅读数/访问次数 的记录与展示。
|
||||
- [vuepress-plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-page-collection)
|
||||
基于 netlify-functions 的，通过在 functions中连接 `leancloud` 实现 博客文章页 阅读数/访问次数 的记录与展示。
|
||||
|
||||
@ -9,6 +9,7 @@ pnpm add @vuepress-plume/plugin-notes-data
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-notes-data
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
|
||||
@ -9,11 +9,13 @@
|
||||
- 为什么是在 `netlify functions` 中 连接 `leancloud` ，而不是直接在 web客户端中请求 `leancloud` ?
|
||||
|
||||
这是出于数据安全的角度考虑，避免直接在浏览器可见的代码中暴露私密的鉴权信息。
|
||||
|
||||
## 使用方式
|
||||
|
||||
> (仅示例，本插件未发布到 npm)
|
||||
|
||||
- 在 vuepress 配置插件
|
||||
|
||||
``` ts
|
||||
export default defineUserConfig({
|
||||
plugins: [
|
||||
@ -21,27 +23,33 @@
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
- 在需要做页面记录的路由级组件中引入`<PageCollection>`组件
|
||||
|
||||
``` html
|
||||
<Page>
|
||||
<PageCollection />
|
||||
</Page>
|
||||
```
|
||||
|
||||
- 在项目根目录 新建 `.env` 文件
|
||||
> 开发时使用，发布到生产时，需要在 netlify 中配置 环境变量。
|
||||
> 同时，需要将 `.env` 文件添加到 `.ignore`中，避免暴露
|
||||
```
|
||||
|
||||
```sh
|
||||
LEAN_CLOUD_APP_ID='your leancloud appId'
|
||||
LEAN_CLOUD_APP_KEY='your leancloud appKey'
|
||||
LEAN_CLOUD_MASTER_KEY='your leancloud masterKey'
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
``` html
|
||||
阅读数：99
|
||||
```
|
||||
|
||||
## 结构
|
||||
|
||||
``` SH
|
||||
.
|
||||
├── database # leancloud-storage
|
||||
|
||||
@ -11,7 +11,9 @@ pnpm add @vuepress-plume/plugin-search
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-search
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
// .vuepress/config.[jt]s
|
||||
import { searchPlugin } from '@vuepress-plume/plugin-search'
|
||||
|
||||
@ -11,6 +11,7 @@ pnpm add @vuepress-plume/plugin-shikiji
|
||||
# or
|
||||
yarn add @vuepress-plume/plugin-shikiji
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
|
||||
25
readme.md
25
readme.md
@ -1,12 +1,9 @@
|
||||
<h1 align="center">vuepress-theme-plume</h1>
|
||||
<p align="center">
|
||||
<img src="/preview/plume.svg" width="200px" />
|
||||
<img src="/preview/plume.svg" width="200px" alt="plume" />
|
||||
</p>
|
||||
|
||||
<h2 align="center">vuepress-theme-plume</h2>
|
||||
|
||||
[](https://www.npmjs.com/package/vuepress-theme-plume)
|
||||
[](https://www.npmjs.com/package/vuepress-theme-plume)
|
||||
|
||||
|
||||
|
||||
|
||||
一个简约的，干净的，容易上手的 vuepress 主题，适用于博客和文档。
|
||||
@ -74,18 +71,18 @@ __options__ : `PlumeThemeOptions`
|
||||
|
||||
### 效果图
|
||||
|
||||
**home page**
|
||||
#### home page
|
||||
|
||||
|
||||
|
||||
|
||||
**blog page**
|
||||
#### blog page
|
||||
|
||||
|
||||
|
||||
|
||||
**post page**
|
||||
#### post page
|
||||
|
||||
|
||||
|
||||
|
||||
**note page**
|
||||
#### note page
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
# vuepress-theme-plume
|
||||
|
||||
<p align="center">
|
||||
<img src="https://github.com/pengzhanbo/vuepress-theme-plume/raw/main/preview/plume.svg" width="200px" />
|
||||
<img src="https://github.com/pengzhanbo/vuepress-theme-plume/raw/main/preview/plume.svg" width="200px" alt="vuepress=theme-plume" />
|
||||
</p>
|
||||
|
||||
[](https://www.npmjs.com/package/vuepress-theme-plume)
|
||||
[](https://www.npmjs.com/package/vuepress-theme-plume)
|
||||
|
||||
|
||||
|
||||
|
||||
一个简约的，干净的，容易上手的 vuepress 主题，适用于博客和文档。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user