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. For example if you have the following file structure:

  1. ├── package.json
  2. └── source
  3.     ├── _post
  4.     │   └── intro-vuepress.md
  5.     ├── index.md
  6.     └── tags.md

Then you will get following available pages:

  1. /source/
  2. /source/tags.html
  3. /source/_post/intro-vuepress.html

Yet, for a blog system, we hope that the link of a post can be customized. VuePress started supporting this feature, known as permalink, from 1.0.0. Then, the actual pages would be:

  1. /source/
  2. /source/tags/
  3. /source/2018/4/1/intro-vuepress.html

We have seen the shadow of the blog. Let’s continue to look down.

A permalink is a URL that is intended to remain unchanged for a long time, yielding a hyperlink that is less susceptible to link rot1Permalinks - 图1. VuePress supports a flexible way to build permalinks, allowing you to use template variables.

The default permalink is /:regular.

You can configure globally to apply it for all pages:

  1. // .vuepress/config.js
  2. module.exports = {
  3.   permalink: '/:year/:month/:day/:slug'
  4. }

You can also set permalink on a page only, and it will have a higher priority than the global settings.

📝 hello.md:

  1. ---
  2. title: Hello World
  3. permalink: /hello-world
  4. ---
  6. Hello!

Template Variables

VariableDescription
:yearPublished year of posts (4-digit)
:monthPublished month of posts (2-digit)
:i_monthPublished month of posts (Without leading zeros)
:dayPublished day of posts (2-digit)
:i_dayPublished day of posts (Without leading zeros)
:slugSlugified file path (Without extension)
:regularPermalink generated by VuePress by default, for implementation see herePermalinks - 图2