adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-03 17:12:21 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Enhancement: setting variables for contentTypes fields in template defintion #177

New Issue
Closed
opened 2026-10-05 02:31:34 +02:00 by adam · 20 comments
adam commented 2026-10-05 02:31:34 +02:00
Owner
Copy link
Copy source

First at all, a really nice project. I appreciate using this extension.

For now i don´t have understand how to use variables in the frontmatter conent-type definition.
When creating a new content the title: and slug: are filled with the name of the filename.
The article.md template file has two variable definitions.
Example:

title: "{{name}}"
slug: "/{{kebabCase name}}/"

Is it somehow possible to define this variable for other taxonomy content types.

Example:

title: "{{name}}"
slug: "/{{kebabCase name}}/"
permalink: "{{name}}"

For now only the title: and slug: has the filename filled out.

title: created filename
slug: created-filename
permalink: '{{name}}'

How can i resolve this?

First at all, a really nice project. I appreciate using this extension. For now i don´t have understand how to use variables in the frontmatter conent-type definition. When creating a new content the title: and slug: are filled with the name of the filename. The **article.md** template file has two variable definitions. Example: ``` title: "{{name}}" slug: "/{{kebabCase name}}/" ``` Is it somehow possible to define this variable for other taxonomy content types. Example: ``` title: "{{name}}" slug: "/{{kebabCase name}}/" permalink: "{{name}}" ``` For now only the title: and slug: has the filename filled out. ``` title: created filename slug: created-filename permalink: '{{name}}' ``` How can i resolve this? <!-- github-sync-id:1103046803 -->
adam closed this issue 2026-10-05 02:31:34 +02:00
adam commented 2026-10-05 02:31:35 +02:00
Author
Owner
Copy link
Copy source

@wemasoe thanks for opening this issue. These placeholders are a leftover from when the extension didn't support content types.

At the moment only the title and slug are automatically propagated on the creation. In the upcoming version, you can also define default values for your content type fields.

Placeholder support is indeed a good one to get added as well.

@wemasoe thanks for opening this issue. These placeholders are a leftover from when the extension didn't support content types. At the moment only the `title` and `slug` are automatically propagated on the creation. In the upcoming version, you can also define `default` values for your content type fields. Placeholder support is indeed a good one to get added as well. <!-- github-comment-id:1012986784 -->
adam commented 2026-10-05 02:31:35 +02:00
Author
Owner
Copy link
Copy source

@estruyf thx for the reply.

Placeholder support is indeed a good one to get added as well.

this would be very nice 👍

@estruyf thx for the reply. > Placeholder support is indeed a good one to get added as well. this would be very nice 👍 <!-- github-comment-id:1013052662 -->
adam commented 2026-10-05 02:31:36 +02:00
Author
Owner
Copy link
Copy source

Feel free to suggest some placeholders you'd like to use.

Feel free to suggest some placeholders you'd like to use. <!-- github-comment-id:1013062537 -->
adam commented 2026-10-05 02:31:37 +02:00
Author
Owner
Copy link
Copy source

placeholders you'd like to use.

well, i am just diving a little into the code.
i thnk it would be nice when generating the template to reference to a helper variable?
Maybe there are other methods solving this?

in this particular need i would like to use a permalink: like "filename.html"

There are already constants like in ArticleHelper.ts:

export const SETTING_TAXONOMY_CONTENT_TYPES = "taxonomy.contentTypes";

export interface Field {
  title?: string;
  name: string;
  type: "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy";
  choices?: string[] | Choice[];
  single?: boolean;
  multiple?: boolean;
  isPreviewImage?: boolean;
  hidden?: boolean;
  taxonomyId?: string;
}

there is also already a taxonomy type

TaxonomyType.ts
export enum TaxonomyType {
  Tag = 1,
  Category
}

suggestion1:

taxonomy_helper_varname1: $var_prefix
taxonomy_helper_varname2: "{{title}}"  (or anything else defined in template fields: "slug", "title", "date", "or taxonomy" ,"fieldname")
taxonomy_helper_varname3: $var_suffix
taxonomy_helper_varname_concatenate: taxonomy_helper_varname[0-2]
title: created filename
slug: created-filename
permalink: '{{taxonomy_helper_varname_concatenate}}'
type: documentation

or maybe like this?

suggestion2:

taxonomy_helper_varname: "{{title}}"  (or anything else defined in template fields: "slug", "title", "date", "or taxonomy" ,"fieldname")
title: created filename
slug: created-filename
permalink: '{{taxonomy_helper_varname}}'
type: documentation

