主题配置
主题的配置在.vuepress/config.ts
文件的themeConfig
字段中,是在原有配置的基础上做的新增和修改,配置示例请查看:config.ts (opens new window)。
更多官方配置,请查看vuepress文档 (opens new window)。
# 是否打开分类、标签、归档
# category
- 类型:
boolean
- 默认:true
是否打开分类功能。 如打开,会做的事情有:
- 自动生成的front matter包含分类字段
- 页面中显示与分类相关的信息和模块
- 自动生成分类页面(在@pages文件夹)
如关闭,则反之。
# tag
- 类型:
boolean
- 默认:true
是否打开标签功能。 如打开,会做的事情有:
- 自动生成的front matter包含标签字段
- 页面中显示与标签相关的信息和模块
- 自动生成标签页面(在@pages文件夹)
如关闭,则反之。
# archive
- 类型:
boolean
- 默认:true
是否打开归档功能。 如打开,会做的事情有:
- 自动生成归档页面(在@pages文件夹)
如关闭,则反之。
提示
如果你仅仅是想使用这个主题来搭建知识库,并不想使用分类、标签、归档功能,就可以关闭它们。
# 使用分类页、标签页、归档页链接
当你打开了分类、标签、归档功能,就可以在导航或其他地方添加分类页、标签页、归档页的链接:
- 分类页:
/categories/
- 标签页:
/tags/
- 归档页:
/archives/
# 碎片化文章默认分类值
# categoryText
- 类型:
string
- 默认:'随笔'
碎片化文章(_posts文件夹的文章)默认生成的分类值
# 页面风格
# pageStyle v1.12.0 +
- 类型:
string
- 可选值:'card' | 'line' (line在未设置bodyBgImg时才生效)
- 默认:'card'
页面风格,card
时背景显示灰色衬托出卡片样式,line
时背景显示纯色,并且部分模块带线条边框(未设置bodyBgImg时才生效)
# defaultMode v1.12.3 +
- 类型:
string
- 可选值:'auto' | 'light' | 'dark' | 'read'
- 默认:'auto'
默认外观模式,用户未在页面手动修改过模式时才生效,否则以用户设置的模式为准
# body背景大图
# bodyBgImg
- 类型:
string
|array
- 默认:undefined
body背景大图,单张图片使用String,多张图片使用Array, 多张图片时每隔 <bodyBgImgInterval> 秒换一张
# bodyBgImgOpacity v1.4.0 +
- 类型:
number
- 默认:0.5
- 选值范围:0 ~ 1.0
body背景图透明度
# bodyBgImgInterval v1.12.0 +
- 类型:
number
- 默认:15
- 单位:s
body有多张背景大图时的切换间隔
# 文章标题前的图标
# titleBadge
- 类型:
boolean
- 默认:true
是否打开文章标题图标
# titleBadgeIcons
- 类型:
array
- 默认:内置图标
文章标题图标的地址
# 文章内容块的背景底纹
# contentBgStyle v1.4.0 +
- 类型:
number
- 默认:undefined
- 选值:1 => 方格 | 2 => 横线 | 3 => 竖线 | 4 => 左斜线 | 5 => 右斜线 | 6 => 点状
文章内容块的背景底纹
# 侧边栏
# sidebar
- 类型:
srting
|object
|array
- 在默认主题原有的配置上新增两项参数:
'structuring'
自动生成结构化侧边栏{ mode: 'structuring', collapsable: Boolean}
自动生成结构化侧边栏,并设置侧边栏是否可折叠,默认true
提示
如需构建结构化站点请把此配置设置为structuring
或 { mode: 'structuring', collapsable: false}
# sidebarOpen
- 类型:
boolean
- 默认:true
初始状态下是否打开侧边栏
提示
在侧边栏关闭状态下,页面向下滚动时会隐藏顶部导航栏,让用户更专注于阅读。
# 对指定页面禁用侧边栏
你可以通过 front matter 来禁用指定页面的侧边栏:
---
sidebar: false
---
# 碎片化文章的侧边栏
在_posts文件夹的文章会自动在 front matter 添加 sidebar: auto
---
sidebar: auto
---
# 最近更新栏
# updateBar
- 类型:
object
- 默认:
{showToArticle: true, moreArticle: '/archives/'}
- showToArticle 显示到文章页底部,默认true
- moreArticle “更多文章”跳转的页面,默认'/archives/'
最近更新栏,显示于文章页底部和简约版首页文章列表
# 非文章页的设置
对于非文章页,如目录页、关于、友情链接等自定义页面,最好在front matter设置article: false
,设置之后这个页面将被认定为非文章页,不显示面包屑和作者、时间,不显示最近更新栏,不会参与到最近更新文章的数据计算中。
---
article: false
---
# 右侧文章大纲栏
# rightMenuBar v1.6.3 +
- 类型:
boolean
- 默认:true
是否显示右侧文章大纲栏。设置为false
或屏宽小于1300px
时,文章大纲将与左侧侧边栏混合在一起。
(注:在屏宽小于1300px
下无论如何都不显示右侧文章大纲栏。)
# 快捷翻页按钮
# pageButton v1.4.3 +
- 类型:
boolean
- 默认:true
是否显示快捷翻页按钮 (此按钮是文章页左右两边的箭头按钮,小屏中不会显示。)
# 文章作者信息
# author
- 类型:
string
|{name: String, link: String}
- 默认:undefined
- 属性:
- name 作者名称
- link 作者链接
文章默认的作者信息
# 指定的文章作者信息
你也可以在指定的文章front matter设置作者信息,优先级比默认作者信息高,示例:
---
author:
name: 作者名
link: https://xxx.com
---
或
---
author: 作者名
---
# 博主信息
# blogger
- 参数和类型:
{avatar: String, name: String, slogan: String}
- 默认:undefined
- avatar 头像,必需
- name 博主名称,必需
- slogan 标语,可选
博主信息显示于首页博主信息栏
# 社交图标
# social
- 参数和类型:
{iconfontCssFile: String, icons: [{iconClass: String, title: String, link: String}]}
- 默认:undefined
- iconfontCssFile 可选,阿里图标库(或其他)的在线css字体图标文件地址,对于主题没有的图标可自由添加
- icons 图标列表,数量自由
- iconClass 图标的Class名称
- title 图标的title
- link 图标的跳转链接
社交图标显示于博主信息栏和页脚栏
# 主题内置的社交图标 v1.2.2+, 部分v1.7.2+
微信 icon-weixin | icon-QQ | 邮件 icon-youjian | npm icon-npm | github icon-github | gitee icon-gitee | 微博 icon-weibo |
知乎 icon-zhihu | 语雀 icon-yuque | 豆瓣 icon-douban | 掘金 icon-juejin | 简书 icon-jianshu | 思否 icon-sf | 博客园 icon-bokeyuan |
CSDN icon-csdn | v2ex icon-v2ex | 抖音 icon-douyin | 哔哩哔哩 icon-bilibili | youtube icon-youtube | icon-facebook | icon-twitter |
telegram icon-telegram | RSS icon-rss | 耳机 icon-erji | 猫咪 icon-mao | 书本 icon-shuben | 相册 icon-xiangce |
# 扩展自动生成front matter
# extendFrontmatter v1.11.0 +
- 类型:
Object
- 默认:undefined
当.md
文件的front matter不存在extendFrontmatter内相应的字段时,将在运行开发服务dev
或打包build
时自动添加,但不会覆盖已有的数据。
例子:
extendFrontmatter: {
author: {
name: 'xugaoyi',
link: 'https://github.com/xugaoyi'
},
titleTag: '',
}
生成到front matter:
---
author:
name: xugaoyi
link: https://github.com/xugaoyi
titleTag:
---
# 页脚版权栏
# footer
- 参数和类型:
{createYear: Number | String, copyrightInfo: String}
- 默认:undefined
- createYear 博客创建的年份
- copyrightInfo 可以配置包括版权信息、备案信息在内的所有信息,支持a标签
页脚版权栏信息,原默认主题在首页的front matter中的footer
配置项已弃用。
# 自定义html模块
可用于插入广告模块
# htmlModules v1.7.0 +
类型:
object
默认:undefined
属性:
homeSidebarB
首页侧边栏底部sidebarT
所有左侧边栏顶部sidebarB
所有左侧边栏底部pageT
页面顶部pageB
页面底部pageTshowMode
页面顶部的显示方式未配置
默认所有页面显示'article'
仅文章页①显示'custom'
仅自定义页①显示
pageBshowMode
页面底部的显示方式未配置
默认全局显示'article'
仅文章页①显示'custom'
仅自定义页①显示
windowLB
全局窗口左下角②windowRB
全局窗口右下角②
①注:在.md文件front matter配置
article: false
的页面是自定义页,未配置的默认是文章页(首页除外)。②注:windowLB 和 windowRB:1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。
格式:
htmlModules: {
homeSidebarB: htmlString,
sidebarT: htmlString,
sidebarB: htmlString,
pageT: htmlString,
pageB: htmlString,
pageTshowMode: 'article' | 'custom',
pageBshowMode: 'article' | 'custom',
windowLB: htmlString,
windowRB: htmlString,
}