Settings

Overview

Most of Front Matter is configurable to your needs. In this part of the documentation all settings are explained.

Team settings and local settings

Since version 4 of Front Matter, Team settings got introduced. Teams settings allow you to have all settings on the project/solution level. You will be able to override them on user/local level (.vscode/settings.json).

The purpose of team settings is to share the global configuration of your CMS configuration. This way, your whole team can use the same tags/categories but apply their changes locally.

As you do not typically share your .vscode/settings.json configuration, we went for a frontmatter.json file on the root of your project/solution. The settings you provide in this JSON file are the same as you can configure on a local level. This allows you to easily copy, move settings from team to local level and vice versa.

Migrate local settings to team settings

To allow you to easily migrate already defined settings, you can run the Promote settings from local to team level command. The very first time, it will also ask you if there are settings that can be promoted.

On startup, Front Matter checks if settings can be promoted

Splitting your settings in multiple files

Some of the Front Matter settings can be split in multiple files to make management of these easier. For example, in case you are using multiple content-types for your site, you can now split each content-type to its own file. This allows you to easily manage the settings for each content-type.

Supported settings to split

The following settings are supported to be split in multiple files:

Setting nameFolder pathInformationJSON Schema
frontMatter.content.pageFolders./frontmatter/config/content/pagefolders/https://beta.frontmatter.codes/config/content.pagefolders.schema.json
frontMatter.content.placeholders./frontmatter/config/content/placeholders/https://beta.frontmatter.codes/config/content.placeholders.schema.json
frontMatter.content.snippets./frontmatter/config/content/snippets/The file name will be used as the ID/title of the snippet.https://beta.frontmatter.codes/config/content.snippets.schema.json
frontMatter.custom.scripts./frontmatter/config/custom/scripts/https://beta.frontmatter.codes/config/custom.scripts.schema.json
frontMatter.data.files./frontmatter/config/data/files/https://beta.frontmatter.codes/config/data.files.schema.json
frontMatter.data.folders./frontmatter/config/data/folders/https://beta.frontmatter.codes/config/data.folders.schema.json
frontMatter.data.types./frontmatter/config/data/types/https://beta.frontmatter.codes/config/data.types.schema.json
frontMatter.taxonomy.contentTypes./frontmatter/config/taxonomy/contenttypes/https://beta.frontmatter.codes/config/taxonomy.contenttypes.schema.json

Important: The folder path is relative to the root of your project/solution and you create the files in their corresponding folder. The file name is the same as the id of the setting.

Example of splitting a setting

Example of specifying a page folder in a separate file:

| .frontmatter
| - config
| -- content
| --- pagefolders
| ---- blog.json

Contents of the blog.json file:


Available settings

frontMatter.content.autoUpdateDate

Specify if you want to automatically update the modified date of your article/page.

  • Type: boolean
  • Default: false

frontMatter.content.defaultFileType

Specify the default file type for the content to create.

  • Type: emum
  • Default: md

Options:

  • md
  • mdx

For more information how and when this is used, check content creation

frontMatter.content.defaultSorting

Specify the default sorting option for the content dashboard. You can use one of the values from the enum or define your own ID.

  • Type: string
  • Default: ""

Options:

  • LastModifiedAsc
  • LastModifiedDesc
  • FileNameAsc
  • FileNameDesc
  • ID of your custom sorting option

frontMatter.content.draftField

Define the draft field you want to use to manage your content.

  • Type: object

    • name: Define the type of field
    • type: boolean or choice
    • invert: true if you want to invert the value. This inversion is only applied if the field is a boolean field and can be used to change the draft to published content behaviou.
    • choices: Define the choices of the draft field string[]
  • Default:


frontMatter.content.fmHighlight

Specify if you want to highlight the Front Matter in the Markdown file.

  • Type: boolean
  • Default: true

frontMatter.content.hideFm

Specify if you want to hide the Front Matter in the Markdown file.

  • Type: boolean
  • Default: false

frontMatter.content.hideFmMessage

Specify the message to display when the Front Matter is hidden.

  • Type: string
  • Default: ""

Hide front matter from the content

frontMatter.content.pageFolders

This array of folders defines where the extension can find your content and create new content by running the create article command.

  • Type: object[]
  • Default: []

Properties:

TitleTypeDescriptionDefaultRequired / Optional
titlestringA title for the content folder path""Optional
pathstringThe path to the content folder, important is to use the [[workspace]] placeholder""Required
excludeSubdirbooleanExclude subdirectories from the content folderOptional
previewPathstringAllows you to set a prefix path for the page preview. Check the preview path configuration section to learn more.Optional

Important: [[workspace]] is a placeholder that the extension uses to replace the workspace path. The reason why we choose to use this, is because some do not keep the original folder name.

Sample:


