Как я могу использовать Custom Layout для Specifi c страниц Vuepress?

Question

Я пытаюсь использовать свой собственный пользовательский макет vuepress следующим образом:

1. Начните с Стиль домашней страницы в документе VuePress, это работает хорошо.

Создайте 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">

Добавить макет: T4V4Home в качестве шага Пользовательский макет для Specifi c Страницы в документе 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:

Итак, удалите 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, я предлагаю вам попробовать 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 к нормальному состоянию.