pengzhanbo
2085字约7分钟
2024-03-02
PlumeThemePluginOptions
{}
主题使用的插件默认已进行了配置,大多数情况下您不需要进行任何修改,如果需要使用到细致的定制化,请查阅 此文档
Record<string, PlumeThemeLocaleConfig>
{}
多语言配置,参考 此文档
多语言配置支持以下 Locale 所有配置选项
false | string
/
false | string
false
false | string
false
boolean | 'dark' | 'force-dark
true
是否启用 深色模式。
true
,则默认主题将由用户的首选配色方案决定。dark
,则默认情况下主题将是深色的,除非用户手动切换它。false
,用户将无法切换主题。force-dark
,则用户将无法切换主题,但会强制将主题更改为深色。此选项注入一个内联脚本,从本地存储恢复用户设置。这确保在呈现页面之前应用 .dark
类以避免闪烁。
string
'Appearance'
类型: string
默认值: ''
详情:
部署站点域名。
当 hostname
配置为有效域名时,主题将会生成 sitemap
和 seo
相关的内容。
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公司',
}
})
}
类型: 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 端下有效。
类型: 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
}
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
类型: false | PlumeThemeNotesOptions
默认值: { link: '/note', dir: 'notes', notes: [] }
详情: 笔记配置, 笔记中的文章默认不会出现在首页文章列表
你可以将配置的notes 配置到 navbar中,以便浏览查看
详细配置请查看 此文档
类型: string
默认值: ''
详情:
Locale 的语言名称。
该配置项 仅能在主题配置的 locales 的内部生效 。它将被用作 locale 的语言名称,展示在 选择语言菜单 内。
类型: string
默认值: ''
详情:
选择语言菜单 的文字。
如果你在站点配置中设置了多个 locales ,那么 选择语言菜单 就会显示在导航栏中仓库按钮的旁边。
类型: string
默认值: ''
详情:
选择语言菜单 的 aria-label
属性。
它主要是为了站点的可访问性 (a11y) 。
类型: string
默认值: 'Menu'
详情:
移动设备下的导航栏中 菜单选项的文字。
类型: string
默认值: 'return to top'
详情:
移动设备下的导航栏中返回顶部的文字。
类型: string
默认值: 'On this page'
详情:
移动设备下的导航栏中大纲标题的文字
string
''
boolean
true
string
'Edit this page'
类型: string
默认值: ''
详情: 编辑链接的正则表达式
示例: ':repo/edit/:branch/:path'
string
''
Edit this page
链接,如果为空,默认使用 repo
配置的值string
''
Edit this page
链接。string
''
Edit this page
链接。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 }
}
boolean
true
string
'Contributors'
string
'Previous Page'
string
'Next Page'
NotFound | undefined
undefined
interface NotFound {
code?: string
title?: string
quote?: string
linkLabel?: string
linkText?: string
}
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
}