Warm tip: This article is reproduced from stackoverflow.com, please click
vue.js vuepress

How can I use Custom Layout for Specific Pages of the Vuepress?

发布于 2020-04-23 15:44:45

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

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

enter image description here

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

enter image description here

  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:

enter image description here

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

Questioner
Ueda Takeyuki
Viewed
14
分享
Sun Haoran 2020-02-14 13:47

Where are you putting your Custom Layout component?

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

  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.

  2. 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 ❤️
---

And I successfully get the new HomePage

enter image description here

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.

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

  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.

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

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

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

enter image description here

Ueda Takeyuki 2020-02-14 19:38:28

Thank you, Sun! I had putted to .vuepress/theme/components. It must be root cause ^^; I've moved it to .vuepress/components as your suggestion and I've succeeded to show it. I really appreciate your help!

Related issues

1
How do i get this firebase data to use it outside the loop?
2
BackEndUrl is undefined
3
Center n amount of v-col in vuetify grid with added spacing
4
component has been registered but not used vue/no-unused-components
5
How to assign a function as a value to the property of an object in the Vuex State from a component?
6
Vue download file from link href and Vuetify v-btn
7
Dynamic PixiJS canvas goes wrong after first load in vue app
8
Dynamic v-model using v-for value + string in VueJS 2
9
How to init the store with data from the localstorage?
10
Static image src in Vue.js template