温馨提示:本文翻译自stackoverflow.com,查看原文请点击:vue.js - How can I use Custom Layout for Specific Pages of the Vuepress?
vue.js vuepress

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

发布于 2020-04-29 15:52:31

我正在尝试按照以下步骤使用自己的vuepress的Custome Layout:

  1. 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. 添加布局:T4V4Home,如下所示,作为Readme.md中VuePress文档中“ 特定页面自定义布局”的步骤,但未<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谢谢您的建议!

查看更多

提问者
Ueda Takeyuki
被浏览
256
Sun Haoran 2020-02-14 13:47

您要将“自定义布局”组件放在哪里?

自定义布局对于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

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

并且不要忘记将其README.md恢复为正常。

在此处输入图片说明