frontMatter.content.placeholders

Allows you to specify custom placeholders to use in your content creation process.

  • Type: object[]
  • Default: []

Properties:

  • id: The id of the placeholder
  • value: The value of the placeholder

More information on how you can use it can be found here: placeholders.

frontMatter.content.publicFolder

Specify the folder name where all your assets are located. For instance in Hugo this is the static folder.

  • Type: string
  • Default: ""

frontMatter.content.sorting

Define the sorting options for your dashboard content.

  • Type: object[]
  • Default: []

Properties:

  • title: The title of the sorting option
  • name: The name of the field to sort by (needs to be present in your content its front matter)
  • order: The order of the sorting (ascending or descending). Option values to use: asc or desc.
  • type: The type of field value. Option values to use: string, date, and number.

Sample:


frontMatter.content.supportedFileTypes

Specify the file types that you want to use in Front Matter.

  • Type: array
  • Default: [md, mdx, markdown]

frontMatter.content.wysiwyg

Specifies if you want to enable/disable the What You See, Is What You Get (WYSIWYG) markdown controls.

  • Type: boolean
  • Default: true

frontMatter.custom.scripts

Specify the path to a Node.js script to execute. The current file path will be provided as an argument.

  • Type: object[]
  • Default: []

Sample:


Info: Check the create your own custom scripts section for more information.

frontMatter.dashboard.content.cardTags

Specify the name of the metadata field that will be used to show the tags on the content card. When empty or null, it will hide the tags from the card.

  • Type: string
  • Default: tags

Info: Check the card tags section for more information.

frontMatter.dashboard.content.pagination

Specify if you want to enable/disable pagination for your content.

  • Type: boolean
  • Default: true

frontMatter.dashboard.openOnStart

Specify if you want to open the dashboard when you start VS Code.

  • Type: boolean | null
  • Default: null

frontMatter.data.files

Specify the data files you want to use for your website.

  • Type: array
  • Default: ``

More information on how to use it can be found in the data files view section.

frontMatter.data.folders

Specify the data files you want to use for your website.

  • Type: array
  • Default: ``

More information on how to use it can be found in the data files view section.

frontMatter.data.types

Specify the data types. These types can be used in for your data files.

  • Type: array
  • Default: ``

More information on how to use it can be found in the data files view section.

frontMatter.file.preserveCasing

Specify if you want to preserve the casing of your file names from the title.

  • Type: boolean
  • Default: false

More information on how to use it can be found in the preserve the casing for your file names section.

frontMatter.framework.id

Specify the ID of your static site generator or framework you are using for your website.

  • Type: string
  • Default: ""

frontMatter.git.enabled

Specify if you want to use the Git actions for your website.

  • Type: boolean
  • Default: false

frontMatter.git.commitMessage

Specify the commit message you want to use for the sync.

  • Type: string
  • Default: Synced by Front Matter

frontMatter.global.activeMode

Specify the activated mode of Front Matter.

  • Type: string, null

Info: Check the view mode documentation section for more information.

frontMatter.global.modes

Specify the modes you want to use for Front Matter.

  • Type: array
  • Default: ``

Info: Check the view mode documentation section for more information.

frontMatter.global.disabledNotifications

This is an array with the notifications types that can be disabled for Front Matter CMS.

  • Type: array<string>
  • Default: []
  • Options:
    • requiredFieldValidation

frontMatter.global.notifications

Specifies which type of notifications you want to see or which you want to hide.

  • Type: array<string>
  • Default: ["info", "warning", "error"]

frontMatter.media.defaultSorting

Specify the default sorting option for the media dashboard.

  • Type: string
  • Default: ""

Options:

  • LastModifiedAsc
  • LastModifiedDesc
  • FileNameAsc
  • FileNameDesc

frontMatter.media.supportedMimeTypes

