如何为 Vuepress 的特定页面使用自定义布局?
How can I use Custom Layout for Specific Pages of the Vuepress?
我正在尝试使用我自己的 vuepress 自定义布局,步骤如下:
- 从 VuePress 文档中的 Homepage style 开始,效果很好。
- 在被弹出的theme/components文件夹上制作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">
- 添加 layout: T4V4Home 按照 VuePress 文档中 Custom Layout for Specific Pages 的步骤,在 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如下,但是标准的Page布局意外使用如下。
---
layout: T4V4Home
#home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
如何激活和使用我的自定义布局 T4V4Home?感谢您的建议!
您将自定义布局组件放在哪里?
我使用 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 自定义布局,步骤如下:
- 从 VuePress 文档中的 Homepage style 开始,效果很好。
- 在被弹出的theme/components文件夹上制作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">
- 添加 layout: T4V4Home 按照 VuePress 文档中 Custom Layout for Specific Pages 的步骤,在 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如下,但是标准的Page布局意外使用如下。
---
layout: T4V4Home
#home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
如何激活和使用我的自定义布局 T4V4Home?感谢您的建议!
您将自定义布局组件放在哪里?
我使用 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
恢复正常。