VuePress 主题继承设置
VuePress theme inheritance setup
我正在尝试使用主题继承修改 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: ...
网站可以用，但是没有使用默认主题，页面全部关闭。
如何在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 步：根据需要更改主题！
非常感谢@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" alt="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 用作兄弟，但必须参考组件目录.
+ <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修改他们的，我想看看我这里原来的定制和他们当时的核心组件相比如何。
仅供参考 使用的版本：
vuepress@1.5.2
@vuepress/theme-blog@2.2.0
npm --version
6.14.5
node --version
v10.15.0
我正在尝试使用主题继承修改 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: ...
网站可以用，但是没有使用默认主题，页面全部关闭。
如何在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 步：根据需要更改主题！
非常感谢@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" alt="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 用作兄弟，但必须参考组件目录.
+ <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修改他们的，我想看看我这里原来的定制和他们当时的核心组件相比如何。
仅供参考 使用的版本：
vuepress@1.5.2
@vuepress/theme-blog@2.2.0
npm --version
6.14.5
node --version
v10.15.0