我正在尝试按照以下步骤使用自己的vuepress的Custome Layout:
<h1> This is T4V4Home !</h1>
在这些<template>
用于指示如下。<template>
<main
class="home"
aria-labelledby="main-title"
>
<h1> This is T4V4Home !</h1>
<header class="hero">
<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:
---
layout: T4V4Home
#home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
如何激活和使用自定义布局T4V4Home?谢谢您的建议!
您要将“自定义布局”组件放在哪里?
自定义布局对于VuePress来说对我来说很好用1.3.0
。
在创建一个SpecialLayout.vue
文件.vuepress/components/SpecialLayout.vue
,然后将Home.vue中的所有内容复制到其中。然后在其中添加一行<h1>This is a test</h1>
。
相应地更改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
,建议您尝试主题继承。
将自定义的首页组件放在.vuepress/theme/components/Home.vue
。是的,它需要命名为Home.vue
替换默认主题中的一个。
创建包含内容的index.js
文件.vuepress/theme/index.js
module.exports = {
extend: '@vuepress/theme-default'
}
并且不要忘记将其README.md
恢复为正常。
谢谢你,孙!我已经放到.vuepress / theme / components了。它必须是根本原因^^; 根据您的建议,我已将其移至.vuepress / components,并且已成功展示。非常感谢您的帮助!