此页内容

约 655 字大约 2 分钟

2022-04-09

notes 功能,是为了在本主题满足了 Blog的基本功能后,期望能够 以 note 或者 book 的形式聚合文章而形成的,形式上类似于 vuepress 默认主题的功能。同时也减少了配置的复杂度。

配置

在主题函数的 notes 字段中进行配置。

import { defineUserConfig } from 'vuepress'
import { themePlume } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: themePlume({
    notes: {
      // this
    }
  })
})

多语言下配置:

import { defineUserConfig } from 'vuepress'
import { themePlume } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: themePlume({
    locales: {
      '/': {
        notes: {
          // this
        }
      },
      '/en/': {
        notes: {
          // this
        }
      }
    }
  })
})

配置字段

dir

  • 类型: string

  • 默认值: '_notes'

  • 详情:所有notes存放的目录,该目录相对于sourceDir

    示例

    ├─ {sourceDir}
    │  ├─ _notes
    │  │  └─ typescript学习笔记
    │  └─ README.md
  • 类型: string
  • 默认值: '/note/'
  • 详情: 作为notes内的文章链接的前缀。自定义是请以 '/' 开头

notes

  • 类型: PlumeThemeNotesItem[]
  • 默认值: []
  • 详情: note数组,配置多个 note
interface PlumeThemeNotesItem {
  /**
   * note 标题
   */
  text?: string
  /*
   * note 链接,相对于 前面配置的 link。
   * 如 /typescript-learn/  映射到访问链接则为 /note//typescript-learn/
   */
  link: string
  /*
   * note 所在的目录,相对于 前面配置的 dir
   * 如 typescript 则实际路径为 {sourceDir}/_notes/typescript
   */
  dir: string
  /*
   * 当前 note 的sidebar配置
   */
  sidebar?: PlumeThemeSidebarConfigOptions | 'auto'
}
type PlumeThemeSidebarConfigOptions = (PlumeThemeNotesConfigItem | string)[]

interface PlumeThemeNotesConfigItem {
  text: string
  link?: string
  children: PlumeThemeNotesConfigItem[]
}

notes[index].sidebar

这个字段是用于配置当前 note 的 sidebar 左侧导航栏

  • 类型: 'auto' | (PlumeThemeNotesConfigItem | string)[]
  • 详情:
    • 如果子元素为字符串时,可以是相对于 dir目录的md文件路径,可以省略.md后缀,也可以是生成的文章,frontmatter中的 permalink的链接, 如果为空,则表示当前文件夹下的 README.md文件

    • 如果子元素是PlumeThemeNotesConfigItem, 其中 text 表示 sidebar显示的文案, link 等价于 上一条 string 的规则。 children 可以继续嵌套(PlumeThemeNotesConfigItem | string)

    • 如果指定配置为 'auto' ,将通过文件路径地址,自动推导生成 sidebar

示例

_notes 文件夹下用如下文件结构

_notes
└── vuepress-theme-plume
    ├── README.md
    ├── note配置.md
    ├── 主题配置.md
    ├── 快速开始.md
    ├── 编写文章.md
    ├── 页面配置.md
    └── 主题插件配置.md

则可以进行如下配置:

config.ts
import { defineUserConfig } from 'vuepress'
import type {PlumeThemeOptions } from 'vuepress-theme-plume'
import { plumeTheme } from 'vuepress-theme-plume'
import notes from './notes.ts'

export default defineUserConfig<PlumeThemeOptions>({
  theme: plumeTheme({
    notes: {
      dir: '_notes',
      link: '/note/',
      notes,
    }
  })
})

其效果 即为 本文档 左侧 sidebar 展示效果。