vue.js - VuePress 主题继承设置

Question

我正在尝试使用主题继承来修改 VuePress 默认主题导航栏。阅读 1.x 文档后，我相信我正在应用推荐的内容，但网站构建不正确。

我已将 extend = '@vuepress/theme-default' 添加到我的 config.toml 文件中，并创建了一个名为 .vuepress/theme/的目录components/ 我已将文件 Navbar.vue 添加到其中。

生成站点时，我的终端会给我以下警告:

warning [vuepress] Cannot resolve Layout.vue file in undefined, fallback to default layout: ...

网站可以用，但是没有使用默认主题，页面全部关闭。

Answer 1

如何在Vuepress中扩展默认主题

第 1 步:在“./vuepress”下创建一个名为 « theme » 的文件夹

在此文件夹中创建一个名为 « index.js » 的文件，其中包含以下行:

module.exports = {
    extend: '@vuepress/theme-default'
}

通过这样做，您指定要扩展默认主题。

第 2 步:根据“@vuepress/theme-default”下的文件夹重新创建正确的文件夹层次结构

例如，如果你想扩展侧边栏的主题，你将不得不按如下方式复制它的层次结构:

Vuepress 模块中的默认主题:

@vuepress
  |— theme-default
     |— components
        |— Sidebar.vue

自己项目中默认主题的扩展:

./vuepress
    |— theme
       |— components
          |— Sidebar.vue

要了解有关文件级约定的更多信息，请查看 Vuepress documentation .

第 3 步:添加布局、组件或样式元素

您可以从头开始创建新的组件或样式元素，也可以从 Vuepress 复制现有组件或样式元素进行修改。

将文件放在正确的文件夹中，如果已有文件，则保留其原始名称。

第四步:修复依赖

如果您的文件依赖于 Vuepress 模块中的其他文件，则需要使用“@parent-theme”关键字指定它。

例如:

import { endingSlashRE, outboundRE } from  ‘../util’

成为

import { endingSlashRE, outboundRE } from '@parent-theme/util’

和

@require ‘../styles/wrapper.styl’

成为

@require '~@parent-theme/styles/wrapper.styl’

你可以认为'@parent-theme'代表'node-module/@vuepress/theme-default'。

第 5 步:根据需要更改主题!