主题配置

pengzhanbo

2085字约7分钟

2024-03-02

基础配置

plugins

  • 类型:PlumeThemePluginOptions
  • 默认值: {}
  • 详情: 对主题内部使用的插件进行自定义配置。

主题使用的插件默认已进行了配置,大多数情况下您不需要进行任何修改,如果需要使用到细致的定制化,请查阅 此文档

locales

  • 类型: Record<string, PlumeThemeLocaleConfig>
  • 默认值: {}
  • 详情: 多语言配置

多语言配置,参考 此文档

多语言配置支持以下 Locale 所有配置选项

Locale 配置

home

  • 类型: false | string
  • 默认值: /
  • 详情: 首页的路径, 它将被用于:
    • 导航栏中 logo的链接;
    • 404页面的 返回首页 的链接;
  • 类型: false | string
  • 默认值: false
  • 详情: 导航栏中的logo。

logoDark

  • 类型 false | string
  • 默认值: false
  • 详情: Dark模式下,导航栏中的logo。

appearance

  • 类型: boolean | 'dark' | 'force-dark
  • 默认值: true

是否启用 深色模式。

  • 如果该选项设置为 true,则默认主题将由用户的首选配色方案决定。
  • 如果该选项设置为 dark,则默认情况下主题将是深色的,除非用户手动切换它。
  • 如果该选项设置为 false,用户将无法切换主题。
  • 如果该选项设置为 force-dark,则用户将无法切换主题,但会强制将主题更改为深色。

此选项注入一个内联脚本,从本地存储恢复用户设置。这确保在呈现页面之前应用 .dark 类以避免闪烁。

appearanceText

  • 类型: string
  • 默认值: 'Appearance'
  • 详情: 导航栏中的主题切换按钮的文本。

hostname

  • 类型: string

  • 默认值: ''

  • 详情:

    部署站点域名。

    hostname 配置为有效域名时,主题将会生成 sitemapseo 相关的内容。

avatar

  • 类型: PlumeThemeAvatar
  • 默认值: {}
  • 详情:配置站点博主的个人信息
    • avatar.url: 头像地址,用于右侧博主信息展示
    • avatar.name: 名称, 用于右侧博主信息展示
    • avatar.description: 个人描述,用于右侧博主信息展示
    • avatar.circle: 是否为圆形头像
    • avatar.location: 用户地理位置
    • avatar.organization: 用户所在组织/公司

示例:

export default {
  theme: themePlume({
    avatar: {
      url: '/avatar.jpg',
      name: '张三',
      description: '此处无银三百两,隔壁王二不曾偷',
      circle: true,
      location: '杭州,中国',
      organization: 'xxx公司',
    }
  })
}

social

  • 类型: false | SocialLink[]

  • 默认值: false

  • 详情: 个人社交信息配置。

    将作为 图标链接 展示在 导航栏最右侧。

    图标可选值:

    • 'github'
    • 'gitlab'
    • 'npm'
    • 'docker'
    • 'discord'
    • 'facebook'
    • 'instagram'
    • 'linkedin'
    • 'mastodon'
    • 'slack'
    • 'twitter'
    • 'x'
    • 'youtube'
    • 'juejin'
    • 'stackoverflow'
    • 'qq'
    • 'weibo'
    • 'bilibili'
    • 'zhihu'
    • 'douban'
    • 'steam'
    • 'xbox'
    • { svg: string }: 自定义图标,传入 svg 字符串

示例:

export default {
  theme: themePlume({
    social: [
      { icon: 'github', link: 'https://github.com/zhangsan' }
    ]
  })
}
  • 类型: string[]

  • 默认值: ['github', 'twitter', 'discord', 'facebook']

  • 详情:

    允许显示在导航栏的社交链接。 该配置仅在 PC 端下有效。

blog

  • 类型: false | BlogOptions

  • 默认值: { link: '/blog/', include: ['**/*.md'], exclude: [] }

  • 详情:

    博客配置。

interface BlogOptions {
  /**
   * blog list link
   *
   * @default '/blog/'
   */
  link?: string

