修改默认主题
# 继承主题
VuePress为开发者提供了一个默认主题，它能在大多数场景下满足了文档边写者的需求。但是有的需求不太满足，比如文章我希望能显示标题，比如我想做一个归档页面等等，VuePress允许我们继承一个主题。
# 概念
- 原子主题， 即父主题，类似默认主题这种完全从头实现的主题。
- 派生主题， 即子主题，基于父主题创建的主题
提示
主题继承暂时不支持高阶继承，也就是说，一个派生主题无法被继承
# 使用
假设你想创建一个继承自VuePress默认主题的派生主题，你只需要在你的主题配置种配置extend选项：
- 在
.vuepress文件夹下新建theme文件夹 - 配置
index.js
module.exports = (options, ctx) => {
return {
extend: '@vuepress/theme-default'
}
}
2
3
4
5
# 继承策略
父主题的所有能力都会“传递”给子主题，对于文件级别的约定，子主题可以通过在同样的位置创建同名文件来覆盖它；对于某些主题配置选项，如gloabalLayout，子主题也可以通过同名配置来覆盖它。
- 全局组件，即放置在
theme/global-components中的Vue组件。 - 组件，即放置在
theme/components中的Vue组件。 - 全局的样式和调色板，即放置在
theme/styles中的index.styl和palette.styl。 - HTML 模板，即放置在
theme/templates中的dev.html和ssr.html。 - 主题水平的客户端增强文件，即
theme/enhanceApp.
# 组件的覆盖
你可能想要在子主题中覆盖父主题中的同名组件，默认情况下，当父主题中的组件都使用相对路径引用其他组件时，你将不可能做到这一点，因为你无法在运行时修改父主题的代码。
VuePress 则通过一种巧妙的方式实现了这种需求，但这对父主题有一定的要求——所有的组件都必须使用 @theme 别名来引用其他组件。
例如：
<script>
import Navbar from '@theme/components/Navbar.vue'
// ...
</script>
2
3
4
提示
- 组件的覆盖，最好直接基于父主题中对应组件的代码来修改；
- 目前，在本地开发子主题，每次创建或移除组件时，你需要手动重启 Dev Server。
# 覆盖默认主题样式
默认主题的样式都在 theme/styles 中的 index.styl 和 palette.styl。
# palette.style
默认主题的palette.styl里定义了一些变量，我们可以在theme下相同位置创建palette.styl，用来覆盖变量
你可以调整的一些变量如下:
// 颜色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px
// 响应式变化点
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
警告
你应该只在这个文件中定义变量。因为 palette.styl 将在根的 stylus 配置文件的末尾引入，作为配置，它将被多个文件使用，所以一旦你在这里写了样式，你的样式就会被多次复制。
# index.styl
VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。
# 全局计算属性
在 VuePress 中，内置了一些核心的计算属性 (opens new window)，以供默认主题 或自定义主题使用。 在 VuePress 中，内置了一些核心的计算属性 (opens new window)，以供默认主题 或自定义主题使用。
# $site
这是你现在看到的这个网站的 $site 的值：
{
"title": "刀刀的知识积累",
"description": "description: '立志不再懒懒散散的小前端的知识库',",
"base": "/daodao-knowledge/",
...
]
}
2
3
4
5
6
7
# $page
这是你现在看到的这个页面的 $page 的值：
{
"frontmatter":{
"author":{
"link": "https://github.com/Ostask",
"name": "Ostask"
},
"date": "2020-02-07T15:38:36.000Z",
"permalink": "/pages/jdagee/",
"title": "修改默认主题"
}
.....
}
2
3
4
5
6
7
8
9
10
11
12
# $frontmatter
$page.frontmatter 的引用。
# $lang
当前页面的语言，默认值为 en-US。
# $localePath
当前页面的 locale 路径前缀，默认值为 /，当前页面为 /。
# $title
用于当前页面的 <title> 标签的值。
# $description
用于当前页面的 <meta name="description" content="..."> 的 content 值。
# $themeConfig
即 siteConfig.themeConfig。