Specify the mime types to support for the media files.

  • Type: array
  • Default: image/*, video/*, audio/*

frontMatter.panel.freeform

Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards).

  • Type: boolean
  • Default: true

frontMatter.preview.host

Specify the host URL (example: http://localhost:1313) to be used when opening the preview.

  • Type: string
  • Default: ""

frontMatter.preview.pathName

Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: yyyy/MM. The date will be generated based on the article its date field value.

  • Type: string
  • Default: ""

Important: As the value will be formatted with the article's date, it will try to convert all characters you enter. In case you want to skip some characters or all of them, you need to wrap that part between two single quotes. Example: "'blog/'yyyy/MM" will result in: blog/2021/08.

frontMatter.site.baseURL

Specify the base URL of your site, this will be used for SEO checks.

  • Type: string
  • Default: ""

Info: Example for this site it would be: https://frontmatter.codes.

frontMatter.taxonomy.alignFilename

Align the filename with the new slug when it gets generated.

  • Type: boolean
  • Default: false

frontMatter.taxonomy.categories

Specifies the categories which can be used in the Front Matter.

  • Type: string[]
  • Default: []

frontMatter.taxonomy.commaSeparatedFields

Specify the fields names that Front Matter should treat as a comma-separated array.

  • Type: string[]
  • Default: []

Info: As some site generators expect arrays in YAML to be comma-separated like Pelican. You can use this setting to define which of the front matter properties should be treated as an comma-separated array.

frontMatter.taxonomy.contentTypes

Specify the type of contents you want to use for your articles/pages/etc. Make sure the type is correctly set in your front matter.

frontMatter.taxonomy.customTaxonomy

Specify the custom taxonomy field data.

  • Type: array[object]
  • Default: []

Sample:


Info: Check the custom taxonomy section for more information.

frontMatter.taxonomy.dateFormat

Specify the date format for your articles. Check date-fns formating for more information.

  • Type: string
  • Default: iso

frontMatter.taxonomy.fieldGroups

Define the field groups you want to use for your block fields.

  • Type: array[object]
  • Default: []

More information on how to use this setting can be found on the block field section of content creation.

frontMatter.taxonomy.frontMatterType

Specify which Front Matter language you want to use. The extension supports YAML (default), TOML, and JSON.

  • Type: enum: YAML | TOML | JSON
  • Default: YAML

frontMatter.taxonomy.indentArrays

Specify if arrays in front matter of the markdown files are indented.

  • Type: boolean
  • Default: true

frontMatter.taxonomy.noPropertyValueQuotes

Specify the property names of which you want to remove the quotes in the output value. Warning: only use this when you know what you are doing. If you're going to, for instance, remove the quotes from the date property, you can add the following:


  • Type: string[]
  • Default: []

frontMatter.taxonomy.seoContentLengh

Specifies the optimal minimum length for your articles. Between 1,760 words – 2,400 is the absolute ideal article length for SEO in 2021. (set to -1 to turn it off).

  • Type: number
  • Default: 1760

frontMatter.taxonomy.seoDescriptionField

Specifies the name of the SEO description field for your page.

  • Type: string
  • Default: description

Important: if you would use another field in your content types, be sure to remap this setting.

frontMatter.taxonomy.seoDescriptionLength

Specifies the optimal description length for SEO (set to -1 to turn it off).

  • Type: number
  • Default: 160

frontMatter.taxonomy.seoSlugLength

Specifies the optimal slug length for SEO (set to -1 to turn it off).

  • Type: number
  • Default: 75

frontMatter.taxonomy.seoTitleLength

Specifies the optimal title length for SEO (set to -1 to turn it off).

  • Type: number
  • Default: 60

frontMatter.taxonomy.slugPrefix

Specify a prefix for the slug.

  • Type: string
  • Default: ""

frontMatter.taxonomy.slugSuffix

Specify a suffix for the slug.

  • Type: string
  • Default: ""

frontMatter.taxonomy.tags

Specifies the tags which can be used in the Front Matter.

  • Type: string[]
  • Default: []

frontMatter.telemetry.disable

Specify if you want to disable the telemetry.

Important: No user data is tracked, we only use telemetry to see what is used, and what isn't. This allows us to make accurate decisions on what to add or enhance to the extension.

  • Type: boolean
  • Default: false

frontMatter.templates.enabled

Specify if you want to use templates functionality.

  • Type: boolean
  • Default: false

frontMatter.templates.folder

Specify the folder to use for your article templates.

  • Type: string
  • Default: .frontmatter/templates

Important: In version 5 of Front Matter, we moved the default location from .templates to .frontmatter/templates.

frontMatter.templates.prefix

Specify the prefix you want to add for your new article filenames.

  • Type: string
  • Default: yyyy-MM-dd

Deprecated settings

frontMatter.taxonomy.dateField

This setting is used to define the publishing date field of your articles.

  • Type: string
  • Default: date

Important: Use the new isPublishDate datetime field setting for content types instead.

frontMatter.taxonomy.modifiedField

This setting is used to define the modified date field of your articles.

  • Type: string
  • Default: lastmod

Important: Use the new isModifiedDate datetime field setting for content types instead.

frontMatter.dashboard.mediaSnippet

This setting is deprecated in version 7.3.0 and and will be removed in the next major version. Please define your media snippet in the frontMatter.content.snippet setting.

Removed settings

frontMatter.content.folders

This setting has been deprecated since version 3.1.0 in favour of the newly introduced frontMatter.content.pageFolders setting.

Feedback

Do you want to provide feedback about this page/content?

Provide feedback
Last updated on

Did you spot an issue in our documentation, or want to contribute? Edit this page on Github!

Ready to get started?

Special thanks to our backers & sponsors

Vercel