`、``、`` 等标签，必须在前后加上空行，以利与内容区隔。而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `
` 标签。
+
+举例来说，在 Markdown 文件里加上一段 HTML 表格:
+
+```md
+This is a regular paragraph.
+
+
+
+This is another regular paragraph.
+```
+
+请注意，Markdown 语法在 HTML 块标签中将不会被进行处理。例如，你无法在 HTML 块内使用 Markdown 形式的 `*强调*`。
+
+### 特殊字元自动转换
+
+在 HTML 文件中，有两个字元需要特殊处理: `<` 和 `&` 。 `<` 符号用于起始标签，`&` 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 `<` 和 `&`。
+
+`&` 符号其实很容易让写作网络文件的人感到困扰，如果你要打「AT&T」 ，你必须要写成「`AT&T`」 ，还得转换网址内的 `&` 符号，如果你要链接到 `http://images.google.com/images?num=30&q=larry+bird`
+
+你必须要把网址转成:
+
+```html
+http://images.google.com/images?num=30&q=larry+bird
+```
+
+才能放到链接标签的 `href` 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。
+
+Markdown 允许你直接使用这些符号，但是你要小心跳脱字元的使用，如果你是在 HTML 实体中使用 `&` 符号的话，它不会被转换，而在其它情形下，它则会被转换成 `&`。所以你如果要在文件中插入一个著作权的符号，你可以这样写:
+
+```md
+©
+```
+
+Markdown 将不会对这段文字做修改，但是如果你这样写:
+
+```md
+AT&T
+```
+
+Markdown 就会将它转为:
+
+```html
+AT&T
+```
+
+类似的状况也会发生在 `<` 符号上，因为 Markdown 支持 [行内 HTML](#行内-html) ，如果你是使用 `<` 符号作为 HTML 标签使用，那 Markdown 也不会对它做任何转换，但是如果你是写:
+
+```md
+4 < 5
+```
+
+Markdown 将会把它转换为:
+
+```html
+4 < 5
+```
+
+不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
+
+---
+
+## 块元素
+
+### 段落和换行
+
+一个段落是由一个以上相连接的行句组成，而一个以上的空行则会切分出不同的段落 (空行的定义是显示上看起来像是空行，便会被视为空行。比方说，若某一行只包含空白和 tab，则该行也会被视为空行) ，一般的段落不需要用空白或断行缩进。
+
+「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，其它的格式会把每个断行都转成 `
+ Bird
+ McHale
+ Parish
+
+```
+
+如果你的列表标记写成:
+
+```md
+1. Bird
+1. McHale
+1. Parish
+```
+
+你都会得到完全相同的 HTML 输出。重点在于，你可以让 Markdown 文件的列表数字和输出的结果相同，或是你懒一点都写作 `1` 你可以完全不用在意数字的正确性。
+
+列表项目标记通常是放在最左边，但是其实也可以缩进，最多三个空白，项目标记后面则一定要接着至少一个空白或 tab。
+
+要让列表看起来更漂亮，你可以把内容用固定的缩进整理好:
+
+```md
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+ viverra nec, fringilla in, laoreet vitae, risus.
+- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+ Suspendisse id sem consectetuer libero luctus adipiscing.
+```
+
+但是如果你很懒，那也不一定需要:
+
+```md
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+ viverra nec, fringilla in, laoreet vitae, risus.
+- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+ Suspendisse id sem consectetuer libero luctus adipiscing.
+```
+
+如果列表项目间用空行分开， Markdown 会把项目的内容在输出时用 `` 标签包起来，举例来说:
+
+```md
+- Bird
+- Magic
+```
+
+会被转换为:
+
+```html
+
+```
+
+但是这个:
+
+```md
+- Bird
+
+- Magic
+```
+
+会被转换为:
+
+```html
+
+```
+
+列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空白或是一个 tab :
+
+```md
+1. This is a list item with two paragraphs. Lorem ipsum dolor
+ sit amet, consectetuer adipiscing elit. Aliquam hendrerit
+ mi posuere lectus.
+
+ Vestibulum enim wisi, viverra nec, fringilla in, laoreet
+ vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
+ sit amet velit.
+
+2. Suspendisse id sem consectetuer libero luctus adipiscing.
+```
+
+如果你每行都有缩进，看起来会看好很多，当然，再次地，如果你很懒惰，Markdown 也允许:
+
+```md
+- This is a list item with two paragraphs.
+
+ This is the second paragraph in the list item. You're
+ only required to indent the first line. Lorem ipsum dolor
+ sit amet, consectetuer adipiscing elit.
+
+- Another item in the same list.
+```
+
+如果要在列表项目内放进引言，那 `>` 就需要缩进:
+
+```md
+- A list item with a blockquote:
+
+ > This is a blockquote
+ > inside a list item.
+```
+
+当然，项目列表很可能会不小心产生，像是下面这样的写法:
+
+```md
+1986. What a great season.
+```
+
+换句话说，也就是在行首出现*数字-句点-空白*，要避免这样的状况，你可以在句点前面加上反斜线。
+
+```md
+1986\. What a great season.
+```
+
+### 代码块
+
+和代码相关的写作或是标签语言原始码通常会有已经排版好的代码块，通常这些块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown 会用 `` 和 `` 标签来把代码块包起来。
+
+要在 Markdown 中建立代码块很简单，只要简单地缩进 4 个空白或是 1 个 tab 就可以，例如，下面的输入:
+
+```md
+This is a normal paragraph:
+
+This is a code block.
+```
+
+Markdown 会转换成:
+
+```html
+This is a normal paragraph:
+
+
+ This is a code block.
+
+```
+
+这里的缩进 (4 个空白或是 1 个 tab) ，都会被移除，例如:
+
+```md
+Here is an example of AppleScript:
+
+tell application "Foo"
+beep
+end tell
+```
+
+会被转换为:
+
+```html
+Here is an example of AppleScript:
+
+tell application "Foo"
+ beep
+end tell
+
+ <div class="footer">
+ © 2004 Foo Corporation
+</div>
+
+```
+
+代码块中，一般的 Markdown 语法不会被转换，像是星号便只是星号，这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。
+
+如果你想要在代码块里输入用 Markdown 表示的代码库，你可以进行嵌套。
+
+`````md
+````md
+```js
+const a = 1;
+```
+````
+`````
+
+会渲染为
+
+````md
+```js
+const a = 1;
+```
+````
+
+### 分隔线
+
+你可以在一行中用三个或以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号中间插入空白。下面每种写法都可以建立分隔线:
+
+```html
+---(建议) * * * *** ***** - - - ---------------------------------------
+```
+
+## 行内元素
+
+### 链接
+
+Markdown 支持两种形式的链接语法: *行内*和*参考*两种形式。
+
+不管是哪一种，链接的文字都是用 `[方括号]` 来标记。
+
+要建立一个行内形式的链接，只要在方块括号后面马上接着括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如:
+
+```html
+This is [an example](http://example.com/ "Title") inline link. [This
+link](http://example.net/) has no title attribute.
+```
+
+会产生:
+
+```html
+
+ This is an example inline
+ link.
+
+
+This link has no title attribute.
+```
+
+如果你是要链接到同样主机的资源，你可以使用相对路径:
+
+```md
+See my [About](/about/) page for details.
+```
+
+参考形式的链接使用另外一个方括号接在链接文字的括号后面，而在第二个方括号里面要填入用以辨识链接的标签:
+
+```md
+This is [an example][id] reference-style link.
+```
+
+接着，在文件的任意处，你可以把这个标签的链接内容定义出来:
+
+```md
+[id]: http://example.com/ "Optional Title Here"
+```
+
+链接定义的形式为:
+
+- 方括号，输入链接的标识 ID
+- 冒号
+- 一个以上的空白或 tab
+- 链接的网址
+- 选择性地添加 title 内容，可以用单引号、双引号或是括号包括
+
+下面这三种链接的定义相同:
+
+```md
+[foo]: http://example.com/ "Optional Title Here"
+[foo]: http://example.com/ "Optional Title Here"
+[foo]: http://example.com/ "Optional Title Here"
+```
+
+**请注意:** 有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。
+
+链接网址也可以用方括号包起来:
+
+```md
+[id]: http://example.com/ "Optional Title Here"
+```
+
+你也可以把 title 属性放到下一行，也可以加一些缩进，网址太长的话，这样会比较好看:
+
+```md
+[id]: http://example.com/longish/path/to/resource/here "Optional Title Here"
+```
+
+网址定义只有在产生链接的时候用到，并不会直接出现在文件之中。
+
+链接辨识标签可以有字母、数字、空白和标点符号，但是并**不**区分大小写，因此下面两个链接是一样的:
+
+```md
+[link text][a]
+[link text][a]
+```
+
+*预设的链接标签*功能让你可以省略指定链接标签，这种情形下，链接标签和链接文字会视为相同，要用预设链接标签只要在链接文字后面加上一个空的方括号，如果你要让 "Google" 链接到 google.com，你可以简化成:
+
+```md
+[Google][]
+```
+
+然后定义链接内容:
+
+```md
+[google]: http://google.com/
+```
+
+由于链接文字可能包含空白，所以这种简化的标签内也可以包含多个文字:
+
+```md
+Visit [Daring Fireball][] for more information.
+```
+
+然后接着定义链接:
+
+```md
+[daring fireball]: http://daringfireball.net/
+```
+
+链接的定义可以放在文件中的任何一个地方，我比较偏好直接放在链接出现段落的后面，你也可以把它放在文件最后面，就像是注解一样。
+
+下面是一个参考式链接的范例:
+
+```md
+I get 10 times more traffic from [Google][1] than from
+[Yahoo][2] or [MSN][3].
+
+[1]: http://google.com/ "Google"
+[2]: http://search.yahoo.com/ "Yahoo Search"
+[3]: http://search.msn.com/ "MSN Search"
+```
+
+如果改成用链接名称的方式写:
+
+```md
+I get 10 times more traffic from [Google][] than from
+[Yahoo][] or [MSN][].
+
+[google]: http://google.com/ "Google"
+[yahoo]: http://search.yahoo.com/ "Yahoo Search"
+[msn]: http://search.msn.com/ "MSN Search"
+```
+
+上面两种写法都会产生下面的 HTML。
+
+```html
+
+ I get 10 times more traffic from
+ Google than from
+ Yahoo
+ or MSN .
+
+```
+
+下面是用行内形式写的同样一段内容的 Markdown 文件，提供作为比较之用:
+
+```md
+I get 10 times more traffic from [Google](http://google.com/ "Google")
+than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
+[MSN](http://search.msn.com/ "MSN Search").
+```
+
+参考式的链接其实重点不在于它比较好写，而是它比较好读，比较一下上面的范例，使用参考式的文章本身只有 81 个字元，但是用行内形式的链接却会增加到 176 个字元，如果是用纯 HTML 格式来写，会有 234 个字元，在 HTML 格式中，标签比文字还要多。
+
+使用 Markdown 的参考式链接，可以让文件更像是浏览器最后产生的结果，让你可以把一些标记相关的资讯移到段落文字之外，你就可以增加链接而不让文章的阅读感觉被打断。
+
+### 强调
+
+Markdown 使用星号 (`*`) 和底线 (`_`) 作为标记强调字词的符号，被 `*` 或 `_` 包围的字词会被转成用 `` 标签包围，用两个 `*` 或 `_` 包起来的话，则会被转成 ``，例如:
+
+```md
+**double asterisks** (建议)
+
+**double underscores** (建议)
+
+_single asterisks_
+
+_single underscores_
+```
+
+会转成:
+
+```html
+single asterisks
+
+single underscores
+
+double asterisks
+
+double underscores
+```
+
+你可以随便用你喜欢的样式，唯一的限制是，你用什么符号开启标签，就要用什么符号结束。
+
+强调也可以直接插在文字中间:
+
+```md
+un*frigging*believable
+```
+
+但是如果你的 `*` 和 `_` 两边都有空白的话，它们就只会被当成普通的符号。
+
+如果要在文字前后直接插入普通的星号或底线，你可以用反斜线:
+
+```md
+\*this text is surrounded by literal asterisks\*
+```
+
+### 代码
+
+如果要标记一小段行内代码，你可以用反引号把它包起来 (`` ` ``) ，例如:
+
+```md
+Use the `printf()` function.
+```
+
+会产生:
+
+```md
+Use the printf() function.
+```
+
+如果要在代码内插入反引号，你可以用多个反引号来开启和结束行内代码:
+
+```md
+``There is a literal backtick (`) here.``
+```
+
+这段语法会产生:
+
+```html
+There is a literal backtick (`) here.
+```
+
+代码码区段的起始和结束端都可以放入一个空白，起始端后面一个，结束端前面一个，这样你就可以在区段的一开始就插入反引号:
+
+```md
+A single backtick in a code span: `` ` ``
+
+A backtick-delimited string in a code span: `` `foo` ``
+```
+
+会产生:
+
+```html
+A single backtick in a code span: `
+
+A backtick-delimited string in a code span: `foo`
+```
+
+在代码码区段内，`&` 和方括号都会被转成 HTML 实体，这样会比较容易插入 HTML 原始码，Markdown 会把下面这段:
+
+```md
+Please don't use any `` tags.
+```
+
+转为:
+
+```html
+Please don't use any <blink> tags.
+```
+
+你也可以这样写:
+
+```md
+`—` is the decimal-encoded equivalent of `—`.
+```
+
+以产生:
+
+```html
+
+ — is the decimal-encoded equivalent of
+ —.
+
+```
+
+### 图片
+
+很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。
+
+Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式: _行内_ 和 _参考_。
+
+行内图片的语法看起来像是:
+
+```md
+
+
+
+```
+
+详细叙述如下:
+
+- 一个惊叹号 `!`
+- 一个方括号，里面放上图片的替代文字
+- 一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上
+ 选择性的 title 文字。
+
+参考式的图片语法则长得像这样:
+
+```md
+![Alt text][id]
+```
+
+「id」是图片参考的名称，图片参考的定义方式则和链接参考一样:
+
+```md
+[id]: url/to/image "Optional title attribute"
+```
+
+到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 `http://example.com/
+```
+
+自动的邮件链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字元转成 16 进位码的 HTML 实体，这样的格式可以混淆一些不好的信箱地址收集机器人，例如:
+
+```md
+
+```
+
+Markdown 会转成:
+
+```html
+address@example.com
+```
+
+在浏览器里面，这段字串会变成一个可以点击的 链接。
+
+(这种作法虽然可以混淆不少的机器人，但并无法全部挡下来，不过这样也比什么都不做好些。无论如何，公开你的信箱终究会引来广告信件的。)
+
+### 转义字符
+
+Markdown 可以利用反斜线来插入一些在语法中有其它意义的符号，例如: 如果你想要用星号加在文字旁边的方式来做出强调效果 (但不用 `` 标签) ，你可以在星号的前面加上反斜线:
+
+```md
+\*literal asterisks\*
+```
+
+Markdown 支持在下面这些符号前面加上反斜线来帮助插入普通的符号:
+
+- `\` 反斜线
+- `` ` `` 反引号
+- `*` 星号
+- `_` 底线
+- `{}` 大括号
+- `[]` 方括号
+- `()` 括号
+- `#` 井字号
+- `+` 加号
+- `-` 减号
+- `.` 英文句点
+- `!` 惊叹号
+
+## 快捷键
+
+| 输出后的效果 | Markdown | 快捷键 |
+| ------------- | ---------- | -------------- |
+| **Bold** | `**text**` | Ctrl/⌘ + B |
+| _Emphasize_ | `*text*` | Ctrl/⌘ + I |
+| `Inline Code` | \`code\` | 选中后 `` ` `` |
+
+## 表格
+
+| 居中 | 右对齐 | 左对齐 |
+| :-----------: | -------------: | :------------- |
+| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
+| b | aaaaaaaaa | aaaa |
+| c | aaaa | a |
+
+[1]: http://docutils.sourceforge.net/mirror/setext.html
+[2]: http://www.aaronsw.com/2002/atx/
+[3]: http://textism.com/tools/textile/
+[4]: http://docutils.sourceforge.net/rst.html
+[5]: http://www.triptico.com/software/grutatxt.html
+[6]: http://ettext.taint.org/doc/
+[bq]: #blockquotes
+[l]: #列表
diff --git a/docs/notes/theme/guide/markdown-扩展.md b/docs/notes/theme/guide/markdown-扩展.md
new file mode 100644
index 00000000..99f4a59e
--- /dev/null
+++ b/docs/notes/theme/guide/markdown-扩展.md
@@ -0,0 +1,746 @@
+---
+title: 扩展
+author: pengzhanbo
+createTime: 2024/03/05 23:29:07
+permalink: /guide/markdown/extensions/
+---
+
+## 标题锚点
+
+标题会自动应用锚点。
+
+#### 自定义锚点
+
+要为标题指定自定义锚点而不是使用自动生成的锚点，请向标题添加后缀：
+
+```md
+# 使用自定义锚点 {#my-anchor}
+```
+
+这允许将标题链接为 `#my-anchor`，而不是默认的 `#使用自定义锚点`。
+
+## 链接
+
+内部和外部链接都会被特殊处理。
+
+主题默认对每个 md 文件自动生成一个新的 链接，并保存在对应的 md 文件的 frontmatter 的 `permalink` 中。
+你可以随时修改它们。
+
+
+#### 内部链接
+
+建议使用 生成的 `permalink` 作为内部链接的目标。
+
+```md
+[Markdown](/guide/markdown/)
+```
+
+渲染为：
+
+[Markdown](/guide/markdown/)
+
+#### 外部链接
+
+外部链接带有 `target="_blank" rel="noreferrer"` ：
+
+[VuePress](https://v2.vuepress.vuejs.org/)
+
+## Github风格的表格
+
+**输入**
+
+```md
+| Tables | Are | Cool |
+| ------------- | :-----------: | ----: |
+| col 3 is | right-aligned | $1600 |
+| col 2 is | centered | $12 |
+| zebra stripes | are neat | $1 |
+```
+
+**输出**
+
+| Tables | Are | Cool |
+| ------------- | :-----------: | ----: |
+| col 3 is | right-aligned | $1600 |
+| col 2 is | centered | $12 |
+| zebra stripes | are neat | $1 |
+
+## Emoji :tada:
+
+**输入**
+
+```md
+:tada: :100:
+```
+
+**输出**
+
+:tada: :100:
+
+这里可以找到 [所有支持的 emoji 列表](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs)。
+
+## 目录表
+
+**输入**
+
+```md
+[[TOC]]
+```
+
+**输出**
+
+[[TOC]]
+
+## 自定义容器
+
+自定义容器可以通过它们的类型、标题和内容来定义。
+
+### 默认标题
+
+**输入**
+
+```md
+::: note
+This is a note box
+:::
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: caution
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**输出**
+
+::: note
+This is a note box
+:::
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: caution
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+### 自定义标题
+
+可以通过在容器的 "type" 之后附加文本来设置自定义标题。
+
+**输入**
+
+````md
+::: caution STOP
+危险区域，请勿继续
+:::
+
+::: details 点我查看代码
+```js
+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]
+> 强调用户在快速浏览文档时也不应忽略的重要信息。
+
+> [!TIP]
+> 有助于用户更顺利达成目标的建议性信息。
+
+> [!IMPORTANT]
+> 对用户达成目标至关重要的信息。
+
+> [!WARNING]
+> 因为可能存在风险，所以需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 行为可能带来的负面影响。
+```
+
+**输出**
+
+> [!NOTE]
+> 强调用户在快速浏览文档时也不应忽略的重要信息。
+
+> [!TIP]
+> 有助于用户更顺利达成目标的建议性信息。
+
+> [!IMPORTANT]
+> 对用户达成目标至关重要的信息。
+
+> [!WARNING]
+> 因为可能存在风险，所以需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 行为可能带来的负面影响。
+
+## 代码块中的语法高亮
+
+主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
+Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
+
+**输入**
+
+````
+```js
+export default {
+ name: 'MyComponent',
+ // ...
+}
+```
+````
+
+````
+```html
+
+```
+````
+
+**输出**
+
+```js
+export default {
+ name: 'MyComponent',
+ // ...
+}
+```
+
+```html
+
+```
+
+在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages)。
+
+## 在代码块中实现行高亮
+
+**输入**
+
+````
+```js{4}
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!'
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js{4}
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!'
+ }
+ }
+}
+```
+
+除了单行之外，还可以指定多个单行、多行，或两者均指定：
+
+- 多行：例如 `{5-8}`、`{3-10}`、`{10-17}`
+- 多个单行：例如 `{4,7,9}`
+- 多行与单行：例如 `{4,7-13,16,23-27,40}`
+
+**输入**
+
+````
+```js{1,4,6-8}
+export default { // Highlighted
+ data () {
+ return {
+ msg: `Highlighted!
+ This line isn't highlighted,
+ but this and the next 2 are.`,
+ motd: 'VitePress is awesome',
+ lorem: 'ipsum'
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js{1,4,6-8}
+export default { // Highlighted
+ data () {
+ return {
+ msg: `Highlighted!
+ This line isn't highlighted,
+ but this and the next 2 are.`,
+ motd: 'VitePress is awesome',
+ lorem: 'ipsum'
+ }
+ }
+}
+```
+
+也可以使用 `// [!code highlight]` 注释实现行高亮。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!' // [\!code highlight]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!' // [!code highlight]
+ }
+ }
+}
+```
+
+## 代码块中聚焦
+
+在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。
+
+此外，可以使用 `// [!code focus:]` 定义要聚焦的行数。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Focused!' // [\!code focus]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Focused!' // [!code focus]
+ }
+ }
+}
+```
+
+## 代码块中的颜色差异
+
+在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff，同时保留代码块的颜色。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Removed' // [\!code --]
+ msg: 'Added' // [\!code ++]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Removed' // [!code --]
+ msg: 'Added' // [!code ++]
+ }
+ }
+}
+```
+
+## 高亮“错误”和“警告”
+
+在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Error', // [\!code error]
+ msg: 'Warning' // [\!code warning]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Error', // [!code error]
+ msg: 'Warning' // [!code warning]
+ }
+ }
+}
+```
+
+## 代码块中 词高亮
+
+**输入**
+
+````
+```ts
+export function foo() { // [\!code word:Hello]
+ const msg = 'Hello World'
+ console.log(msg) // prints Hello World
+}
+```
+````
+
+**输出**
+
+```ts
+export function foo() { // [!code word:Hello]
+ const msg = 'Hello World'
+ console.log(msg) // prints Hello World
+}
+```
+
+你还可以指定高亮显示的次数，例如 `[!code word:options:2]` 会高亮显示近两个 `options`。
+
+**输入**
+
+````
+```ts
+// [\!code word:options:2]
+const options = { foo: 'bar' }
+options.foo = 'baz'
+console.log(options.foo) // 这个不会被高亮显示
+```
+````
+
+**输出**
+
+```ts
+// [!code word:options:2]
+const options = { foo: 'bar' }
+options.foo = 'baz'
+console.log(options.foo) // 这个不会被高亮显示
+```
+
+## 代码组
+
+可以像这样对多个代码块进行分组：
+
+
+**输入**
+
+````md
+::: code-tabs
+@tab config.js
+```js
+/**
+ * @type {import('vuepress').UserConfig}
+ */
+const config = {
+ // ..
+}
+
+export default config
+```
+
+@tab config.ts
+```ts
+import { type UserConfig } from 'vuepress'
+
+const config: UserConfig = {
+ // ..
+}
+
+export default config
+```
+:::
+````
+
+**输出**
+
+::: code-tabs
+@tab config.js
+```js
+/**
+ * @type {import('vuepress').UserConfig}
+ */
+const config = {
+ // ..
+}
+
+export default config
+```
+@tab config.ts
+```ts
+import { type UserConfig } from 'vuepress'
+
+const config: UserConfig = {
+ // ..
+}
+
+export default config
+```
+:::
+
+你还可以通过 `@tab:active`
+
+## 导入代码块
+
+**输入**
+
+你可以使用下面的语法，从文件中导入代码块：
+
+```md
+@[code](../snippet/snippet-1.js)
+```
+
+**输出**
+
+@[code](../snippet/snippet-1.js)
+
+如果你只想导入这个文件的一部分：
+
+```md
+
+@[code{1-10}](../snippet/snippet-1.js)
+```
+
+代码语言会根据文件扩展名进行推断，但我们建议你显式指定：
+
+```md
+
+@[code js](../snippet/snippet-1.js)
+
+
+@[code js{2,4-5}](../foo.js)
+```
+
+## 数学方程
+
+**输入**
+
+````
+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} $$
+
+**Maxwell's equations:**
+
+| equation | description |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
+| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
+| $\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} $$
+
+**Maxwell's equations:**
+
+| equation | description |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
+| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
+| $\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?_ |
+
+## 标记
+
+使用 `== ==` 进行标记。请注意两边需要有空格。
+
+**输入**
+
+```md
+vuepress-theme-plume 是一个 ==简洁美观== 的 主题
+```
+
+**输出**
+
+vuepress-theme-plume 是一个 ==简洁美观== 的 主题
+
+## 上下角标
+
+- 使用 `^ ^` 进行上角标标注。
+- 使用 `~ ~` 进行下角标标注。
+
+**输入**
+
+```md
+- 19^th^
+- H~2~O
+```
+
+**输出**
+
+- 19^th^
+- H~2~O
+
+## 自定义对齐
+
+**输入**
+
+````md
+::: left
+左对齐的内容
+:::
+
+::: center
+居中的内容
+:::
+
+::: right
+右对齐的内容
+:::
+````
+
+**输出**
+
+::: left
+左对齐的内容
+:::
+
+::: center
+居中的内容
+:::
+
+::: right
+右对齐的内容
+:::
+
+## 属性支持
+
+你可以使用特殊标记为 Markdown 元素添加属性。
+
+**为图片添加属性**
+
+这将为图片添加 一个 名为 `full-width` 的 class 属性，以及一个 `width` 属性，值为 `100%`。
+```md
+{.full-width width="100%"}
+```
+
+同时也支持其他属性:
+
+```md
+一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}
+```
+
+这将被渲染为：
+
+```html
+
+ 一个包含文字的段落。
+
+```
+
+## 任务列表
+
+**输入**
+
+````md
+- [ ] 任务 1
+- [x] 任务 2
+- [ ] 任务 3
+````
+
+**输出**
+
+- [ ] 任务 1
+- [x] 任务 2
+- [ ] 任务 3
+
+## 脚注
+
+**输入**
+
+````md
+人生自古谁无死，留取丹心照汗青[^脚注1]。
+
+[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
+````
+
+**输出**
+
+人生自古谁无死，留取丹心照汗青[^脚注1]。
+
+[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
diff --git a/docs/notes/theme/guide/markdown-试验性.md b/docs/notes/theme/guide/markdown-试验性.md
new file mode 100644
index 00000000..c8ebf1c9
--- /dev/null
+++ b/docs/notes/theme/guide/markdown-试验性.md
@@ -0,0 +1,329 @@
+---
+title: 试验性
+author: pengzhanbo
+createTime: 2024/03/06 11:46:49
+permalink: /guide/markdown/experiment/
+---
+
+## twoslash ` 显示代码是如何出现错误的：
+
+````md
+```ts twoslash
+// @errors: 2339
+const welcome = "Tudo bem gente?"
+const words = welcome.contains(" ")
+```
+````
+```ts twoslash
+// @errors: 2339
+const welcome = "Tudo bem gente?"
+const words = welcome.contains(" ")
+```
+
+你需要在 `@errors` 后面，声明对应的 `typescript` 错误码。
+
+::: note
+如果你不知道应该添加哪个 错误码，你可以先尝试直接编写好代码，然后等待编译失败，
+你应该能够在控制台中查看到相关的错误信息，然后在错误信息的 `description` 中找到对应的错误码。
+然后再将错误码添加到 `@errors` 中
+:::
+
+#### `---cut---` {id=twoslash-cut}
+
+`---cut---` 用于将代码分割, 被 `---cut---` 标记的，在其之前的代码将被忽略，不会显示：
+
+````md
+```ts twoslash
+const hi = 'hi'
+// ---cut---
+const msg = `${hi} words` as const
+// ^?
+```
+````
+
+```ts twoslash
+const hi = 'hi'
+// ---cut---
+const msg = `${hi} words` as const
+// ^?
+ //
+```
+
+#### 自定义输出信息 {id=twoslash-custom-message}
+
+`@log`, `@error`, `@warn` 和 `@annotate` 用于向用户输出不同级别的自定义信息
+
+````md
+```ts twoslash
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+````
+
+```ts twoslash
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+
+
+#### import_files {id=twoslash-import-files}
+
+`@filename: ` 用于声明后续的代码将来自哪个文件，
+你可以在其他部分的代码中通过 `import` 导入该文件。
+
+````md
+```ts twoslash
+// @filename: sum.ts
+export function sum(a: number, b: number): number {
+ return a + b
+}
+
+// @filename: ok.ts
+import { sum } from "./sum"
+sum(1, 2)
+
+// @filename: error.ts
+// @errors: 2345
+import { sum } from "./sum"
+sum(4, "woops")
+```
+````
+
+```ts twoslash
+// @filename: sum.ts
+export function sum(a: number, b: number): number {
+ return a + b
+}
+
+// @filename: ok.ts
+import { sum } from "./sum"
+sum(1, 2)
+
+// @filename: error.ts
+// @errors: 2345
+import { sum } from "./sum"
+sum(4, "woops")
+```
+
+::: warning
+在本节中未提及的其他标记，由于未正式验证其是否可用，请谨慎使用。
+:::
diff --git a/docs/notes/theme/guide/markdown-进阶.md b/docs/notes/theme/guide/markdown-进阶.md
new file mode 100644
index 00000000..bba14890
--- /dev/null
+++ b/docs/notes/theme/guide/markdown-进阶.md
@@ -0,0 +1,539 @@
+---
+title: 高阶
+author: pengzhanbo
+createTime: 2024/03/05 16:27:59
+permalink: /guide/markdown/advance/
+---
+
+## 代码演示
+
+代码演示 默认不启用，你可以通过配置来启用它。
+
+::: code-tabs
+@tab .vuepress/config.ts
+```ts
+export default defineUserConfig{
+ theme: plumeTheme({
+ plugins: {
+ markdownEnhance: {
+ demo: true,
+ },
+ }
+ })
+}
+```
+:::
+
+### 语法
+
+```` md
+::: [类型]-demo 可选的标题文字
+
+```html
+
+
+
+```
+
+```json
+// json block 作为插件配置存放处
+{
+ // 放置你的配置 (可选的)
+}
+```
+
+:::
+````
+::: tip 提示
+JSON 块是可选的，可用的配置详见[配置](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/config.html)
+:::
+
+插件支持三种类型
+
+- normal(默认)
+- vue
+- react
+
+### 可用的语言
+
+你可以在演示块中使用不同语言。
+
+当你设置一些不能在浏览器上直接运行的语言时，由于插件无法解析它们，因此网页演示将被禁用。插件只显示代码。同时提供一个 "在 CodePen 中打开" 按钮允许用户直接在 CodePen 打开并浏览代码。
+
+可用的 HTML 语言:
+
+- `"html"` (默认)
+- `"slim"`
+- `"haml"`
+- `"markdown"`
+
+可用的 JS 语言:
+
+- `"javascript"` (default)
+- `"coffeescript"`
+- `"babel"`
+- `"livescript"`
+- `"typescript"`
+
+> 你也可以在代码块中使用 `js`, `ts`, `coffee` 和 `ls。`
+
+可用的 CSS 语言:
+
+- `"css"` (default)
+- `"less"`
+- `"scss"`
+- `"sass"`
+- `"stylus"`
+
+### 不支持的语言
+
+::: normal-demo 一个使用浏览器不支持解析语言 Demo
+
+```md
+# 标题
+
+十分强大
+```
+
+```ts
+const message: string = "VuePress Theme Hope";
+
+document.querySelector("h1").innerHTML = message;
+```
+
+```scss
+h1 {
+ font-style: italic;
+
+ + p {
+ color: red;
+ }
+}
+```
+
+:::
+
+:::: details 代码
+```` md
+::: normal-demo 一个使用浏览器不支持解析语言 Demo
+
+```md
+# 标题
+
+十分强大
+```
+
+```ts
+const message: string = "VuePress Theme Hope";
+
+document.querySelector("h1").innerHTML = message;
+```
+
+```scss
+h1 {
+ font-style: italic;
+
+ + p {
+ color: red;
+ }
+}
+```
+
+:::
+````
+::::
+
+
+### 普通代码演示
+格式：
+```` md
+::: normal-demo 可选的标题文字
+
+```html
+
+```
+
+```js
+// js code
+```
+
+```css
+/* css code */
+```
+
+```json
+// 配置 (可选)
+{
+ "jsLib": [
+ ...
+ ],
+ "cssLib":[
+ ...
+ ]
+}
+```
+
+:::
+````
+::: warning 注意事项
+我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document，请访问` `window.document`。
+:::
+
+#### 例子
+
+::: normal-demo Demo 演示
+
+```html
+Hello Word!
+非常 强大!
+```
+
+```js
+document.querySelector("#very").addEventListener("click", () => {
+ alert("非常强大");
+});
+```
+
+```css
+span {
+ color: red;
+}
+```
+
+:::
+
+:::: details 代码
+```` md
+::: normal-demo Demo 演示
+
+```html
+Hello Word!
+非常 强大!
+```
+
+```js
+document.querySelector("#very").addEventListener("click", () => {
+ alert("非常强大");
+});
+```
+
+```css
+span {
+ color: red;
+}
+```
+
+:::
+````
+::::
+
+### Vue 代码演示
+
+#### 格式
+```` md
+::: vue-demo 可选的标题文字
+
+```vue
+
+
+
+
+
+
+```
+
+```json
+// 配置 (可选)
+```
+
+:::
+````
+
+::: warning 注意事项
+- 你只能使用 `Vue3`。
+- 必须将组件通过 `export default` 默认导出
+- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
+:::
+
+#### 演示
+
+::: vue-demo 一个 Vue Composition 演示
+
+```vue
+
+
+ Hello Word is
+ {{ message }} !
+
+
+
+
+```
+
+:::
+
+:::: details 代码
+```` md
+::: vue-demo 一个 Vue Composition 演示
+
+```vue
+
+
+ Hello Word is
+ {{ message }} !
+
+
+
+
+```
+
+:::
+````
+::::
+
+### React 代码演示
+
+#### 格式
+
+```` md
+::: react-demo 可选的标题文字
+
+```js
+// 放置脚本，并通过 `export default` 导出你的 react 组件
+```
+
+```css
+/* 你的 css 内容 */
+```
+
+```json
+// 配置 (可选)
+```
+
+:::
+````
+
+::: warning 注意事项
+- 使用 React 的时候，为了解析 JSX 必须引入 Babel，此过程由插件自动完成。
+- 必须将组件通过 `export default` 默认导出
+- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
+:::
+
+#### 演示
+
+::: react-demo 一个函数式 React Demo
+
+```js
+const { useState } = React;
+
+export default () => {
+ const [message, setMessage] = useState(" 强大");
+
+ const handler = () => {
+ setMessage(`十分${message}`);
+ };
+
+ return (
+
+ Hello Word !
+
+ {message}
+
+
+ );
+};
+```
+
+```css
+.box #powerful {
+ color: blue;
+}
+```
+
+:::
+
+:::: details 代码
+```` md
+::: react-demo 一个函数式 React Demo
+
+```js
+const { useState } = React;
+
+export default () => {
+ const [message, setMessage] = useState(" 强大");
+
+ const handler = () => {
+ setMessage(`十分${message}`);
+ };
+
+ return (
+
+ Hello Word !
+
+ {message}
+
+
+ );
+};
+```
+
+```css
+.box #powerful {
+ color: blue;
+}
+```
+
+:::
+````
+::::
+
+## 选项组
+
+让你的 Markdown 文件支持供选项卡。
+
+你需要将选项卡包装在 `tabs` 容器中。
+
+你可以在 `tabs` 容器中添加一个 id 后缀，该后缀将用作选项卡 id。
+所有具有相同 id 的选项卡将共享相同的切换事件。
+
+```md
+::: tabs#fruit
+
+
+
+
+
+:::
+```
+
+在这个容器内，你应该使用 `@tab` 标记来标记和分隔选项卡内容。
+
+在 `@tab` 标记后，你可以添加文本 `:active` 默认激活选项卡，之后的文本将被解析为选项卡标题。
+
+```md
+::: tabs
+
+@tab 标题 1
+
+
+
+@tab 标题 2
+
+
+
+@tab:active 标题 3
+
+
+
+
+
+:::
+```
+
+默认情况下，标题将用作选项卡的值，但你可以使用 id 后缀覆盖它。
+
+```md
+::: tabs
+
+@tab 标题 1
+
+
+
+
+
+@tab 标题 2#值 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
+```
+
+:::
diff --git a/docs/notes/theme/guide/seo.md b/docs/notes/theme/guide/seo.md
new file mode 100644
index 00000000..245264b1
--- /dev/null
+++ b/docs/notes/theme/guide/seo.md
@@ -0,0 +1,81 @@
+---
+title: SEO
+author: pengzhanbo
+createTime: 2024/03/02 14:46:25
+permalink: /guide/seo/
+---
+
+## 使用
+
+主题提供了开箱即用的配置，为 站点 启用 SEO 优化功能。
+要启用它，需要进行以下配置：
+
+```js
+export default defineUserConfig({
+ theme: plumeTheme({
+ hostname: 'http://your_site_url',
+ })
+})
+```
+
+## 指南
+
+主题会通过向网站 `` 注入标签，让你的网站完全支持 [开放内容协议 OGP](https://ogp.me/)
+和 [JSON-LD 1.1](https://www.w3.org/TR/json-ld-api/)，以全面增强站点的搜索引擎优化性。
+
+默认情况下，插件会读取站点配置、主题配置与页面的 frontmatter 来尽可能自动生成。
+诸如站点名称，页面标题，页面类型，写作日期，最后更新日期，文章标签均会自动生成。
+
+## 默认的 OGP 生成逻辑
+
+| 属性名称 | 值 |
+| :----------------------: | :------------------------------------------------------------------------------------------------: |
+| `og:url` | `options.hostname` + `path` |
+| `og:site_name` | `siteConfig.title` |
+| `og:title` | `page.title` |
+| `og:description` | `page.frontmatter.description` \|\| 自动生成 (当插件选项中的 `autoDescription` 为 `true` 时) |
+| `og:type` | `"article"` |
+| `og:image` | `options.hostname` + `page.frontmatter.image` \|\| 页面的第一张图片\|\| 插件选项的 `fallbackImage` |
+| `og:updated_time` | `page.git.updatedTime` |
+| `og:locale` | `page.lang` |
+| `og:locale:alternate` | `siteData.locales` 包含的其他语言 |
+| `twitter:card` | `"summary_large_image"` (仅在找到图片时) |
+| `twitter:image:alt` | `page.title` (仅在找到图片时) |
+| `article:author` | `page.frontmatter.author` \|\| `options.author` |
+| `article:tag` | `page.frontmatter.tags` \|\| `page.frontmatter.tag` |
+| `article:published_time` | `page.frontmatter.date` \|\| `page.git.createdTime` |
+| `article:modified_time` | `page.git.updatedTime` |
+
+## 默认的 JSON-LD 生成逻辑
+
+| 属性名 | 值 |
+| :-------------: | :------------------------------------------------------------: |
+| `@context` | `"https://schema.org"` |
+| `@type` | `"NewsArticle"` |
+| `headline` | `page.title` |
+| `image` | 页面中的图片\|\| `options.hostname` + `page.frontmatter.image` |
+| `datePublished` | `page.frontmatter.date` \|\| `page.git.createdTime` |
+| `dateModified` | `page.git.updatedTime` |
+| `author` | `page.frontmatter.author` \|\| `options.author` |
+
+## SEO 介绍
+
+搜索引擎优化 (**S**earch **E**ngine **O**ptimization)，是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。 所谓“针对搜索引擎作最优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。搜索引擎优化就是通过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是做好用户体验。
+
+## 相关文档
+
+- [开放内容协议 OGP](https://ogp.me/) (**O**pen **G**raph **Pr**otocal)
+
+ 本插件完美支持该协议，会自动生成符合该协议的 `',
+ highlightPostTag: ' ',
+ minWordSizefor1Typo: 3,
+ minWordSizefor2Typos: 7,
+ allowTyposOnNumericTokens: false,
+ minProximity: 1,
+ ignorePlurals: true,
+ advancedSyntax: true,
+ attributeCriteriaComputedByMinProximity: true,
+ removeWordsIfNoResults: 'allOptional',
+ },
+ },
+});
+```
+
+`recordProps` 部分的配置选项用于本主题进行索引的爬取配置。
+
+### 配置项
+
+完整配置请查看 [文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#%E9%85%8D%E7%BD%AE%E9%A1%B9)
+
+### 配置示例
+
+以下是本主题使用的配置：
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ docsearch: {
+ appId: 'YOUR_APP_ID', // [!code highlight]
+ apiKey: 'YOUR_API_KEY', // [!code highlight]
+ indexName: 'YOUR_INDEX_NAME', // [!code highlight]
+ }
+ }
+ })
+})
+```
diff --git a/docs/notes/theme/guide/加密.md b/docs/notes/theme/guide/加密.md
new file mode 100644
index 00000000..cea739dd
--- /dev/null
+++ b/docs/notes/theme/guide/加密.md
@@ -0,0 +1,141 @@
+---
+title: 加密
+author: pengzhanbo
+createTime: 2024/03/04 15:58:48
+permalink: /guide/features/encryption/
+---
+
+## 加密
+
+在本主题中，支持 **全站加密** 和 **部分加密** 等多种灵活的加密方式。
+
+::: warning 提示
+由于 `vuepress` 是静态站点，其自身限制的原因，**加密** 仅仅只是 看起来 看不到内容，
+并且在 编译时，不再将 内容 预渲染到 `html` 中，但实际上 还是能够从 站点源文件 中获取到内容。
+因此，不建议将 **加密** 功能 认为是 安全可靠的。
+
+请尽量避免将 **加密功能** 应用于需要 **严格保密** 的内容 中。
+:::
+
+**已解锁的文章，仅在当前会话中可见。**
+
+## 启用加密功能
+
+在 主题配置中，添加 `encrypt` 选项。
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { themePlume } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: themePlume({
+ encrypt: {
+ // more options...
+ }
+ })
+})
+```
+
+## 全站加密
+
+有些情况下，你可能 需要对 全站进行加密。
+因此，你可以通过 `encrypt.global` 选项配置全站加密。
+然后，通过配置 `encrypt.admin` 选项，设置一个或多个密码。
+
+```ts
+export default defineUserConfig({
+ theme: themePlume({
+ encrypt: {
+ global: true,
+ admin: ['123456'],
+ }
+ })
+})
+```
+
+## 部分加密
+
+大多数情况下，你可能只需需要 加密 某一篇文章、某一个目录 等。
+因此，你可以通过 `encrypt.rules` 选项配置部分加密。
+
+```ts
+export default defineUserConfig({
+ theme: themePlume({
+ encrypt: {
+ rules: {
+ // 可以是 md 文件的相对路径，对该文件加密
+ '前端/基础.md': '123456',
+ // 可以是 文件夹的路径，对该目录下所有文章加密
+ '/notes/vuepress-theme-plume/': '123456',
+ // 可以是 访问地址的请求路径，对该访问路径下所有文章加密
+ '/vuepress-theme-plume/': '123456',
+ // 可以是 具体的某个页面的请求路径，对该页面加密
+ '/article/f8dnci3/': '123456',
+ // 如果是 `^` 开头，则匹配该正则表达式的页面也会加密
+ '^/(a|b)/': '123456',
+ }
+ }
+ })
+})
+```
+
+`encrypt.rules` 的 **键** 将作为 匹配规则，**值** 将作为 该规则对应的密码，可以设置 一个或多个密码。
+
+:::tip 说明
+- 密码 必须是 普通的字符串。
+- 如果是 加密的是 整个目录，解锁时也是解锁整个目录，而不是解锁该目录下的某个文章。
+- `encrypt.admin` 也可用于解锁 **部分加密** 的页面。
+- 使用 `encrypt.admin` 解锁后，被认为是管理员访问，其它未解锁页面也默认解锁。
+:::
+
+## 相关配置
+
+以下配置支持在多语言配置中使用。
+
+### encryptGlobalText
+
+- **类型**： `string`
+- **默认值**： `'Only password can access this site'`
+- **说明**：
+
+ 全站加密时，提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式，你可能会需要这个配置。
+
+### encryptPageText
+
+- **类型**： `string`
+- **默认值**： `'Only password can access this page'`
+- **说明**：
+
+ 部分加密时，提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式，你可能会需要这个配置。
+
+### encryptButtonText
+
+- **类型**： `string`
+- **默认值**： `'Confirm'`
+- **说明**： 确认按钮的文本
+
+### encryptPlaceholder
+
+- **类型**： `string`
+- **默认值**： `'Enter password'`
+- **说明**： 密码输入框的占位符
+
+### 示例
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { themePlume } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: themePlume({
+ locales: {
+ '/': {
+ encryptButtonText: 'Confirm',
+ encryptPlaceholder: 'Enter password',
+ encryptGlobalText: 'Only password can access this site',
+ encryptPageText: 'Only password can access this page',
+ }
+ }
+ })
+})
+```
diff --git a/docs/notes/theme/guide/博客.md b/docs/notes/theme/guide/博客.md
new file mode 100644
index 00000000..7258ab2e
--- /dev/null
+++ b/docs/notes/theme/guide/博客.md
@@ -0,0 +1,90 @@
+---
+title: 博客
+author: pengzhanbo
+createTime: 2024/03/04 19:16:40
+permalink: /guide/blog/
+---
+
+## 概述
+
+主题默认启用 博客功能，通常您无需进行额外的配置。
+
+主题默认会将 `{sourceDir}` 目录下的，除了一些特定的目录（如 `notes` 目录将作为笔记所在目录），
+所有 md 文件作为博客文章。
+
+同时，主题会生成一个 链接地址为 `/blog/` 的 博客文章列表页。
+展示所有的博客文章，以及 博主的相关信息。
+
+
+## 国际化支持
+
+如果启用了 国际化，那么博客列表页将会 根据 不同的语言，展示对应语言目录下的博客列表。
+即 每个语言下的 文章列表 都是保持独立的。
+
+## 博主信息
+
+主题允许你展示博主的基本信息。
+
+::: center
+{style="max-width:250px;"}
+:::
+
+### 配置
+
+你可以通过 `avatar` 属性来设置博主头像等相关信息。
+
+::: code-tabs
+@tab .vuepress/config.ts
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ avatar: {
+ url: '/blogger.png',
+ name: 'Your name',
+ description: 'Your description',
+ circle: true, // 是否为圆形头像
+ }
+ })
+})
+```
+:::
+
+## 文章元数据
+
+你可以配置展示博客文章的元数据，如标题、作者、日期、标签等。这些数据通过 `frontmatter` 配置。
+
+```md
+---
+title: 文章标题
+createTime: 2024/01/01 00:00:00
+author: your name
+tags:
+ - tag1
+ - tag2
+---
+```
+
+其中，`title` / `createTime` / `author` 会在新建 md 文件时由主题自动填充，你可以随意修改它们。
+
+以下是在 博客文章中可用的 `frontmatter` 属性。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| ---------- | ------------------- | -------------------------- | -------------------- |
+| title | `string` | 默认自动填入文件名 | 文章标题 |
+| createTime | `string` | 当前时间 | 文章创建时间 |
+| author | `string` | 默认自动填入 `avatar.name` | 文章作者 |
+| tags | `string[]` | `[]` | 文章标签 |
+| sticky | `boolean \| number` | false | 是否置顶, 如果为数字，则数字越大，置顶越靠前 |
+| article | `boolean` | true | 是否在列表页中显示 |
+
+## 文章摘要
+
+如果你想要为文章添加摘要，你可以使用 `` 注释来标记它。任何在此注释之前的内容会被视为摘要。
+
+## 标签页和归档页
+
+主题除了自动生成 **博客文章列表页** 以外，还会自动生成 **标签页** 和 **归档页**。
+
+标签页 可以根据 标签 筛选并展示 博客文章。
+
+归档页根据文章的创建时间进行归档。
diff --git a/docs/notes/theme/guide/友情链接页.md b/docs/notes/theme/guide/友情链接页.md
new file mode 100644
index 00000000..4e038526
--- /dev/null
+++ b/docs/notes/theme/guide/友情链接页.md
@@ -0,0 +1,44 @@
+---
+title: 友情链接页
+author: pengzhanbo
+createTime: 2024/03/03 22:44:28
+permalink: /guide/friend-links/
+---
+
+## 友情链接
+
+友情链接页 不会自动生成，但你可以根据需要，创建它。
+
+在你的 `{sourceDir}/` 目录下，创建 任意 `*.md` 文件，比如 `friends.md` 文件。
+然后在这个文件中，通过 `frontmatter` 配置它。
+
+::: code-tabs
+@tab friends.md
+```md
+---
+friends: true
+title: 友情链接
+description: 友情链接描述文本
+permalink: /friends/
+list:
+ -
+ name: pengzhanbo
+ link: https://github.com/pengzhanbo
+ avatar: https://github.com/pengzhanbo.png
+ desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+ -
+ name: pengzhanbo
+ link: https://github.com/pengzhanbo
+ avatar: https://github.com/pengzhanbo.png
+ desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+---
+```
+:::
+
+主题会根据 配置信息 生成友情链接页。 如果未配置 `permalink` ，默认为 `/friends/`。
+
+你需要自行将 友情链接页 的入口链接 配置到 `navbar` 的合适的位置中。
+
+### 配置
+
+查看 [文档](/config/frontmatter/friends/) 更多配置信息。
diff --git a/docs/notes/theme/guide/国际化.md b/docs/notes/theme/guide/国际化.md
new file mode 100644
index 00000000..f7c72dea
--- /dev/null
+++ b/docs/notes/theme/guide/国际化.md
@@ -0,0 +1,75 @@
+---
+title: 国际化
+author: pengzhanbo
+createTime: 2024/03/05 10:01:26
+permalink: /guide/international/
+---
+
+## 目录
+
+要使用内置的 i18n (国际化) 功能，需要创建类似于下面的目录结构：
+
+```
+docs/
+├─ es/
+│ ├─ foo.md
+├─ fr/
+│ ├─ foo.md
+├─ foo.md
+```
+
+## vuepress 配置
+
+在 `.vuepress/config.js` 中配置：
+
+```js
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ // 声明默认的语言
+ lang: 'en-US',
+ // 多语言下支持的各种语言 locales
+ locales: {
+ // 配置 不同 path 下的语言
+ '/': { lang: 'en-US', title: 'Blog' }, // default
+ '/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
+ }
+})
+```
+
+## 主题配置
+
+在本主题中，同样使用 `locales` 配置项进行多语言配置。
+
+`locales` 支持 所有主题配置项。
+
+```js
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume'
+
+export default defineUserConfig({
+ lang: 'en-US',
+ locales: {
+ '/': { lang: 'en-US', title: 'Blog' }, // default
+ '/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
+ },
+ theme: plumeTheme({
+ locales: {
+ '/': {
+ selectLanguageName: 'English',
+ navbar: [
+ { text: 'Home', link: '/' },
+ { text: 'Blog', link: '/blog/' },
+ ]
+ },
+ '/zh/': {
+ selectLanguageName: "简体中文",
+ navbar: [
+ { text: '首页', link: '/zh/' },
+ { text: '博客', link: '/zh/blog/' },
+ ]
+ }
+ }
+ })
+})
+```
diff --git a/docs/notes/theme/guide/安装与使用.md b/docs/notes/theme/guide/安装与使用.md
new file mode 100644
index 00000000..7e8dc910
--- /dev/null
+++ b/docs/notes/theme/guide/安装与使用.md
@@ -0,0 +1,177 @@
+---
+title: 安装/使用
+author: Plume Theme
+createTime: 2024/03/04 09:50:07
+permalink: /guide/quick-start/
+---
+
+## 依赖环境
+
+- [Node.js v18.16.0+](https://nodejs.org/)
+- [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'` 。
+:::
+
+## 安装
+
+使用本主题，你需要首先新建一个项目，并安装`vuepress@next`以及本主题
+
+### 步骤 1
+
+**创建一个新文件夹，并进入目录**
+
+``` sh
+mkdir my-blog
+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
+# 安装 主题和打包工具
+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
+```
+:::
+
+### 步骤 4
+
+**在 `package.json` 中添加 `script`**
+
+::: code-tabs
+@tab package.json
+``` json
+{
+ "scripts": {
+ "dev": "vuepress dev docs",
+ "build": "vuepress build docs"
+ }
+}
+```
+:::
+
+`vuepress` 默认将文档源码放在 `docs` 目录下。
+
+### 步骤 5
+
+**将默认的临时目录和缓存目录添加到`.gitignore` 文件中**
+
+::: code-tabs
+@tab .gitignore
+``` txt
+node_modules
+.temp
+.cache
+```
+@tab sh
+``` sh
+echo 'node_modules' >> .gitignore
+echo '.temp' >> .gitignore
+echo '.cache' >> .gitignore
+```
+:::
+
+### 步骤 6
+
+**在 `.vuepress/config.{js,ts}` 中配置主题**
+
+::: code-tabs
+@tab .vuepress/config.js
+``` ts
+import { defineUserConfig } from 'vuepress'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ // 请不要忘记设置默认语言
+ lang: 'zh-CN',
+ theme: plumeTheme({
+ // more...
+ }),
+ bundler: viteBundler(),
+})
+```
+:::
+
+### 步骤 7
+
+**在 `docs` 目录下新建 `README.md` 文件**
+
+声明首页配置。
+::: 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 文件时，浏览器中的内容也会自动更新。
diff --git a/docs/notes/theme/guide/知识笔记.md b/docs/notes/theme/guide/知识笔记.md
new file mode 100644
index 00000000..903aec5a
--- /dev/null
+++ b/docs/notes/theme/guide/知识笔记.md
@@ -0,0 +1,67 @@
+---
+title: 文档/知识笔记
+author: pengzhanbo
+createTime: 2024/03/04 15:45:34
+permalink: /guide/document/
+---
+
+## 概述
+
+在本主题满足了 Blog的基本功能后，期望能够 以 note 或者 book 的形式聚合文章，形式上类似于 vuepress 默认主题。
+同时也减少配置的复杂度。
+
+它能够让你以更加友好的方式，组织管理你的文档，或者 知识笔记。
+
+## 目录
+
+文档/知识笔记 默认存放在 `{sourceDir}/notes` 目录下。
+
+示例：
+
+```
+{sourceDir}/
+├─ notes/
+ ├─ typescript/
+ │ ├─ foo.md
+ ├─ rust/
+ │ ├─ foo.md
+```
+
+其中，`typescript` 和 `rust` 为目录名，各自独立保存与之相关的 markdown 文件。
+
+## 配置
+
+```js
+import { defineUserConfig } from 'vuepress'
+import { themePlume } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: themePlume({
+ notes: {
+ dir: '/notes/', // 声明所有笔记的目录
+ link: '/', // 声明所有笔记默认的链接前缀， 默认为 '/'
+ notes: [
+ {
+ dir: 'typescript', // 声明笔记的目录，相对于 `notes.dir`
+ link: '/typescript/', // 声明笔记的链接前缀
+ sidebar: [ // 配置侧边栏
+ {
+ text: '简介',
+ items: ['foo'] // 简化写法，主题会自动补全为 `foo.md`
+ }
+ ]
+ },
+ {
+ dir: 'rust',
+ link: '/rust/',
+ sidebar: [
+ { text: '简介', items: ['foo'] }
+ ]
+ }
+ ]
+ }
+ })
+})
+```
+
+主题会根据配置，为对应目录中的 md 文件，生成 永久链接，以及侧边栏。
diff --git a/docs/notes/theme/guide/组件.md b/docs/notes/theme/guide/组件.md
new file mode 100644
index 00000000..9a3ede75
--- /dev/null
+++ b/docs/notes/theme/guide/组件.md
@@ -0,0 +1,63 @@
+---
+title: 组件
+author: pengzhanbo
+createTime: 2024/03/06 09:42:42
+permalink: /guide/features/component/
+---
+
+## `
+
+
+ ...
+
+
+```
+:::
+
+在 `.vuepress/client.ts` 在 `enhance` 钩子中添加 组件
+::: code-tabs
+@tab .vuepress/client.ts
+```ts
+import { defineClientConfig } from 'vuepress/client'
+import YourComponent from 'your-component.vue'
+
+export default defineClientConfig({
+ enhance({ app }) {
+ app.component('your-component', YourComponent)
+ },
+})
+```
+:::
+
+然后，你就可以在 `README.md` 中使用 `your-component` 了。
+
+```md
+---
+home: true
+config:
+ -
+ type: 'your-component'
+ # ...
+---
+```
diff --git a/docs/notes/theme/guide/评论.md b/docs/notes/theme/guide/评论.md
new file mode 100644
index 00000000..0d0f980f
--- /dev/null
+++ b/docs/notes/theme/guide/评论.md
@@ -0,0 +1,41 @@
+---
+title: 评论
+author: pengzhanbo
+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)
diff --git a/docs/notes/theme/snippet/snippet-1.js b/docs/notes/theme/snippet/snippet-1.js
new file mode 100644
index 00000000..41715495
--- /dev/null
+++ b/docs/notes/theme/snippet/snippet-1.js
@@ -0,0 +1 @@
+export const a = 1
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 00000000..76cbf02c
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,9 @@
+# prevent Netlify npm install
+
+[build]
+publish = "docs/.vuepress/dist"
+command = "pnpm install && pnpm build:package && pnpm docs:build"
+
+[build.environment]
+NODE_VERSION = "18"
+NPM_FLAGS = "--version"
diff --git a/preview/plume.svg b/preview/plume.svg
new file mode 100644
index 00000000..62ee70c6
--- /dev/null
+++ b/preview/plume.svg
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/preview/preview-blog.jpeg b/preview/preview-blog.jpeg
new file mode 100644
index 00000000..77fea49c
Binary files /dev/null and b/preview/preview-blog.jpeg differ
diff --git a/preview/preview-home.jpeg b/preview/preview-home.jpeg
new file mode 100644
index 00000000..6186f5e6
Binary files /dev/null and b/preview/preview-home.jpeg differ
diff --git a/preview/preview-note.jpeg b/preview/preview-note.jpeg
new file mode 100644
index 00000000..82138813
Binary files /dev/null and b/preview/preview-note.jpeg differ
diff --git a/preview/preview-post.jpeg b/preview/preview-post.jpeg
new file mode 100644
index 00000000..73c1cafb
Binary files /dev/null and b/preview/preview-post.jpeg differ