Permalinks
Background
Before 1.x.x, VuePress retrieves all markdown files in the documents source directory and defines the page links based on the file hierarchy. e.g. if you have the following file structure:
├── package.json
└── source
├── _post
│ └── intro-vuepress.md
├── index.md
└── tags.md
Then you will get following available pages:
/source/
/source/tags.html
/source/_post/intro-vuepress.html
However, for a blog system, we hope that the link of a post can be customized. VuePress started supporting this feature from 1.0.0
. which is known as permalink
. Then, the actual pages would be:
/source/
/source/tags/
/source/2018/4/1/intro-vuepress.html
It seems that we have seen the shadow of the blog. Let's continue to look down.
Permalinks
A permalink is a URL that is intended to remain unchanged for many years into the future, yielding a hyperlink that is less susceptible to link root[1]. VuePress supports a flexible way to build permalinks, allowing you to leverage various template variables.
The default permalink is /:regular
.
Configure Permalinks
You can configure globally to apply it for all pages:
// .vuepress/config.js
module.exports = {
permalink: '/:year/:month/:day/:slug'
}
Alternatively, you can also set permalink on a page only, and it will have a higher priority than the global settings.
📝 hello.md:
---
title: Hello World
permalink: /hello-world
---
Hello!
Template Variables
Variable | Description |
---|---|
:year | Published year of posts (4-digit) |
:month | Published month of posts (2-digit) |
:i_month | Published month of posts (Without leading zeros) |
:day | Published day of posts (2-digit) |
:i_day | Published day of posts (Without leading zeros) |
:slug | Slugified file path (Without extension) |
:regular | Permalink generated by VuePress by default, for implementation see here |