Creating Page Layouts
You can create your own custom page layouts that you can modify the HTML around the content or import global components like a <Header />
or <Footer />
for example.
In your root README.md
you can add something called “front matter.” All front matter is a section where you can tell the page how to render. In the front matter, you can add options, items, even content that should be rendered within the page’s content.
Creating front matter is as simple as creating two lines of three hyphens (---
).
root/README.md
--- ---
Inside of the front matter, add the property layout
with the value of whatever you want. Keep in mind, the value of the layout
property will also be the name of a component that you will create in a little bit.
root/README.md
--- layout: BasicLayout ---
This layout
property directly corresponds with a component of the same name in the .vuepress/components/
directory.
.vuepress/components/BaseLayout.vue
<template...