windstarry's blog

Appearance

内置第三方插件能力 ​

tabs ​

  • Type: boolean

支持局部的tabs面板，默认开启

一点说明

基于 vitepress-plugin-tabs@0.2.0 内置实现

效果如下

一些内容

一些内容

一些内容

简单的使用方式如下（效果如上面的示例）

md
:::=tabs
::tab1
一些内容

一些内容

一些内容

::tab2
一些内容 。。。
:::
:::=tabs
::tab1
一些内容

一些内容

一些内容

::tab2
一些内容 。。。
:::

共享状态的使用方式如下

md
:::=tabs=ab
::a
a content

::b
b content
:::

:::=tabs=ab
::a
a content 2

::b
b content 2
:::
:::=tabs=ab
::a
a content

::b
b content
:::

:::=tabs=ab
::a
a content 2

::b
b content 2
:::

a content

a content 2

不需要也可以关闭

ts
// .vitepress/blog-theme.ts
const blogTheme = getThemeConfig({
  tabs: false
})
// .vitepress/blog-theme.ts
const blogTheme = getThemeConfig({
  tabs: false
})

Mermaid - 图表 ​

  • Type: boolean|object

通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。

一点说明

基于 vitepress-plugin-mermaid 实现

简单语法如下，详细流程图语法见 Mermaid 中文文档

```mermaid
flowchart TD
  Start --> Stop
```

效果如下

null

默认开启，可以通过mermaid进行进一步配置，或关闭

ts
const blogTheme = getThemeConfig({
  mermaid: false
})
const blogTheme = getThemeConfig({
  mermaid: false
})
ts
const blogTheme = getThemeConfig({
  mermaid: {
    // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
  }
})
const blogTheme = getThemeConfig({
  mermaid: {
    // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
  }
})

下面看一下官方其它案例

时序图

null

甘特图

null