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

Posted 2023-02-22

【中文标题】如何为 Vuepress 的特定页面使用自定义布局？

【英文标题】：How can I use Custom Layout for Specific Pages of the Vuepress?

【发布时间】：2020-05-26 10:31:43

【问题描述】：

我正在尝试使用我自己的 vuepress 自定义布局，步骤如下：

从 VuePress 文档中的 Homepage style 开始，效果很好。

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

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

    <h1> This is T4V4Home !</h1>

    <header class="hero">

layout: T4V4Home按照VuePress Document，Readme.md中Custom Layout for Specific Pages的步骤，但<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:

所以，删除 home: true 如下，但标准 Page 布局意外使用如下。

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

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

【参考方案1】：

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

使用 VuePress 1.3.0，自定义布局对我来说效果很好。

在.vuepress/components/SpecialLayout.vue 创建一个SpecialLayout.vue 文件，并将Home.vue 中的所有内容复制到其中。然后在其中添加一行<h1>This is a test</h1>。

相应地更改 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。

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

在.vuepress/theme/index.js 创建一个index.js 文件，其中包含内容

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

别忘了将README.md 改回正常状态。

【讨论】：

谢谢你，孙！我已经放入 .vuepress/theme/components。一定是根本原因^^;根据您的建议，我已将其移至 .vuepress/components 并且我已成功展示它。非常感谢您的帮助！