https://frontmatter.codes/docs/content-types#define-your-own-type

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "fields": [
      ...
    ]
  },
  {
    "name": "documentation",
    "fields": [
      ...
    ]
  }
]

ContentType is defined as follow in the documentation section fields:
frontmatter.json

		{
          "title": "Permalink",
          "name": "permalink",
          "type": "string"
        },

well now i am on my limit :-)

"frontMatter.taxonomy.customTaxonomy": [
  {
    "id": "permalink",
    "options": [
      "prefix",
      "taxonomy_helper_varname(read from template definition field (taxonomy_helper_varname))",
      "suffix",
    ]
  }
]

or

        {
          "title": "Permalink",
          "name": "permalink",
          "type": "choice",
          "choices": ["taxonomy_helper_varname",".html", ".json", ".js", "prefix"]
        },

prefix could be null.
suffix could also be null (".html", ".json", ".js")

i am not sure what would be most effective.

> placeholders you'd like to use. well, i am just diving a little into the code. i thnk it would be nice when generating the template to reference to a helper variable? Maybe there are other methods solving this? in this particular need i would like to use a permalink: like "filename.html" There are already constants like in `ArticleHelper.ts`: `export const SETTING_TAXONOMY_CONTENT_TYPES = "taxonomy.contentTypes";` ``` export interface Field { title?: string; name: string; type: "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy"; choices?: string[] | Choice[]; single?: boolean; multiple?: boolean; isPreviewImage?: boolean; hidden?: boolean; taxonomyId?: string; } ``` there is also already a taxonomy type ``` TaxonomyType.ts export enum TaxonomyType { Tag = 1, Category } ``` suggestion1: ``` taxonomy_helper_varname1: $var_prefix taxonomy_helper_varname2: "{{title}}" (or anything else defined in template fields: "slug", "title", "date", "or taxonomy" ,"fieldname") taxonomy_helper_varname3: $var_suffix taxonomy_helper_varname_concatenate: taxonomy_helper_varname[0-2] title: created filename slug: created-filename permalink: '{{taxonomy_helper_varname_concatenate}}' type: documentation ``` or maybe like this? suggestion2: ``` taxonomy_helper_varname: "{{title}}" (or anything else defined in template fields: "slug", "title", "date", "or taxonomy" ,"fieldname") title: created filename slug: created-filename permalink: '{{taxonomy_helper_varname}}' type: documentation ``` > https://frontmatter.codes/docs/content-types#define-your-own-type ``` "frontMatter.taxonomy.contentTypes": [ { "name": "default", "fields": [ ... ] }, { "name": "documentation", "fields": [ ... ] } ] ``` ContentType is defined as follow in the documentation section fields: `frontmatter.json` ``` { "title": "Permalink", "name": "permalink", "type": "string" }, ``` well now i am on my limit :-) ``` "frontMatter.taxonomy.customTaxonomy": [ { "id": "permalink", "options": [ "prefix", "taxonomy_helper_varname(read from template definition field (taxonomy_helper_varname))", "suffix", ] } ] ``` or ``` { "title": "Permalink", "name": "permalink", "type": "choice", "choices": ["taxonomy_helper_varname",".html", ".json", ".js", "prefix"] }, ``` prefix could be null. suffix could also be null (".html", ".json", ".js") i am not sure what would be most effective. <!-- github-comment-id:1013143249 -->
adam commented 2026-10-05 02:31:37 +02:00
Author
Owner
Copy link
Copy source

There are already constants like in ArticleHelper.ts:

These are the extension setting constants in order to understand how your environment is configured.

there is also already a taxonomy type

Taxonomy is a list of predefined data like tags/categories/custom-data to use in your front matter article content. Not really used for defining the helpers, or at least I don't see how we could use it for that.

Think I'm not really following with the logic. Just to reclarify for my mind. You want to be able to define placeholders that will be updated once contents get created. For instance, a unique ID or GUID can be one of the placeholders to include.

Others could be:

  • {{title}}: Returns the title of the page
  • {{slug}}: Returns a sanitized title of the page concatenated with -'s
  • {{now}}: Returns the current time string
  • ...

Your example of supporting a permalink would require extra logic. As you want to include a prefix and suffix. I think it might complicate it a bit, as there are various ways to configure the extension.

Think a new setting like frontMatter.content.placeholders would be more appropriate, but instead of defining options/fields, what if you'd define a script that the extension executes? You get the file path, front matter data, ... All you need to do is create the value to insert into the file. A bit like we do on the custom actions/scripts - https://frontmatter.codes/docs/custom-actions

