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”下创建一个名为“主题”的文件夹

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

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

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

第2步:重新创建正确的文件夹层次结构，尊重“@vuepress/主题-默认”下的文件夹层次结构

例如，如果要扩展侧栏的主题，则必须按以下方式复制其层次结构：

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-主主题’代表‘节点-模块/@vuepress/主题-默认’。

第五步:根据你的意愿改变主题！

Answer 2

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

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

我想要做的就是添加一个徽标到我的肚脐，这是支持核心vuepress，但不是@vuepress/theme-blog。

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

我通过直接修改<img>标签在node_modules下添加了一个标记，并使它成功地显示了我的徽标，但之后我正在寻找一种方法，在每次安装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-主题，我不能使用./Feed作为兄弟，而是必须引用组件目录。

+           <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。

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修改他们的组件，我希望能够看到我在这里的最初定制与当时的核心组件相比是如何的。

使用的FYI版本：

vuepress@1.5.2
@vuepress/theme-blog@2.2.0
npm --version
6.14.5
node --version
v10.15.0