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

Question

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

1. 从VuePress 文档中的主页样式开始，这很好用。

2. 使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">

3. 添加布局：T4V4Home作为VuePress文档中特定页面的自定义布局的步骤，在Readme.md中添加布局：T4V4Home，但<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:

4. 因此，删除home: true如下，但意外使用标准页面布局如下。

---
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. 相应地更改 Frontmatter README.md。

---
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，我建议你试试主题继承。

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

2. 创建一个包含内容的index.js文件.vuepress/theme/index.js

---
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 ??
---

并且不要忘记将其改README.md回正常。