> There are already constants like in `ArticleHelper.ts:` These are the extension setting constants in order to understand how your environment is configured. > there is also already a taxonomy type Taxonomy is a list of predefined data like tags/categories/custom-data to use in your front matter article content. Not really used for defining the helpers, or at least I don't see how we could use it for that. Think I'm not really following with the logic. Just to reclarify for my mind. You want to be able to define placeholders that will be updated once contents get created. For instance, a `unique ID` or `GUID` can be one of the placeholders to include. Others could be: - `{{title}}`: Returns the title of the page - `{{slug}}`: Returns a sanitized title of the page concatenated with `-`'s - `{{now}}`: Returns the current time string - ... Your example of supporting a `permalink` would require extra logic. As you want to include a prefix and suffix. I think it might complicate it a bit, as there are various ways to configure the extension. Think a new setting like `frontMatter.content.placeholders` would be more appropriate, but instead of defining options/fields, what if you'd define a script that the extension executes? You get the file path, front matter data, ... All you need to do is create the value to insert into the file. A bit like we do on the `custom actions/scripts` - https://frontmatter.codes/docs/custom-actions <!-- github-comment-id:1013193382 -->
adam commented 2026-10-05 02:31:38 +02:00
Author
Owner
Copy link
Copy source

Or frontMatter.content.placeholders could be as follows:

{
	"frontMatter.content.placeholders": [
		{
			"id": "permalink",
			"value": "<prefix>-{{slug}}<suffix>"
		}
	]
}

<prefix> and <suffix> will need to be added by you. For example:

{
	"frontMatter.content.placeholders": [
		{
			"id": "permalink",
			"value": "/docs/{{slug}}.html"
		}
	]
}

In your template or content type, you define the value of the field to: {{permalink}}.

---
permalink: {{permalink}}
---

This results in a front matter data value as:

---
permalink: /blog/placeholder-documentation.html
---
Or `frontMatter.content.placeholders` could be as follows: ```json { "frontMatter.content.placeholders": [ { "id": "permalink", "value": "<prefix>-{{slug}}<suffix>" } ] } ``` > `<prefix>` and `<suffix>` will need to be added by you. For example: ```json { "frontMatter.content.placeholders": [ { "id": "permalink", "value": "/docs/{{slug}}.html" } ] } ``` In your template or content type, you define the value of the field to: `{{permalink}}`. ```yaml --- permalink: {{permalink}} --- ``` This results in a front matter data value as: ```yaml --- permalink: /blog/placeholder-documentation.html --- ``` <!-- github-comment-id:1013200913 -->
adam commented 2026-10-05 02:31:39 +02:00
Author
Owner
Copy link
Copy source
{
	"frontMatter.content.placeholders": [
		{
			"id": "permalink",
			"value": "<prefix>-{{slug}}<suffix>"
		}
	]
}

yes :-) that looks like a fine solution :-)

Like you already mentioned.

Others could be:

{{title}}: Returns the title of the page
{{slug}}: Returns a sanitized title of the page concatenated with -'s
{{now}}: Returns the current time string
...

Your answer also clarified the script section you mentioned, for me.

@estruyf: thx a lot for your detailed answers

> ```json > { > "frontMatter.content.placeholders": [ > { > "id": "permalink", > "value": "<prefix>-{{slug}}<suffix>" > } > ] > } > ``` yes :-) that looks like a fine solution :-) Like you already mentioned. > > Others could be: > > {{title}}: Returns the title of the page > {{slug}}: Returns a sanitized title of the page concatenated with -'s > {{now}}: Returns the current time string > ... Your answer also clarified the script section you mentioned, for me. @estruyf: thx a lot for your detailed answers <!-- github-comment-id:1013223968 -->
adam commented 2026-10-05 02:31:39 +02:00
Author
Owner
Copy link
Copy source

The first implementation of this enhancement has been added to the beta.

Currently supported placeholders are: {{title}} and {{slug}}. If you want to add custom placeholders, you can add this in your settings or frontmatter.json file as follows:

"frontMatter.content.placeholders": [
    {
      "id": "permalink",
      "value": "/blog/{{slug}}.html"
    }
  ]

The known placeholders from Front Matter itself can also be used in the custom ones.

