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文档。

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

Answer 2

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

\n

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

\n

我想做的就是向我的导航栏添加一个徽标，核心 vuepress 支持该徽标，但不支持@vuepress/theme-blog。

\n

我之前对Components/Header.vue做了什么

\n

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

\n

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

\n

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

\n

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

\n

.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 .vuepress\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 config.js\n

\n

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

\n

.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 .vuepress\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 config.js\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 theme\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Header.vue\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n

\n

文件内容和调整：

\n

索引.js：

\n

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

\n

Header.vue，调整继承后：

\n

img 保持不变，但请注意@parent-theme，我无法将其用作./Feed同级主题，但必须引用组件目录。

\n

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

\n

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

\n

配置文件

\n

这包括两件事：

\n

\n

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

  \n
\n

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

  \n
\n

\n

  module.exports = {\n    ...\n!   // theme: \'@vuepress/theme-blog\',   theme/index.js handles that.\n\n    ...\n    themeConfig: {\n\n+     logo: "/selectobjects.png",  and the modified Header.vue uses this.\n\n

\n

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

\n

仅供参考使用的版本：

\n

vuepress@1.5.2\n@vuepress/theme-blog@2.2.0\nnpm --version\n6.14.5\nnode --version\nv10.15.0\n

\n