时间戳

首页 > 解决方案 > VuePress 主题继承设置

vue.js - VuePress 主题继承设置

问题描述

我正在尝试使用主题继承来修改 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: ...

该网站确实可以工作，但没有使用默认主题，并且页面全部关闭。

标签： vue.jsvuepress

解决方案

如何在 Vuepress 中扩展默认主题

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

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

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

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

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

例如，如果您想扩展侧边栏的主题，则必须复制其层次结构，如下所示：

Vuepress 模块中的默认主题：

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

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

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

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

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

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

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

第 4 步：修复依赖项

如果您的文件依赖于 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 步：根据需要更改主题！

推荐阅读