Table of Contents

Add more pages

You can add more pages.

First, create another directory, and put a or in it:


├── .vuepress
│   └── config.js
├── _post
│   └──
└── custom-pages

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 -->
  <div class="custom-layout">
    <!-- .main-div is the block with white background -->
    <div class="main-div">
      This is a custom layout
    <div class="main-div">
      <!-- <Content /> is to show the rendered markdown content of this page -->
      <Content class="content" />
export default {
  name: 'CustomLayout',

Set layout and other config in the frontmatter of your pages:

# custom-pages/
# 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.