vuepress常见功能

相关信息

本文简单介绍了vuepress常见功能。

选项卡

你需要将选项卡包装在 tabs 容器中。

你可以在 tabs 容器中添加一个 id 后缀，该后缀将用作选项卡 id。 所有具有相同 id 的选项卡将共享相同的切换事件。

使用方法：

::: tabs#fruit

<!-- 这里存放选项卡内容 -->

:::

例子如下：

代码：

::: tabs#选项卡

@tab 选项卡1

选项卡1内容

@tab 选项卡2

选项卡2内容

:::

效果：

选项卡1

选项卡1内容

选项卡2

选项卡2内容

脚注

使用方法：

• 在 Markdown 中使用 [^锚点文字] 来定义脚注。
• 在之后的任何位置使用 [^锚点文字]: ... 来描述脚注内容。
• 如果脚注包含多个段落，其后的段落应当保持双层缩进。

例子如下：

代码：

脚注 1 链接[^first]。

脚注 2 链接[^second]。

行内的脚注^[行内脚注文本] 定义。

重复的页脚定义[^second]。

[^first]: 脚注 **可以包含特殊标记**

    也可以由多个段落组成

[^second]: 脚注文字。

效果：

脚注 1 链接^[1]。

脚注 2 链接^[2]。

行内的脚注^[3] 定义。

重复的页脚定义^[2:1]。

幻灯片

使用方法：

• 使用 --- 分割幻灯片
• 使用 -- 对幻灯片进行二次分割(垂直显示)

例子如下：

代码：

@slidestart

## 幻灯片标题

此处是文字
[此处是链接](https://www.baidu.com) 

---

## 代码高亮

```python [2-3|1-6]
print("第一行")
print("第二行")
print("第三行")
print("第四行")
print("第五行")
print("第六行")
};

@slideend

效果：

@slidestart white

## 幻灯片标题

此处是文字
[此处是链接](https://www.baidu.com) 

---

## 代码高亮

```python [2-3|1-6]
print("第一行")
print("第二行")
print("第三行")
print("第四行")
print("第五行")
print("第六行")
};

@slideend

相关信息

此外，对于幻灯片还可以设置不同的主题：

• auto (默认)
• black
• white
• league
• beige
• sky
• night
• serif
• simple
• solarized
• blood
• moon

导入文件

用法：

让你的 VuePress 站点中的 Markdown 文件支持导入其他文件。
使用 <!-- @include: filename --> 导入文件。

如果要部分导入文件，你可以指定导入的行数

• <!-- @include: filename{start-end} -->
• <!-- @include: filename{start-} -->
• <!-- @include: filename{-end} -->
  同时你也可以导入文件区域:

<!-- @include: filename#region -->

例子如下：

代码：

<!-- @include: ../demo/file1.md -->

任务列表

让你的 VuePress 站点中的 Markdown 文件支持任务列表。

用法：

• 使用 - [ ] 一些文字 渲染一个未勾选的任务项
• 使用 - [x] 一些文字 渲染一个勾选了的任务项 (我们也支持大写的 X)

例子如下：

代码：

- [ ] 未完成任务
- [x] 已完成任务

效果：

• 未完成任务
• 已完成任务

提示容器

主题可以为你添加提示、注释、信息、注意、警告和详情提示容器的支持。

例子如下：

效果：

重要

重要容器。

相关信息

信息容器。

注

注释容器。

提示

提示容器

注意

警告容器

警告

危险容器

详情

详情容器

自定义标题

一个有 代码 和 链接 的重要容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的信息容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的注释容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的提示容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的警告容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的危险容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的详情容器。

const a = 1;

自定义重要

自定义信息

自定义注释

自定义提示

自定义警告

自定义危险

自定义重要

自定义信息

自定义注释

自定义提示

自定义警告

自定义危险

GFM 警告

代码：

> [!important]
> 重要文字

> [!info]
> 信息文字

> [!tip]
> 提示文字

> [!warning]
> 注意文字

> [!caution]
> 警告文字

> [!note]
> 注释文字

效果：

重要

重要文字

相关信息

信息文字

提示

提示文字

注意

注意文字

警告

警告文字

注

注释文字

上下角标

用法：

• 使用^ ^进行上角标标注。
• 使用~ ~进行下角标标注。

例子如下：

代码：

- 19^th^
- H~2~O

效果：

• 19^th
• H₂O

剧透

在你的 VuePress 站点中添加剧透文字。

用法：

使用 !! !! 标记剧透剧透文字。请注意两边需要有空格。

例子如下：

代码：

这是一个 !!秘密!!

效果：

这是一个 秘密

标记

用法：

使用 == == 进行标记。请注意两边需要有空格。

代码：

这是一个 ==标记==

效果：

这是一个 标记

自定义对齐

自定义内容对齐方式。

代码：

::: left
左对齐的内容
:::

::: center
居中的内容
:::

::: right
右对齐的内容
:::

::: justify
两端对齐的内容
:::

效果：

左对齐的内容

居中的内容

右对齐的内容

两端对齐的内容

以上就是vuepress中常用的内容。

---

1. 脚注 可以包含特殊标记

   也可以由多个段落组成 ↩︎

2. 脚注文字。 ↩︎ ↩︎

3. 行内脚注文本 ↩︎