Skip to main content

VuePress备忘

常用资料​

扩展默认主题​

1. theme​

新建theme目录,结构如下:

└─ docs
   ├─ .vuepress
   │  ├─ theme
   │  │  ├─ layouts
   │  │  │  └─ Draft.vue
   │  │  └─ index.tx
   │  └─ config.tx
   └─ README.md

2. draft.vue​

Draft.vue内容如下:

<template>
  <Layout>
    <template #page-bottom>
      <div class="my-footer">This is my draft page footer</div>
    </template>
  </Layout>
</template>

<script>
import Layout from "@vuepress/theme-default/lib/client/layouts/Layout.vue";
export default {
  components: {
    Layout,
  },
};
</script>

<style lang="css">
.my-footer {
  text-align: center;
}
</style>

3. theme/index.ts​

theme/index.tx内容如下:

import type { ThemeObject } from '@vuepress/core'
import { path } from '@vuepress/utils'

const localTheme: ThemeObject = {
  name: 'vuepress-theme-local',
  extends: '@vuepress/theme-default',
  layouts: {
    Draft: path.resolve(__dirname, 'layouts/Draft.vue'),
  },
}

export default localTheme

4. config.tx​

config.tx内容如下:

import { defineUserConfig } from 'vuepress'
import type { DefaultThemeOptions } from 'vuepress'
import { path } from "@vuepress/utils";

export default defineUserConfig<DefaultThemeOptions>({

  // 其他配置
  // ...

  // 增加本行,使本地主题生效
  theme: path.resolve(__dirname, "./theme"),

  themeConfig: {
    // 主题配置
    // ...
  }
})

5. layout​

在需要调整的markdown文档修改frontmatter,(注意大小写与layouts/Draft.vue文件一致):

---
layout: Draft
---

扩展Markdown​

任务列表​

  1. 安装插件markdown-it-task-lists
yarn add -D markdown-it-task-lists
  1. 配置插件
// .vuepress/config.ts
export default defineUserConfig<DefaultThemeOptions>({
  extendsMarkdown: md => {
    // 启用任务列表
    // https://github.com/revin/markdown-it-task-lists
    md.use(require('markdown-it-task-lists'), {
      label: true,
      labelAfter: true,
    });
  },
});