Open chriskyfung opened 8 months ago
frontMatter.taxonomy.contentTypes
Based on the documentation from AMP Affiliately Jekyll Theme, we can define these content types for your website: posts, pages, products, etc.
Each content type has a name, a preview path, a page bundle option, and a list of fields that correspond to the front matter metadata of your content files. You can customize the fields according to your needs, and use different types of fields such as string, number, image, datetime, draft, tags, categories, etc. Here is an example of the JSON data for setting the frontMatter.taxonomy.contentTypes
:
"frontMatter.taxonomy.contentTypes": [
{
"name": "post",
"previewPath": "/blog",
"pageBundle": false,
"fields": [
{
"title": "Title",
"name": "title",
"type": "string"
},
{
"title": "Description",
"name": "description",
"type": "string"
},
{
"title": "Publishing date",
"name": "date",
"type": "datetime",
"default": "{{now}}",
"isPublishDate": true
},
{
"title": "Article preview",
"name": "preview",
"type": "image"
},
{
"title": "Tags",
"name": "tags",
"type": "tags"
},
{
"title": "Categories",
"name": "categories",
"type": "categories"
}
]
},
{
"name": "page",
"previewPath": null,
"pageBundle": false,
"fields": [
{
"title": "Title",
"name": "title",
"type": "string"
},
{
"title": "Description",
"name": "description",
"type": "string"
},
{
"title": "Layout",
"name": "layout",
"type": "string",
"default": "page"
}
]
},
{
"name": "product",
"previewPath": "/shop",
"pageBundle": true,
"fields": [
{
"title": "Title",
"name": "title",
"type": "string"
},
{
"title": "Description",
"name": "description",
"type": "string"
},
{
"title": "Price",
"name": "price",
"type": "number"
},
{
"title": "Image",
"name": "image",
"type": "image"
},
{
"title": "Affiliate link",
"name": "link",
"type": "string"
}
]
}
]
[!IMPORTANT] Jekyll does not need the
draft
field, as Front Matter supports the_drafts
,_posts
folders and collections from Jekyll. If you use Jekyll, make sure to set thefrontMatter.framework.id
setting to jekyll.
frontMatter.projects
The project setting in Front Matter CMS allows us to manage multiple sites or environments within the same workspace. We can define different settings for each project, such as the content folders, the public folder, the media paths, etc. We can also switch between projects using the command palette, the panel action, or the dashboard dropdown.
To use the project setting, we need to add the frontMatter.projects
property to your settings.json
or frontmatter.json
file. We can specify an array of project objects, each with a name, a default flag, and a configuration object. The configuration object can contain any of the Front Matter CMS settings that we want to override for that project. For example, to create two projects for a blog and a portfolio site, we can use the following setting:
"frontMatter.projects": [
{
"name": "blog",
"default": true,
"configuration": {
"frontMatter.content.pageFolders": [
{
"title": "Blog posts",
"path": "[[workspace]]/websites/blog/posts"
}
],
"frontMatter.content.publicFolder": "[[workspace]]/websites/blog/public"
}
},
{
"name": "portfolio",
"configuration": {
"frontMatter.content.pageFolders": [
{
"title": "Portfolio",
"path": "[[workspace]]/websites/portfolio/content"
}
],
"frontMatter.content.publicFolder": "[[workspace]]/websites/portfolio/public"
}
}
]
This will create two projects with different content and public folders. We can only have one project as the default project, which will be loaded when we open the Front Matter CMS dashboard. The last used project will also be remembered when we switch between them
Front Matter CMS is a content management system that runs within Visual Studio Code. It allows you to create and manage your content for our Jekyll site. You can use front matter to set variables for your pages and posts, and preview them in real-time.
To use Front Matter CMS for the Jekyll site project, we need to install the extension from the VS Code marketplace or use the command
ext install eliostruyf.vscode-front-matter
. Then, we need to configure the extension settings to match your Jekyll site structure and preferences.Front Matter CMS provides a default content mapping for Jekyll, but we can customize it to fit your needs. We can also define our own content types and fields. For example, to create a content type for blog posts, we can add and define its front matter structure with the
frontMatter.taxonomy.contentTypes
setting in thesettings.json
file.This will create a sidebar panel for blog posts, where we can edit the front matter fields and insert media files. We can also preview your posts within VS Code.
Description
This issue is about improving the Front Matter CMS setting for our AMP-powered Jekyll site. The goal is to make the setting more user-friendly, consistent, and compatible with the AMP Affiliately Jekyll Theme.
Tasks
.frontmatter.json
file to match the front matter fields for each content type:default
: same as post type__default__
: common to all layoutspage
: common plus page layout fieldspost
: common plus post layout fieldspicture.html
template<amp-gist>
componentyoutube.html
templatetoc.md
templatelink
tagpost_url
tag<!--more-->
tagcomment
syntaxnomarkdown
syntaxoptions
syntaxcite
tagbibliography
tagcallout.html
templatecapture
tag<amp-audio>
componenthighlight
tagraw
tagpermalink
: use dynamic placeholder script to generate relative URLpreviewPath
: use dynamic placeholder script to generate the relative path before post slugoverride-slug
: use custom content script to align the slug with the permalink defined in the front mattersuggestion
: create auto-completion list for Google CSE#frontmatter
tag to GitHub project