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:

├── 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

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:

/source/
/source/tags/
/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 rot1. 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:

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

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