Why VuePress?
- Minimal setup with markdown-centered project structure helps you focus on writing.
- VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
How to Quick Start?
- VuePress starter template for CodeSandbox helps you create the project with one single click.
- Continuous deploy your works by connecting a Git repository to a Netlify site and keeping the two in sync.
Basic VuePress Tutorial
Editing your Homepage
Your Homepage(Index) is a README.md. There is a default VuePress template.
---
home: true
heroImage: /hero.png
actionText: CSS →
actionLink: /css/
features:
- title: "Code Snippet"
details: JavaScript, CSS
- title: "Document"
details: Note
- title: "Link"
details: Note
footer: Copyright © Jing, Li
---
Config the Router to Content Pages
Routers are mapped to your file structure.
.
├── .vuepress
├── README.md // <- index
├── CSS // <- path : /css
│ └── README.md // <- index of /css
├── JS
│ └── README.md
├── NOTE
│ └── README.md
└── package.json
│
└── ...
Child route
Those .md files in the first hierarchy directory will be built as .html files and can be accessed.
eg.
├── CSS // <- path : /css
│ ├── README.md // <- index of /css
│ └── page-one.md // <- /css/page-one.html
Sidebar of Content (Auto Sidebar for Single Pages)
The sidebar of content is auto generated by markdown titles.
There are two methods to set your content sidebar of all pages.
Method 1 - set in config.js
module.exports = {
title: "Pika Code",
description: "Front End Notebook",
themeConfig: {
...
sidebar: 'auto'
}
};
Method 2 - set in specific page with yaml format
--------
sidebar: auto
--------
Navigation
You can set your navigation items in .vuepress/config.js.
module.exports = {
title: "Pika Code",
description: "Front End Notebook",
themeConfig: {
nav: [
{ text: "CSS", link: "/css/" },
{ text: "JS", link: "/js/" },
{ text: "NOTE", link: "/note/" }
]
}
};
Child Nav
HTML Head
- favicon
Add a
favicon.icoin.vuepress/public.
Quick Start
1.install "VuePress + CodeSanBox" template
.
├── .vuepress
│ ├── components
│ ├── theme
│ │ └── Layout.vue
│ ├── public // <- put assets
│ ├── styles
│ ├── templates
│ ├── config.js // <- config your title, nav ...
│ └── enhanceApp.js
│
├── README.md // <- index
├── guide // <- path : /guide
│ ├── page-one.md // <- /guide/page-one.html
│ └── README.md // <- index of /guide
└── package.json
│
└── ...
3.Update Config
module.exports = {
title: "Pika Code",
description: "Front End Notebook",
themeConfig: {
nav: [
{ text: "CSS", link: "/css/" },
{ text: "JS", link: "/js/" },
{ text: "NOTE", link: "/note/" }
]
}
};
Top comments (0)