GH BLOGS

Appearance

vitepress 中文文档 官网

Header Anchors ​

会自动为md文件标题添加锚链接

md
## 标题
### 板块一
## 标题
### 板块一
md
[内部链接](./起步)
[外部链接](https://github.com/vuejs/vitepress)
[内部链接](./起步)
[外部链接](https://github.com/vuejs/vitepress)

表格 ​

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 |
TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

Emoji ​

😁 💯

查看所有符号

自定义容器 ​

  • 默认标题

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

  • 自定义标题

STOP

Danger zone, do not proceed

查看源码
js
console.log('Hello, VitePress!')
console.log('Hello, VitePress!')

代码语法高亮 ​

html
<span v-for="i in 3">{{ i }}</sspan>
<span v-for="i in 3">{{ i }}</sspan>
json
{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}
{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

给代码块开启行号 ​

js
export default defineConfig({
    markdown: {
        lineNumbers: true,
    }
})
export default defineConfig({
    markdown: {
        lineNumbers: true,
    }
})

静态资源绝对路径引入 ​

md
![图片](/logo.webp)
![图片](/logo.webp)

图片

使用vue ​

md
{{1 + 1}}
{{1 + 1}}

2

局部组件 ​

md
<SvgLoading />
<script setup>
    import SvgLoading from '/components/css/SvgLoading.vue';
</script>
<SvgLoading />
<script setup>
    import SvgLoading from '/components/css/SvgLoading.vue';
</script>

使用第三方组件库 ​

  • 全局引入
ts
// /theme/index.ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import Theme from 'vitepress/theme';
// @ts-ignore
import { useComponents } from './useComponents';
import './style.css';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

export default {
  extends: Theme,
  Layout: () => {
    return h(Theme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    });
  },
  enhanceApp({ app, router, siteData }) {
      app.use(Antd);
  },
};
// /theme/index.ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import Theme from 'vitepress/theme';
// @ts-ignore
import { useComponents } from './useComponents';
import './style.css';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

export default {
  extends: Theme,
  Layout: () => {
    return h(Theme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    });
  },
  enhanceApp({ app, router, siteData }) {
      app.use(Antd);
  },
};
  • md中直接使用
markdown
<a-button>这是一个按钮</a-button>
<a-button>这是一个按钮</a-button>

使用demo ​

  • 安装插件 vitepress-theme-demoblock
bash
pnpm i -D vitepress-theme-demoblock
pnpm i -D vitepress-theme-demoblock
  • 全局注册
ts
// /theme/index.ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import Theme from 'vitepress/theme';
// @ts-ignore
import { useComponents } from './useComponents';
import './style.css';
import Demo from 'vitepress-theme-demoblock/dist/client/components/Demo.vue';
import DemoBlock from 'vitepress-theme-demoblock/dist/client/components/DemoBlock.vue';

export default {
  extends: Theme,
  Layout: () => {
    return h(Theme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    });
  },
  enhanceApp({ app, router, siteData }) {
      app.component('Demo', Demo);
      app.component('DemoBlock', DemoBlock);
  },
};
// /theme/index.ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import Theme from 'vitepress/theme';
// @ts-ignore
import { useComponents } from './useComponents';
import './style.css';
import Demo from 'vitepress-theme-demoblock/dist/client/components/Demo.vue';
import DemoBlock from 'vitepress-theme-demoblock/dist/client/components/DemoBlock.vue';

export default {
  extends: Theme,
  Layout: () => {
    return h(Theme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    });
  },
  enhanceApp({ app, router, siteData }) {
      app.component('Demo', Demo);
      app.component('DemoBlock', DemoBlock);
  },
};
  • 用例

code-group ​

sh
$ npm add -D vitepress
$ npx vitepress init
$ npm add -D vitepress
$ npx vitepress init
sh
$ pnpm add -D vitepress
$ pnpm dlx vitepress init
$ pnpm add -D vitepress
$ pnpm dlx vitepress init

Copyright © 2023 YGHHJS