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.

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 rot[1]. VuePress supports a flexible way to build permalinks, allowing you to leverage various 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'
}

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
Last Updated: 10/7/2018, 2:19:46 PM