  /**
   * 在 `blog.dir` 目录中,通过 glob string 配置包含文件
   *
   * @default - ['**\*.md']
   */
  include?: string[]

  /**
   * 在 `blog.dir` 目录中,通过 glob string 配置排除的文件
   *
   * README.md 文件一般作为主页或者某个目录下的主页,不应该被读取为 blog文章
   *
   * @default - ['.vuepress/', 'node_modules/', '{README,index}.md']
   */
  exclude?: string[]

  /**
   * 分页配置
   */
  pagination?: false | {
    /**
     * 每页显示的文章数量
     * @default 10
     */
    perPage?: number
    /**
     * 前一页的文本
     * @default 'Prev'
     */
    prevPageText?: string
    /**
     * 后一页的文本
     * @default 'Next'
     */
    nextPageText?: string
  }

  /**
   * 是否启用标签页
   * @default true
   */
  tags?: boolean
  /**
   * 是否启用归档页
   * @default true
   */
  archives?: boolean
}

article

  • 类型: string
  • 默认值: /article/
  • 详情: 文章链接前缀
  • 类型: NavItem[]

  • 默认值: []

  • 详情: 导航栏配置。

    为了配置导航栏元素,你可以将其设置为 导航栏数组 ,其中的每个元素是 NavItem 对象、

    • NavItem 对象应该有一个 text 字段和一个 link 字段,还有一个可选的 activeMatch 字段。
type NavItem = string | {
  text: string
  link: string
  items?: NavItem[]
  /**
   * 支持 iconify 图标,直接使用 iconify name 即可自动加载
   *
   * @see https://icon-sets.iconify.design/
   */
  icon: string
  /**
   * 控制元素何时被激活
   */
  activeMatch?: string
}
  • 示例1:

    export default {
      theme: plumeTheme({
        navbar: [
          // NavbarItem
          { text: 'Foo', link: '/foo/' },
          // NavbarGroup
          {
            text: 'Group',
            item: ['/group/foo/', '/group/bar/'],
          },
          // 字符串 - 页面文件路径
          '/bar/',
        ],
      }),
    }
  • 示例2:

    export default {
      theme: plumeTheme({
        navbar: [
          // 嵌套 Group - 最大深度为 2
          {
            text: 'Group',
            items: [
              {
                text: 'SubGroup',
                items: ['/group/sub/', '/group/sub/bar/'],
              },
            ],
          },
          // 控制元素何时被激活
          {
            text: 'Group 2',
            items: [
              {
                text: 'Always active',
                link: '/',
                // 该元素将一直处于激活状态
                activeMatch: '/',
              },
              {
                text: 'Active on /foo/',
                link: '/not-foo/',
                // 该元素在当前路由路径是 /foo/ 开头时激活
                // 支持正则表达式
                activeMatch: '^/foo/',
              },
            ],
          },
        ],
      }),
    }
  • 类型: false | { message: string; copyright: string }
  • 默认值: false
  • 详情:页脚配置。

notes

  • 类型: false | PlumeThemeNotesOptions

  • 默认值: { link: '/note', dir: 'notes', notes: [] }

  • 详情: 笔记配置, 笔记中的文章默认不会出现在首页文章列表

    你可以将配置的notes 配置到 navbar中,以便浏览查看

详细配置请查看 此文档

selectLanguageName

  • 类型: string

  • 默认值: ''

  • 详情:

    Locale 的语言名称。

    该配置项 仅能在主题配置的 locales 的内部生效 。它将被用作 locale 的语言名称,展示在 选择语言菜单 内。

selectLanguageText

  • 类型: string

  • 默认值: ''

  • 详情:

    选择语言菜单 的文字。

    如果你在站点配置中设置了多个 locales ,那么 选择语言菜单 就会显示在导航栏中仓库按钮的旁边。

selectLanguageAriaLabel

  • 类型: string

  • 默认值: ''

  • 详情:

    选择语言菜单 的 aria-label 属性。

    它主要是为了站点的可访问性 (a11y) 。

