主题配置

主题的配置在.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 => 点状

文章内容块的背景底纹

# 侧边栏

类型：srting | object | array
在默认主题原有的配置上新增两项参数：
- 'structuring' 自动生成结构化侧边栏
- { mode: 'structuring', collapsable: Boolean} 自动生成结构化侧边栏，并设置侧边栏是否可折叠，默认true

提示

如需构建结构化站点请把此配置设置为structuring 或 { mode: 'structuring', collapsable: false}

# sidebarOpen

类型：boolean
默认：true

初始状态下是否打开侧边栏

提示

在侧边栏关闭状态下，页面向下滚动时会隐藏顶部导航栏，让用户更专注于阅读。

# 对指定页面禁用侧边栏

你可以通过 front matter 来禁用指定页面的侧边栏：

---
sidebar: false
---

1
2
3

# 碎片化文章的侧边栏

在_posts文件夹的文章会自动在 front matter 添加 sidebar: auto

---
sidebar: auto
---

1
2
3

# 最近更新栏

# updateBar

类型：object
默认：{showToArticle: true, moreArticle: '/archives/'}
- showToArticle 显示到文章页底部，默认true
- moreArticle “更多文章”跳转的页面，默认'/archives/'

最近更新栏，显示于文章页底部和简约版首页文章列表

# 非文章页的设置

对于非文章页，如目录页、关于、友情链接等自定义页面，最好在front matter设置article: false，设置之后这个页面将被认定为非文章页，不显示面包屑和作者、时间，不显示最近更新栏，不会参与到最近更新文章的数据计算中。

---
article: false
---

1
2
3

# 右侧文章大纲栏

# 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: 作者名
---

1
2
3
4
5
6
7
8
9

# 博主信息

# blogger

参数和类型：{avatar: String, name: String, slogan: String}
默认：undefined
- avatar 头像，必需
- name 博主名称，必需
- slogan 标语，可选

博主信息显示于首页博主信息栏

# 社交图标

参数和类型：{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

facebook

icon-facebook

twitter

icon-twitter

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: '',
}

1
2
3
4
5
6
7

生成到front matter：

---
author:
  name: xugaoyi
  link: https://github.com/xugaoyi
titleTag:
---

1
2
3
4
5
6

# 页脚版权栏

参数和类型：{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,
 }

1
2
3
4
5
6
7
8
9
10
11

编辑

上次更新: 2024/11/14, 23:52:33

首页配置→

主题配置

# 是否打开分类、标签、归档

# category

# tag

# archive

# 使用分类页、标签页、归档页链接

# 碎片化文章默认分类值

# categoryText

# 页面风格

# pageStyle v1.12.0 +

# defaultMode v1.12.3 +

# body背景大图

# bodyBgImg

# bodyBgImgOpacity v1.4.0 +

# bodyBgImgInterval v1.12.0 +

# 文章标题前的图标

# titleBadge

# titleBadgeIcons

# 文章内容块的背景底纹

# contentBgStyle v1.4.0 +

# 侧边栏

# sidebar

# sidebarOpen

# 对指定页面禁用侧边栏

# 碎片化文章的侧边栏

# 最近更新栏

# updateBar

# 非文章页的设置

# 右侧文章大纲栏

# rightMenuBar v1.6.3 +

# 快捷翻页按钮

# pageButton v1.4.3 +

# 文章作者信息

# author

# 指定的文章作者信息

# 博主信息

# blogger

# 社交图标

# social

# 主题内置的社交图标 v1.2.2+, 部分v1.7.2+

# 扩展自动生成front matter

# extendFrontmatter v1.11.0 +

# 页脚版权栏

# footer

# 自定义html模块

# htmlModules v1.7.0 +