Table of Contents
# Add more pages
You can add more pages.
First, create another directory, and put a index.md
or README.md
in it:
root
├── .vuepress
│ └── config.js
├── _post
│ └── 2019-01-20-hello-world.md
└── custom-pages
└── index.md
Then, add nav in your .vuepress/config.js
:
module.exports = {
// ...
themeConfig: {
nav: [
{ text: 'Home', link: '/', exact: true },
{ text: 'Posts', link: '/posts/', exact: false },
{ text: 'Custom Pages', link: '/custom-pages/', exact: false },
],
},
}
# Custom Layout
You can use custom layout for your pages.
Add you custom layout in .vuepress/components/CustomLayout.vue
:
<!-- .vuepress/components/CustomLayout.vue -->
<template>
<div class="custom-layout">
<!-- .main-div is the block with white background -->
<div class="main-div">
This is a custom layout
</div>
<div class="main-div">
<!-- <Content /> is to show the rendered markdown content of this page -->
<Content class="content" />
</div>
</div>
</template>
<script>
export default {
name: 'CustomLayout',
}
</script>
Set layout
and other config in the frontmatter of your pages:
# custom-pages/index.md
---
# Set the layout of this page
layout: CustomLayout
# Set the title of this page
title: Welcome to my custom page
# Show the aside info card or not (we hide it on this page)
aside: false
---
Contents here will be rendered in the `<Content />` component.