Site preview
Overview
The Markdown preview is not consistently delivering the same result as the one you will see on your site. The Front Matter extension provides you a way to show the actual site instead.
Configuration
In order to use the site preview, you will first have to set the frontMatter.preview.host
setting. You can set it via the Global Settings
section in the Front Matter panel or in your frontmatter.json
file.
For example, with Hugo, the local server spins up on http://localhost:1313
. When you set this URL as the value of the frontMatter.preview.host
setting. You can click on the open preview button and the site preview will be shown.
Prefix or section configuration
As Front Matter tries to support as many Static-Site Generators as possible, we made the choice to use settings that can be changed on various levels: global, per page folder, and per content type.
When you want to show the live site/page previews in Visual Studio Code, you can specify a custom preview path/prefix. For instance, if you create blog articles, and you want to prefix it with blog/2021/11
, you can set this with the previewPath
property.
Important: The value used for the preview will be formatted with the article's date. This means that the engine will try to convert all characters you enter to a date formatted string. In case you wan to skip some characters or all of them to be converted, you need to wrap that part between two single quotes. Example:
"'blog/'yyyy/MM"
will result in:blog/2021/11
.
Globally
On the global level, you can use the frontMatter.preview.pathName
setting to specify the global path that you want to add after the frontMatter.preview.host
setting value and before your slug.
This setting 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.
Page folder
The previewPath
property on the frontMatter.content.pageFolders
setting, will override what is defined globally and can be used to specify a preview path per page folder.
Content type
Similar to the previewPath
on the page folder level, the previewPath
property on the content type level will override what is defined on page folder level and globally.
Feedback
Do you want to provide feedback about this page/content?
Provide feedbackDid you spot an issue in our documentation, or want to contribute? Edit this page on Github!