继承主题

VuePress为开发者提供了一个默认主题，它能在大多数场景下满足了文档边写者的需求。但是有的需求不太满足，比如文章我希望能显示标题，比如我想做一个归档页面等等，VuePress允许我们继承一个主题。

概念

• 原子主题， 即父主题，类似默认主题这种完全从头实现的主题。
• 派生主题， 即子主题，基于父主题创建的主题

提示

主题继承暂时不支持高阶继承，也就是说，一个派生主题无法被继承

使用

假设你想创建一个继承自VuePress默认主题的派生主题，你只需要在你的主题配置种配置extend选项：

1. 在.vuepress文件夹下新建theme文件夹
2. 配置index.js

    module.exports = (options, ctx) => {
        return {
            extend: '@vuepress/theme-default'
        }
    }

继承策略

父主题的所有能力都会“传递”给子主题，对于文件级别的约定，子主题可以通过在同样的位置创建同名文件来覆盖它；对于某些主题配置选项，如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>

提示

1. 组件的覆盖，最好直接基于父主题中对应组件的代码来修改；
2. 目前，在本地开发子主题，每次创建或移除组件时，你需要手动重启 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

警告

你应该只在这个文件中定义变量。因为 palette.styl 将在根的 stylus 配置文件的末尾引入，作为配置，它将被多个文件使用，所以一旦你在这里写了样式，你的样式就会被多次复制。

index.styl

VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。

全局计算属性

在 VuePress 中，内置了一些核心的计算属性 (opens new window)，以供默认主题 或自定义主题使用。 在 VuePress 中，内置了一些核心的计算属性，以供默认主题 或自定义主题使用。

$site

这是你现在看到的这个网站的 $site 的值：

    {
      "title": "刀刀的知识积累",
      "description": "description: '立志不再懒懒散散的小前端的知识库',",
      "base": "/daodao-knowledge/",
        ...
      ]
    }

$page

这是你现在看到的这个页面的 $page 的值：

    {
        "frontmatter":{
            "author":{
                "link": "https://github.com/Ostask",
                "name": "Ostask"
            },
            "date": "2020-02-07T15:38:36.000Z",
            "permalink": "/pages/jdagee/",
            "title": "修改默认主题"
        }
        .....
    }

$frontmatter

$page.frontmatter 的引用。

$lang

当前页面的语言，默认值为 en-US。

$localePath

当前页面的 locale 路径前缀，默认值为 /，当前页面为 /。

$title

用于当前页面的 <title> 标签的值。

$description

用于当前页面的 <meta name="description" content="..."> 的 content 值。

$themeConfig

即 siteConfig.themeConfig。