2

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

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

4

2 回答 2

10

如何在 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 步：根据需要更改主题！

于 2019-12-10T10:36:11.053 回答
4

非常感谢@leas。由于我设法在他们的帮助下让它工作，我将分享一个覆盖组件的具体案例，而不是默认主题。

在这种情况下，我想覆盖Header.vueTheme@vuepress/theme-blog并且还需要增强基本主题配置。

我想做的就是在我的导航栏上添加一个徽标，它受核心 vuepress 支持，但不支持@vuepress/theme-blog.

我事先对components/Header.vue所做的事情

我通过在node_modules<img>下直接修改它添加了一个标签，并让它成功显示我的徽标，但后来我正在寻找一种方法，不必在每次 npm 安装后覆盖它。

        <div class="header-wrapper">
          <div class="title">
+         <img v-if="$themeConfig.logo" :src="$themeConfig.logo" alt="logo">
            <NavLink link="/" class="home-link">{{ $site.title }} </NavLink>
          </div>
          <div class="header-right-wrap">

.vuepress下的起始目录层次结构

（减去公众和其他东西通过tree -a -I 'public|about|_issues|_posts'）

.
└── .vuepress
    └── config.js

最终目录层次结构，遵循 leas 的回答：

.
└── .vuepress
    ├── config.js
    └── theme
        ├── components
        │   └── Header.vue
        └── index.js

文件内容和调整：

index.js：

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

Header.vue，调整继承后：

img 保持不变，但请注意@parent-theme并且我不能将./Feed其用作兄弟，但必须参考 components 目录。

+           <img v-if="$themeConfig.logo" :src="$themeConfig.logo" alt="logo">
....
< import Feed from './Feed'
---
> import Feed from '@parent-theme/components/Feed'

我怎么知道我必须这样做？好吧，该页面无法正常工作，并且 console.log 显示了一个编译错误./Feed。按照建议查看了https://v1.vuepress.vuejs.org/theme/inheritance.html#inheritance-strategy。

配置.js

这包括两件事：

  • 摆脱直接的主题规范，因为现在由theme/index.js处理。

  • 更改主题配置。您不需要像人们想要的那样“覆盖”父主题配置。 您的 config.js将由基本主题和插件使用，您只需要在主题覆盖中正确使用引用您的自定义内容。

  module.exports = {
    ...
!   // theme: '@vuepress/theme-blog',   theme/index.js handles that.

    ...
    themeConfig: {

+     logo: "/selectobjects.png",  and the modified Header.vue uses this.

注意：我将复制一份核心Header.vue并保存。未来，如果@vuepress/theme-blog修改了他们的，我希望能够看到我这里的原始定制与他们当时的核心组件相比如何。

使用的仅供参考的版本：

vuepress@1.5.2
@vuepress/theme-blog@2.2.0
npm --version
6.14.5
node --version
v10.15.0
于 2020-06-15T21:55:10.610 回答