本文发表于 315 天前,其中的信息可能已经事过境迁
文章摘要 FakeGPT
加载中...|
简单介绍下主题支持的标签写法,其中一部分为 VitePress
默认支持的标签,同时为了保持主题的简洁和统一性,仅支持一些基础的标签,若有额外或更高级的需求,可通过自定义组件实现,也可参考 VitePress
文档中的 高级配置 来实现。
基础标签
兼容绝大部分 Markdown
基础标签,详情可前往 Markdown 使用指南 - 基础语法 一文查看。
Note
默认标题
md
::: info
一个没啥用的通知
:::
::: tip
这是一个善意的提醒
:::
::: warning
在警告变为错误之前是没人关心的
:::
::: danger
这下你注意到了吧
:::
渲染结果
INFO
一个没啥用的通知
TIP
这是一个善意的提醒
WARNING
在警告变为错误之前是没人关心的
DANGER
这下你注意到了吧
自定义标题
可以通过在标签的 type
之后附加文本来设置自定义标题。
md
::: danger STOP
这里的操作很危险,请不要这么做
:::
渲染结果
STOP
这里的操作很危险,请不要这么做
Tabs
在同一块区域切换不同的内容,有些时候确实有用。
注意:Tabs
组件每一项 ==
后面的内容 不能重复。
md
::: tabs
== tab a
a content
== 不要去学
删库跑路 🏃♂️
```sh
sudo rm -rf /*
```
:::
渲染结果
别看第二项
TimeLine
这个世界有两个纬度:时间、事件。
md
::: timeline 2024-02-29
难得的疯狂星期四,人太多,没吃上。
:::
::: timeline 2024-03-07
现在正在写这个该死的文档
:::
渲染结果
2024-02-29
难得的疯狂星期四,人太多,没吃上。
2024-03-07
现在正在写这个该死的文档
Details
折起来的内容真的要打开看吗?
md
::: details 点我
这是一个折叠的内容
:::
渲染结果
点我
这是一个折叠的内容
Card
一个简单的卡片,没什么特别的
md
:::card
一些内容
:::
渲染结果
一些内容
Radio
这是个 ... 收音机?
md
::: radio checked
啊,被选中了
:::
::: radio
咦,我怎么没选中
:::
渲染结果
啊,被选中了
咦,我怎么没选中
LinkCard
链接还是放在卡片里面好看。
由于
VitePress
的自定义功能有限,因此链接卡片采取自定义组件的方式。
vue
<LinkCard url="https://www.imsyy.top" />
可配置项
参数 | 必填性 | 说明 |
---|---|---|
url | 必填 | 跳转地址 |
title | 选填 | 如果未提供,将会自动抓取页面的标题 |
desc | 选填 | 如果未提供,将会自动抓取页面的描述 |
icon | 选填 | 如果未提供,将会自动抓取页面的图标链接 |
渲染结果
引用站外地址,请注意甄别链接安全性暂无标题暂无站点描述
数学公式
主题目前默认支持 MathJax
,基于 markdown-it-mathjax3 插件。
行内使用
行内使用 $
包裹数学公式,例如:
md
这是平方差公式:$a^2 - b^2 = (a + b)(a - b)$
渲染结果
这是平方差公式:
块级使用
块级使用 $$
包裹数学公式,例如:
md
这是泰勒公式:
$$
f(x) = f(a) + f'(a)(x-a) + \frac{f''(a)}{2!}(x-a)^2 + \cdots + \frac{f^{(n)}(a)}{n!}(x-a)^n + R_n(x)
$$
渲染结果
这是泰勒公式:
表格中使用
在表格中使用数学公式,需要使用 \( \)
包裹,例如:
md
| 角度 | 正弦(sin) | 余弦(cos) | 正切(tan) |
| :--: | :----------------------------------: | :----------------------------------: | :----------------------------------: |
| 0° | $sin(0^\circ) = 0$ | $cos(0^\circ) = 1$ | $tan(0^\circ) = 0$ |
| 30° | $sin(30^\circ) = \frac{1}{2}$ | $cos(30^\circ) = \frac{\sqrt{3}}{2}$ | $tan(30^\circ) = \frac{1}{\sqrt{3}}$ |
| 45° | $sin(45^\circ) = \frac{\sqrt{2}}{2}$ | $cos(45^\circ) = \frac{\sqrt{2}}{2}$ | $tan(45^\circ) = 1$ |
| 60° | $sin(60^\circ) = \frac{\sqrt{3}}{2}$ | $cos(60^\circ) = \frac{1}{2}$ | $tan(60^\circ) = \sqrt{3}$ |
| 90° | $sin(90^\circ) = 1$ | $cos(90^\circ) = 0$ | $tan(90^\circ) = \text{undefined}$ |
渲染结果
角度 | 正弦(sin) | 余弦(cos) | 正切(tan) |
---|---|---|---|
0° | |||
30° | |||
45° | |||
60° | |||
90° |
流程图
流程图及时序图可自行安装对应插件以实现,受限于打包大小,主题将不会内置。
自定义标签
如果上方的各类标签不能满足你的需求,你可以自行添加自定义标签。
Markdown-it 如何自定义文中的标签主题文档的衍生文章,说下如何在主题中自定义标签
Curve 主题文档 - 标签使用https://blog.imsyy.top/posts/2024/0307
赞赏博主
评论 隐私政策