VuePress 主题继承设置

Posted 2023-02-22

【中文标题】VuePress 主题继承设置

【英文标题】：VuePress theme inheritance setup

【发布时间】：2019-12-01 23:36:33

【问题描述】：

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

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

【问题讨论】：

所以看起来默认主题实际上并没有被首先扩展。我在网上的例子中看到终端显示Apply theme local (extends @vuepress/theme-default)，这在我的情况下没有发生。当我按照文档将其添加到我的配置文件时，我的 extend: '@vuepress/theme-default' 命令是否在正确的文件中？

【参考方案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 复制现有的进行修改。

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

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

【讨论】：

谢谢！你如何扩展默认的themeConfig。例如，从我的.vuepress/theme/index.js 我想做：module.exports = extend: "@vuepress/theme-default", navbar: false 。但这不起作用。

@CyrilF 对于这些类型的设置，您需要将它们放入您的 .vuepress/config.js 文件中

谢谢，最后我得到了答案：github.com/vuejs/vuepress/issues/2296

【参考方案2】：

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

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

我想要做的就是在我的导航栏上添加一个徽标，核心 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" >
            <NavLink link="/" class="home-link"> $site.title  </NavLink>
          </div>
          <div class="header-right-wrap">

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

（减去 public 和其他来自 tree -a -I 'public|about|_issues|_posts' 的东西）

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

final 目录层次结构，遵循 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" >
....
< import Feed from './Feed'
---
> import Feed from '@parent-theme/components/Feed' ?

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

config.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