vue.js - 如何为 Vuepress 的特定页面使用自定义布局？

Question

我正在尝试按照以下步骤使用我自己的 vuepress 自定义布局:

1. 从 Homepage style 开始在 VuePress 文档中，它运行良好。

1. 为特殊布局制作T4V4Home.vue作为弹出的主题/组件文件夹中Home.vue的应对，并添加<h1> This is T4V4Home !</h1>在这些<template>指示如下。

<template>
  <main
    class="home"
    aria-labelledby="main-title"
  >

    <h1> This is T4V4Home !</h1>

    <header class="hero">

1. 按照Custom Layout for Specific Pages的步骤添加布局:T4V4Home在 VuePress 文档中，在 Readme.md 中，但是 <h1> This is T4V4Home !</h1> 没有出现，似乎旧的“Home.vue”仍在使用。

---
layout: T4V4Home
home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:

1. 因此，如下删除home:true，但意外地使用了标准Page布局，如下所示。

---
layout: T4V4Home
#home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:

如何激活和使用我的自定义布局 T4V4Home？感谢您的建议!

Answer 1

您将自定义布局组件放在哪里？

使用 VuePress 自定义布局对我来说工作正常 1.3.0 .

1. 创建 SpecialLayout.vue文件位于 .vuepress/components/SpecialLayout.vue , 并复制 Home.vue 中的所有内容进去。然后添加一行 <h1>This is a test</h1>

2. 更改 README.md 中的 Frontmatter相应地。

---
layout: SpecialLayout
heroImage: https://vuepress.vuejs.org/hero.png
heroText: test
tagline: 
actionText: Quick Start →
actionLink: /guide/
features:
- title: Feature 1 Title
  details: Feature 1 Description
- title: Feature 2 Title
  details: Feature 2 Description
- title: Feature 3 Title
  details: Feature 3 Description
footer: Made by  with ❤️
---

并且我成功获得了新的主页

但是，我不确定这是否正是您要查找的内容，因为如您在上面的屏幕截图中所见，您将丢失 NavBar由于自定义布局而位于页面顶部。

如果你想保留NavBar , 我建议你试试 Theme Inheritance .

1. 将您定制的主页组件放在.vuepress/theme/components/Home.vue .是的，需要命名为Home.vue替换默认主题中的主题。

2. 创建 index.js文件在 .vuepress/theme/index.js有内容

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

并且不要忘记更改 README.md恢复正常。