The first implementation of this enhancement has been added to the beta. Currently supported placeholders are: `{{title}}` and `{{slug}}`. If you want to add custom placeholders, you can add this in your settings or `frontmatter.json` file as follows: ```json "frontMatter.content.placeholders": [ { "id": "permalink", "value": "/blog/{{slug}}.html" } ] ``` The known placeholders from Front Matter itself can also be used in the custom ones. <!-- github-comment-id:1013742411 -->
adam commented 2026-10-05 02:31:40 +02:00
Author
Owner
Copy link
Copy source

@estruyf thank you for the enhancement implementation. This realy helps me a lot.

When using the new frontmatter setting it works when using templates. Like the Article.md

"frontMatter.content.placeholders": [
    {
      "id": "permalink",
      "value": "/blog/{{slug}}.html"
    }
  ]

How do i define it in my own contenttype settings?
With this configuration i don´t get the placeholder been rewritten.

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "fields": [
      ...
    ]
  },
  {
    "name": "documentation",
    "fields": [
      ...
        {
          "title": "Permalink",
          "name": "permalink",
          "type": "string"
        },
      ...
    ]
  }
]

Output:

---
title: newfile
permalink: ''
description: ''
date: '2022-01-16T11:51:53.791Z'
preview: ''
draft: ''
tags: ''
categories: ''
weight: ''
test: ''
sidebar: ''
type: documentation
---

"optimize slug" can not be selected without a slug: definition in the frontmatter of the generated file.

@estruyf thank you for the enhancement implementation. This realy helps me a lot. When using the new frontmatter setting it works when using templates. Like the Article.md ```json "frontMatter.content.placeholders": [ { "id": "permalink", "value": "/blog/{{slug}}.html" } ] ``` How do i define it in my own contenttype settings? With this configuration i don´t get the placeholder been rewritten. ```json "frontMatter.taxonomy.contentTypes": [ { "name": "default", "fields": [ ... ] }, { "name": "documentation", "fields": [ ... { "title": "Permalink", "name": "permalink", "type": "string" }, ... ] } ] ``` Output: ```yaml --- title: newfile permalink: '' description: '' date: '2022-01-16T11:51:53.791Z' preview: '' draft: '' tags: '' categories: '' weight: '' test: '' sidebar: '' type: documentation --- ``` "optimize slug" can not be selected without a `slug:` definition in the frontmatter of the generated file. <!-- github-comment-id:1013861965 -->
adam commented 2026-10-05 02:31:41 +02:00
Author
Owner
Copy link
Copy source

Content type

  • in your content type, you can now use the default property and set it to {{permalink}} in your case.
{
  "title": "Permalink",
  "name": "permalink",
  "type": "string",
  "default": "{{permalink}}"
}

"optimize slug" can not be selected without a slug: definition in the frontmatter of the generated file.

  • This is another enhancement, it might require a content/front matter scan in order to enable/disable it.
> Content type - in your content type, you can now use the `default` property and set it to `{{permalink}}` in your case. ```JSON { "title": "Permalink", "name": "permalink", "type": "string", "default": "{{permalink}}" } ``` > "optimize slug" can not be selected without a slug: definition in the frontmatter of the generated file. - This is another enhancement, it might require a content/front matter scan in order to enable/disable it. <!-- github-comment-id:1013925628 -->
adam commented 2026-10-05 02:31:42 +02:00
Author
Owner
Copy link
Copy source
  • enhancement, it might require a content/front matter scan in order to enable/disable it.

@estruyf yes that would be fine

the placeholder is not beeing set, when using choice.

...
        {
          "title": "Permalink1",
          "name": "permalink1",
          "type": "choice",
          "choices": [
            "{{permalink}}",
            "{{title}}"
          ]
        },
...
  "frontMatter.content.placeholders": [
    {
      "id": "permalink",
      "value": "{{title}}.html"
    }
  ],
...
> * enhancement, it might require a content/front matter scan in order to enable/disable it. @estruyf yes that would be fine the placeholder is not beeing set, when using choice. ```json ... { "title": "Permalink1", "name": "permalink1", "type": "choice", "choices": [ "{{permalink}}", "{{title}}" ] }, ... "frontMatter.content.placeholders": [ { "id": "permalink", "value": "{{title}}.html" } ], ... ``` <!-- github-comment-id:1015084347 -->
adam commented 2026-10-05 02:31:42 +02:00
Author
Owner
Copy link
Copy source

Choice fields and taxonomy fields cannot be used like this. They can only be used to select a predefined value.

Can you try to explain your use case or how you want to use it?

Choice fields and taxonomy fields cannot be used like this. They can only be used to select a predefined value. Can you try to explain your use case or how you want to use it? <!-- github-comment-id:1015258307 -->
adam commented 2026-10-05 02:31:43 +02:00
Author
Owner
Copy link
Copy source

