sss

VuePress主题

Quber...大约 5 分钟VuePress主题

VuePress 主题官方文档open in new window

1、Markdown 中的使用

1.1、选项卡

简单示例如下所示：

::: tabs#t1

@tab .Net#id1

.Net

@tab:active Java#id2

Java

@tab Python#id3

Python

:::

渲染效果：

Java

Java

说明：

  • #t1代表的是tabs的值，一般可配合@tab中的值一起使用实现联动显示效果；

  • #id1代表的是@tab的值，如果另一个 tabs 中的 tab 也有该值，则会联动显示（前提是tabs的值也是相同的）；

  • :active代表的是激活某个 tab 作为显示状态。

联动效果：

::: tabs#t1

@tab .Net#id1

.Net

@tab:active Java#id2

Java

@tab Python#id3

Python

:::

::: tabs#t1

@tab .Net#id1

.Net - 1

@tab:active Java#id2

Java - 1

@tab Python#id3

Python - 1

:::

渲染效果：

Java

Java

Java

Java - 1

1.2、代码块分组

此功能和选项卡功能相同，但它是专门为代码块构建的。

代码选项卡只会渲染 @tab 标记后的代码块，其他 Markdown 内容将被忽略。

简单示例如下所示：

::: code-tabs#code1

@tab Js#id1

```js
function getUserInfo() {
    return "Quber";
}
```

@tab Ts#id2

```ts
const getUserInfo = () => {
    return "Quber";
};
```

@tab Css#id3

```css
.user {
    color: #f00;
}
```

:::

渲染结果：

Js
function getUserInfo() {
    return "Quber";
}

1.3、Vue 交互演示

简单示例如下所示：

::: vue-playground Vue 交互演示

@file App.vue

```vue
<script setup>
import { ref } from "vue";

const msg = ref("TEST");
</script>

<template>
    请输入内容：<input v-model="msg" /><br />
    输入的内容：{{ msg }}
</template>
```

:::

渲染结果：

Vue 交互演示

更多使用说明可参见Vue 交互演示open in new window

1.4、上下角标

语法：

  • 使用^^进行上角标标注；

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

简单示例如下所示：

19^th^
H~2~O

渲染结果：

  • 19th

  • H2O

1.5、任务列表

语法：

  • 使用- [ ] 具体文字渲染一个未勾选的任务项；

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

简单示例如下所示：

- [ ] 计划 A

- [x] 计划 B

渲染结果：

1.6、卡片

简单示例如下所示：

```card
title: Quber
desc: 测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息！！！
logo: https://mrhope.site/logo.svg
link: https://mrhope.site
color: #3eaf7c
```

渲染结果：

title: Quber
desc: 测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息！！！
logo: https://mrhope.site/logo.svg
link: https://mrhope.site
color: #3eaf7c

多个 card 如下所示：

:::card

```card
title: Quber
desc: 测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息！！！
logo: https://mrhope.site/logo.svg
link: https://mrhope.site
color: #3eaf7c
```

```card
title: Quber
desc: 测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息！！！
logo: https://mrhope.site/logo.svg
link: https://mrhope.site
color: #3eaf7c
```

:::

渲染结果：

:::card

title: Quber
desc: 测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息！！！
logo: https://mrhope.site/logo.svg
link: https://mrhope.site
color: #3eaf7c

title: Quber
desc: 测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息，测试的描述信息！！！
logo: https://mrhope.site/logo.svg
link: https://mrhope.site
color: #3eaf7c

:::

1.7、标记

语法：

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

简单示例如下所示：

VuePress Theme Hope ==非常== 强大!

渲染结果：

VuePress Theme Hope 非常 强大!

1.8、脚注

具体参见官网open in new window

1.9、自定义容器

简单示例如下所示：

::: info
信息容器。
:::

::: note
注释容器。
:::

::: tip
提示容器
:::

::: warning
警告容器
:::

::: danger
危险容器
:::

::: details
详情容器
:::

::: info 自定义标题

一个有 `代码` 和 [链接](#演示) 的信息容器。

```js
const a = 1;
```

:::

::: note 自定义标题

一个有 `代码` 和 [链接](#演示) 的注释容器。

```js
const a = 1;
```

:::

::: tip 自定义标题

一个有 `代码` 和 [链接](#演示) 的提示容器。

```js
const a = 1;
```

:::

::: warning 自定义标题

一个有 `代码` 和 [链接](#演示) 的警告容器。

```js
const a = 1;
```

:::

::: danger 自定义标题

一个有 `代码` 和 [链接](#演示) 的危险容器。

```js
const a = 1;
```

:::

::: details 自定义标题

一个有 `代码` 和 [链接](#演示) 的详情容器。

```js
const a = 1;
```

:::

::: info 自定义信息
:::

::: note 自定义注释
:::

::: tip 自定义提示
:::

::: warning 自定义警告
:::

::: danger 自定义危险
:::

渲染结果：

相关信息

信息容器。

注

注释容器。

提示

提示容器

注意

警告容器

警告

危险容器

详情

详情容器

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;
自定义标题

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

const a = 1;

自定义信息

自定义注释

自定义提示

自定义警告

自定义危险

1.10、自定义对齐

具体参见官网open in new window

1.11、ECharts

代码
<!-- #region demo -->

::: echarts 折线图

```js
option = {
    title: {
        text: "Stacked Line",
    },
    tooltip: {
        trigger: "axis",
    },
    legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    toolbox: {
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
    ],
};

myChart.setOption(option);
```

:::

<!-- #endregion demo -->
折线图
代码
<!-- #region demo -->

::: echarts 柱状图

```js
option = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    legend: {},
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: [
        {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
    ],
    yAxis: [
        {
            type: "value",
        },
    ],
    series: [
        {
            name: "Direct",
            type: "bar",
            emphasis: {
                focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
            name: "Email",
            type: "bar",
            stack: "Ad",
            emphasis: {
                focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
            name: "Union Ads",
            type: "bar",
            stack: "Ad",
            emphasis: {
                focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
            name: "Video Ads",
            type: "bar",
            stack: "Ad",
            emphasis: {
                focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
            name: "Search Engine",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
                focus: "series",
            },
            markLine: {
                lineStyle: {
                    type: "dashed",
                },
                data: [[{ type: "min" }, { type: "max" }]],
            },
        },
        {
            name: "Baidu",
            type: "bar",
            barWidth: 5,
            stack: "Search Engine",
            emphasis: {
                focus: "series",
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120],
        },
        {
            name: "Google",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
                focus: "series",
            },
            data: [120, 132, 101, 134, 290, 230, 220],
        },
        {
            name: "Bing",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
                focus: "series",
            },
            data: [60, 72, 71, 74, 190, 130, 110],
        },
        {
            name: "Others",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
                focus: "series",
            },
            data: [62, 82, 91, 84, 109, 110, 120],
        },
    ],
};

myChart.setOption(option);
```

:::

<!-- #endregion demo -->
柱状图
代码
<!-- #region demo -->

::: echarts 饼图

```js
option = {
    title: {
        text: "Referer of a Website",
        subtext: "Fake Data",
        left: "center",
    },
    tooltip: {
        trigger: "item",
    },
    legend: {
        orient: "vertical",
        left: "left",
    },
    series: [
        {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
                { value: 1048, name: "Search Engine" },
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
                { value: 300, name: "Video Ads" },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
            },
        },
    ],
};

myChart.setOption(option);
```

:::

<!-- #endregion demo -->
饼图