sidebarMenuLabel

  • 类型: string

  • 默认值: 'Menu'

  • 详情:

    移动设备下的导航栏中 菜单选项的文字。

returnToTopLabel

  • 类型: string

  • 默认值: 'return to top'

  • 详情:

    移动设备下的导航栏中返回顶部的文字。

outlineLabel

  • 类型: string

  • 默认值: 'On this page'

  • 详情:

    移动设备下的导航栏中大纲标题的文字

repo

  • 类型: string
  • 默认值: ''
  • 详情: 仓库配置
  • 类型: boolean
  • 默认值: true
  • 详情: 是否启用 编辑链接

editLinkText

  • 类型: string
  • 默认值: 'Edit this page'
  • 详情: 编辑链接文字

editLinkPattern

  • 类型: string

  • 默认值: ''

  • 详情: 编辑链接的正则表达式

    示例: ':repo/edit/:branch/:path'

docsRepo

  • 类型: string
  • 默认值: ''
  • 详情: 文档仓库配置, 用于生成 Edit this page 链接,如果为空,默认使用 repo 配置的值

docsBranch

  • 类型: string
  • 默认值: ''
  • 详情: 文档仓库分支配置,用于生成 Edit this page 链接。

docsDir

  • 类型: string
  • 默认值: ''
  • 详情: 文档仓库目录配置,用于生成 Edit this page 链接。

lastUpdated

  • 类型: false | LastUpdatedOptions
  • 默认值: { text: 'Last Updated', formatOptions: { dateStyle: 'short', timeStyle: 'short' } }
  • 详情: 最后更新时间
interface LastUpdatedOptions {
  /**
   * 设置 最后更新时间 的文本
   *
   * @default 'Last updated'
   */
  text?: string

  /**
   * 设置最后更新时间格式的选项。
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @default
   * { dateStyle: 'short', timeStyle: 'short' }
   */
  formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
}

contributors

  • 类型: boolean
  • 默认值: true
  • 详情: 是否显示贡献者

contributorsText

  • 类型: string
  • 默认值: 'Contributors'
  • 详情: 贡献者的文字

prevPageLabel

  • 类型: string
  • 默认值: 'Previous Page'
  • 详情: 上一页的文字

nextPageLabel

  • 类型: string
  • 默认值: 'Next Page'
  • 详情: 下一页的文字

notFound

  • 类型: NotFound | undefined
  • 默认值: undefined
  • 详情: 404 页面配置
interface NotFound {
  code?: string
  title?: string
  quote?: string
  linkLabel?: string
  linkText?: string
}

watermark

  • 类型: boolean | WatermarkOptions
  • 默认值: false
  • 详情: 文章水印配置
interface WatermarkOptions {
  /**
   * 是否全局启用, 在不全局启用时,可以通过 `frontmatter.watermark` 为当前页面启用
   * @default false
   */
  global?: boolean
  /**
   * 非全局启用时,可以通过该字段根据文件路径或页面链接 进行匹配, 来启用水印。
   * 以 `^` 的将被认为为类似于正则表达式进行匹配。
   */
  matches?: string | string[]
  /**
   * 水印之间的水平间隔
   * @default 0
   */
  gapX?: number
  /**
   * 水印之间的垂直间隔
   * @default 0
   */
  gapY?: number

  /**
   * 图片水印的内容,如果与 content 同时传入,优先使用图片水印
   */
  image?: PlumeThemeImage
  /**
   * 水印宽度
   * @default 100
   */
  width?: number
  /**
   * 水印高度
   * @default 100
   */
  height?: number
  /**
   * 水印旋转角度
   * @default -22
   */
  rotate?: number
  /**
   * 水印的内容,如果与 image 同时传入,优先使用图片水印
   */
  content?: string
  /**
   * 水印是否全屏显示
   */
  fullPage?: boolean
  /**
   * 水印透明度
   * @default 0.1
   */
  opacity?: number

  /**
   * 水印的文本颜色
   */
  textColor?: string | { dark: string, light: string }

  /**
   * 是否只在打印时显示
   * @default false
   */
  onlyPrint?: boolean
}