Choice fields and taxonomy fields cannot be used like this. They can only be used to select a predefined value.

Can you try to explain your use case or how you want to use it?

i just played around and tried some things out to check how dynamic the placeholder and variables are in the dashboard.

> Choice fields and taxonomy fields cannot be used like this. They can only be used to select a predefined value. > > Can you try to explain your use case or how you want to use it? i just played around and tried some things out to check how dynamic the placeholder and variables are in the dashboard. <!-- github-comment-id:1015895337 -->
adam commented 2026-10-05 02:31:44 +02:00
Author
Owner
Copy link
Copy source

Ok, that makes it clear! Thanks for the feedback 🙏

Ok, that makes it clear! Thanks for the feedback 🙏 <!-- github-comment-id:1016158805 -->
adam commented 2026-10-05 02:31:44 +02:00
Author
Owner
Copy link
Copy source

The optimize slug button, now updates all fields that had a default value set to the {{slug}} placeholder + any custom placeholders that depend on {{slug}} as well.

The `optimize slug` button, now updates all fields that had a default value set to the `{{slug}}` placeholder + any custom placeholders that depend on `{{slug}}` as well. <!-- github-comment-id:1016438243 -->
adam commented 2026-10-05 02:31:45 +02:00
Author
Owner
Copy link
Copy source

The optimize slug button, now updates all fields that had a default value set to the {{slug}} placeholder + any custom placeholders that depend on {{slug}} as well.

that sounds good. But can you give an example?
i have tried this?
that is how i understood the feature?

        {
          "title": "Slugtest",
          "name": "slugtest",
          "type": "string",
          "default": "{{slug}}"
        },

  "frontMatter.content.placeholders": [
    {
      "id": "slug",
      "value": "{{slug}}.html"
    }
  ],
> The `optimize slug` button, now updates all fields that had a default value set to the `{{slug}}` placeholder + any custom placeholders that depend on `{{slug}}` as well. that sounds good. But can you give an example? i have tried this? that is how i understood the feature? ```json { "title": "Slugtest", "name": "slugtest", "type": "string", "default": "{{slug}}" }, ``` ```json "frontMatter.content.placeholders": [ { "id": "slug", "value": "{{slug}}.html" } ], ``` <!-- github-comment-id:1016839199 -->
adam commented 2026-10-05 02:31:46 +02:00
Author
Owner
Copy link
Copy source

No, it works differently. {{slug}} is a known placeholder from Front Matter, what you try to do is overwrite it and will not work.

What will work, is if you go back to the permalink approach:

{
  "title": "Slugtest",
  "name": "slugtest",
  "type": "string",
  "default": "{{permalink}}"
}

"frontMatter.content.placeholders": [
  {
    "id": "permalink",
    "value": "{{slug}}.html"
  }
],
No, it works differently. `{{slug}}` is a known placeholder from Front Matter, what you try to do is overwrite it and will not work. What will work, is if you go back to the `permalink` approach: ```json { "title": "Slugtest", "name": "slugtest", "type": "string", "default": "{{permalink}}" } ``` ```json "frontMatter.content.placeholders": [ { "id": "permalink", "value": "{{slug}}.html" } ], ``` <!-- github-comment-id:1017254533 -->
adam commented 2026-10-05 02:31:46 +02:00
Author
Owner
Copy link
Copy source

image

it did not show any action.

        {
          "title": "Permalink",
          "name": "permalink",
          "type": "string",
          "default": "{{permalink}}"
        },

  "frontMatter.content.placeholders": [
    {
      "id": "permalink",
      "value": "{{slug}}.html"
    }
  ],
![image](https://user-images.githubusercontent.com/97720470/150338832-1c608586-fcd5-4931-8857-9569ca7e559e.png) it did not show any action. ```json { "title": "Permalink", "name": "permalink", "type": "string", "default": "{{permalink}}" }, ``` ```json "frontMatter.content.placeholders": [ { "id": "permalink", "value": "{{slug}}.html" } ], ``` <!-- github-comment-id:1017451681 -->
adam commented 2026-10-05 02:31:47 +02:00
Author
Owner
Copy link
Copy source

Latest applied fix will resolve this issue.

Latest applied fix will resolve this issue. <!-- github-comment-id:1017659668 -->
adam commented 2026-10-05 02:31:48 +02:00
Author
Owner
Copy link
Copy source

@estruyf thx :-)

@estruyf thx :-) <!-- github-comment-id:1017703333 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#177