Slug

The slug is the part of the URL that identifies a page in a human-readable form. It is usually derived from the title of the page, but Front Matter CMS allows you to define a custom slug.

Default slug

The default slug is derived from the title of the page. It is automatically generated when you create a new page. The default slug is a URL-friendly version of the title, with all letters in lowercase, spaces replaced with hyphens, removes stop words, and special characters.

---
title: Just a sample page with a title
slug: sample-page-title
---

Info: The extension only supports English stopwords.

Important: If you do not define a slug in the content type, the slug will be derived from the frontMatter.taxonomy.slugTemplate setting. If the setting is not defined, the page name will be used as the slug.

Custom slug

You can define a custom slug for your pages and it can be defined on global level or per content type.

Global level

You can define a custom slug template for all pages in the frontMatter.taxonomy.slugTemplate setting. The template can contain placeholders that will be replaced with the actual values when creating a new page.

{
  "frontMatter.taxonomy.slugTemplate": "{{year}}/{{month}}/{{title}}"
}

Info: When using the {{title}} placeholder in the slug template it will be automatically converted to lowercase and spaces will be replaced with hyphens. To have a SEO friendly URL, you can use the {{seoTitle}} placeholder instead.

Per content type

You can define a custom slug template for each content type in the frontMatter.taxonomy.contentTypes setting. Similar to the global slug template, the template can contain placeholders that will be replaced with the actual values when creating a new page.

{
  "frontMatter.taxonomy.contentTypes": [
    {
      "name": "post",
      "slugTemplate": "{{year}}/{{month}}/{{title}}",
      ...
    }
  ]
}

Additional settings

Prefix and suffix

You can also specify a prefix and suffix, which can be added to the slug if you want. Use the following settings to do this: frontMatter.taxonomy.slugPrefix and frontMatter.taxonomy.slugSuffix.

{
  "frontMatter.taxonomy.slugPrefix": "/",
  "frontMatter.taxonomy.slugSuffix": "/"
}

---
title: Just a sample page with a title
slug: /sample-page-title/
---

By default, both prefix and suffix settings are not provided, which mean it would not add anything extra to the slug.

Align filename with slug

Another setting is to allow you to sync the filename with the generated slug. The setting you need to turn on enable for this is frontMatter.taxonomy.alignFilename.

{
  "frontMatter.taxonomy.alignFilename": true
}

When you update the slug of the page, the filename will be automatically updated to match the slug.