如何为Vuepress的特定页面使用自定义布局? [英] How can I use Custom Layout for Specific Pages of the Vuepress?

问题描述

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

I'm trying to use my own Custome Layout of the vuepress as following steps:

1. 从VuePress文档中的首页样式开始，效果很好.

1. Start from Homepage style in the VuePress Document, this is working well.

1. 将用于特殊布局的 T4V4Home.vue 设置为从弹出的theme/components文件夹上的Home.vue处应对，并在这些<template>中添加<h1> This is T4V4Home !</h1>以指示如下

1. Make the T4V4Home.vue for special layout as coping from Home.vue on the theme/components folder which is ejected, and add a <h1> This is T4V4Home !</h1> in these <template> for an indication as follows.

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

    <h1> This is T4V4Home !</h1>

    <header class="hero">

1. 按照.

1. Add layout: T4V4Home as follow as the step of Custom Layout for Specific Pages in the VuePress Document, in the Readme.md, but <h1> This is T4V4Home !</h1> doesn't appear, seems old "Home.vue" is still used.

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

1. 因此，请按照以下步骤删除 home:true ，但是意外地使用了标准的 Page 布局.

1. So, remove home: true as follows, but the standard Page layout is used unexpectedly as follows.

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

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

How can I activate and use my Custom Layout T4V4Home? Thank you for your suggestions!

推荐答案

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

Where are you putting your Custom Layout component?

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

The Custom Layout is working fine for me with VuePress 1.3.0.

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

1. Create a SpecialLayout.vue files at .vuepress/components/SpecialLayout.vue, and copy everything in the Home.vue into it. And then add a line <h1>This is a test</h1> into it.

相应地更改README.md中的Frontmatter.

Change the Frontmatter in the README.md accordingly.

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

However, I'm not sure this is exactly what you are looking for, because as you can see in the screenshot above, you'll lose the NavBar at the top of the page because of Custom Layout.

如果要保留NavBar，建议您尝试主题继承.

If you want to preserve the NavBar, I suggest you try out Theme Inheritance.

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

1. Put your customized homepage component at .vuepress/theme/components/Home.vue. Yes, it needs to be named as Home.vue to replace the one in the default theme.

在.vuepress/theme/index.js上创建包含内容的index.js文件

Create a index.js file at .vuepress/theme/index.js with content

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

并且不要忘记将README.md更改回正常状态.

And don't forget to change the README.md back to normal.

这篇关于如何为Vuepress的特定页面使用自定义布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！