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

Enhancement: Parameter support for defining paths #343

New Issue
Closed
opened 2026-10-05 02:41:40 +02:00 by adam · 11 comments
adam commented 2026-10-05 02:41:40 +02:00
Owner
Copy link
Copy source

Feedback from Twitter: https://twitter.com/LoreZyra/status/1574625380580802560

Better docs on how to build FrontMatter templates would be good. Parameter to define custom path similar to Hexo (eg. /:lang/:category/:title/)…

Enhancements

  • Support parameters in preview paths. This functionality will allow the user to use front matter data to generate the preview URL.
  • Parameter support for content folder paths.
    • Waiting for more feedback!
Feedback from Twitter: https://twitter.com/LoreZyra/status/1574625380580802560 > Better docs on how to build FrontMatter templates would be good. Parameter to define custom path similar to Hexo (eg. /:lang/:category/:title/)… ## Enhancements - Support parameters in preview paths. This functionality will allow the user to use front matter data to generate the preview URL. - Parameter support for content folder paths. - *Waiting for more feedback!* <!-- github-sync-id:1388833960 -->
adam closed this issue 2026-10-05 02:41:40 +02:00
adam commented 2026-10-05 02:41:41 +02:00
Author
Owner
Copy link
Copy source

Been learning HEXO for the last 15 months and now building my blog... Looking to automate some of my workflows and FrontMatter looks promising. However, a few issues make it more painful than I have time to fix.

  1. Docs on website don't explain how to setup the templates in .frontmatter/templates folder. Some examples would be great. Oh, I see I missed this: https://frontmatter.codes/docs/content-creation/additional-config#creating-a-template
  2. OOTB (out of the box), Hexo comes with a preset path (permalink: :year/:month/:day/:title) in the _config.yml file. At present, the frontMatter.preview.pathName parameter doesn't appear to support using category/tags/lang/etc in the path. Here are the parameters supported by Hexo: https://hexo.io/docs/permalinks .
  1. How do I change the FrontMatter dashboard to show my img: parameter from the MD frontmatter? There's no way to customize the the preview cards?
  2. I've defined my folders where my post and drafts are stored. However, the "in draft" part of the dashboard shows 0 drafts despite having several in my draft folder. FrontMatter combines them all under "Published..." Hexo does not store the drafts with the posts in the same folder. So the draft frontmatter parameter is not used. I've added the draft: true frontmatter... It works now...
Been learning HEXO for the last 15 months and now building my blog... Looking to automate some of my workflows and FrontMatter looks promising. However, a few issues make it more painful than I have time to fix. 1. ~~Docs on website don't explain how to setup the templates in `.frontmatter/templates` folder. Some examples would be great.~~ Oh, I see I missed this: https://frontmatter.codes/docs/content-creation/additional-config#creating-a-template 2. OOTB (out of the box), Hexo comes with a preset path (`permalink: :year/:month/:day/:title`) in the `_config.yml` file. At present, the `frontMatter.preview.pathName` parameter doesn't appear to support using category/tags/lang/etc in the path. Here are the parameters supported by Hexo: https://hexo.io/docs/permalinks . * My initial testing for `frontMatter.preview.pathName` was set to `YYYY/MMdd`, but instead of converting that pattern to the expected numbers, it simply appended it to the pathName... It would be great if I could define similar pathway patterns as found in Hexo docs. * At the moment, my path pattern is YYYY/MMdd/{categories}/{title}. For example: - https://blog.richiebartlett.com/2022/0926/Life_%E7%94%9F%E6%B4%BB/20-powerful-visuals-about-psychology-life.html - https://blog.richiebartlett.com/2022/0924/Work_%E4%BB%95%E4%BA%8B/How-We-Hold-Our-Gadgets.html - https://blog.richiebartlett.com/2022/0920/Fun_%E6%A5%BD%E3%81%97%E3%81%84%E7%89%A9/LEGO/Great-LEGO-build-may-not-win-power-but-it-wins-respect.html - http://127.0.0.1:4000/2022/0926/Life_%E7%94%9F%E6%B4%BB/20-powerful-visuals-about-psychology-life.html 3. How do I change the FrontMatter dashboard to show my `img:` parameter from the MD frontmatter? There's no way to customize the the preview cards? 4. ~~I've defined my folders where my post and drafts are stored. However, the "in draft" part of the dashboard shows 0 drafts despite having several in my draft folder. FrontMatter combines them all under "Published..." Hexo does _not_ store the drafts with the posts in the same folder. So the `draft` frontmatter parameter is not used.~~ I've added the `draft: true` frontmatter... It works now... <!-- github-comment-id:1260816452 -->
adam commented 2026-10-05 02:41:42 +02:00
Author
Owner
Copy link
Copy source

Thanks @lorezyra for your feedback.

How do I change the FrontMatter dashboard to show my img: parameter from the MD frontmatter? There's no way to customize the the preview cards?

You can do this by setting the isPreviewImage property to true for your content type like documented here: https://frontmatter.codes/docs/content-creation/fields#image

Thanks @lorezyra for your feedback. > How do I change the FrontMatter dashboard to show my img: parameter from the MD frontmatter? There's no way to customize the the preview cards? You can do this by setting the `isPreviewImage` property to `true` for your content type like documented here: https://frontmatter.codes/docs/content-creation/fields#image <!-- github-comment-id:1262069097 -->
adam commented 2026-10-05 02:41:43 +02:00
Author
Owner
Copy link
Copy source

Also, I have a folder structure for my categories. I might have a post 3 folders (categories) deep. Those categories are a part of the path. For example: /Science/Health/weight-loss.html or /Work/Programming/JS/ExtJS/Sencha.html

Also, I have a folder structure for my categories. I might have a post 3 folders (categories) deep. Those categories are a part of the path. For example: `/Science/Health/weight-loss.html` or `/Work/Programming/JS/ExtJS/Sencha.html` <!-- github-comment-id:1263176354 -->
adam commented 2026-10-05 02:41:43 +02:00
Author
Owner
Copy link
Copy source

Is this what I should be looking for?
https://frontmatter.codes/docs/content-creation/placeholders

Is this what I should be looking for? https://frontmatter.codes/docs/content-creation/placeholders <!-- github-comment-id:1263530170 -->
adam commented 2026-10-05 02:41:44 +02:00
Author
Owner
Copy link
Copy source

@lorezyra, these placeholders are used when you are creating content. In your case, you want to let Front Matter know how it needs to show your page in the preview. This can only be done with the previewPath properties and they don't have the ability yet to use your page its front matter to generate the preview URL.

BTW: how is your article's front matter structured? When you say: "3 folders (categories) deep", how do you set it in the page?

@lorezyra, these placeholders are used when you are creating content. In your case, you want to let Front Matter know how it needs to show your page in the preview. This can only be done with the `previewPath` properties and they don't have the ability yet to use your page its front matter to generate the preview URL. BTW: how is your article's front matter structured? When you say: "3 folders (categories) deep", how do you set it in the page? <!-- github-comment-id:1263558679 -->
adam commented 2026-10-05 02:41:45 +02:00
Author
Owner
Copy link
Copy source

Here's a sample of my front-matter:

---
title: 20 powerful visuals about psychology & Life
tags:
  - Psychology
categories:
  - Life_生活
sticky: 999
comments: true
lang: en
type: HEXO/post
toc: true
tocOpen: true
indexing: true
display_tag_onHome: true
recommendedSection: false
donate: true
geolocation: Chiba, Japan
mathjax: false
share: false
copyright: true
copyLicense: false
copyLicenseURL: false
copyLicenseDesc: false
sourceUrl: false
sourceAuthor: false
sourceAuthorImg: false
sourcePublishDate: false
img: /2022/0926/Life_生活/20-powerful-visuals-about-psychology-life/AdobeStock_267678616_Maslows-needs-pyramid.svg
openGraph_img: /2022/0926/Life_生活/20-powerful-visuals-about-psychology-life/AdobeStock_267678616_Maslows-needs-pyramid.png
readTime: false
wordCount: false
date: 2022-09-26 21:55:14
updated: 2022-09-26 21:55:14
excerpt: Deconstruct complex ideas and long-form articles into simple, and thought-provoking visuals.
---

Categories are automatically generated from my folder's tree structure.

For example, the post /Work/Programming/JS/ExtJS/Sencha.html would have the following value for categories:

categories:
  - Work
  - Programming
  - JS
  - ExtJS
Here's a sample of my front-matter: ```yml --- title: 20 powerful visuals about psychology & Life tags: - Psychology categories: - Life_生活 sticky: 999 comments: true lang: en type: HEXO/post toc: true tocOpen: true indexing: true display_tag_onHome: true recommendedSection: false donate: true geolocation: Chiba, Japan mathjax: false share: false copyright: true copyLicense: false copyLicenseURL: false copyLicenseDesc: false sourceUrl: false sourceAuthor: false sourceAuthorImg: false sourcePublishDate: false img: /2022/0926/Life_生活/20-powerful-visuals-about-psychology-life/AdobeStock_267678616_Maslows-needs-pyramid.svg openGraph_img: /2022/0926/Life_生活/20-powerful-visuals-about-psychology-life/AdobeStock_267678616_Maslows-needs-pyramid.png readTime: false wordCount: false date: 2022-09-26 21:55:14 updated: 2022-09-26 21:55:14 excerpt: Deconstruct complex ideas and long-form articles into simple, and thought-provoking visuals. --- ``` --- Categories are automatically generated from my folder's tree structure. For example, the post `/Work/Programming/JS/ExtJS/Sencha.html` would have the following value for `categories`: ```yml categories: - Work - Programming - JS - ExtJS ``` <!-- github-comment-id:1263651082 -->
adam commented 2026-10-05 02:41:46 +02:00
Author
Owner
Copy link
Copy source

Ok, so the path for your file is not generated by any metadata in the file, as you create it in the folder.

Ok, so the path for your file is not generated by any metadata in the file, as you create it in the folder. <!-- github-comment-id:1263655660 -->
adam commented 2026-10-05 02:41:46 +02:00
Author
Owner
Copy link
Copy source

I'm interested in this too. I follow the next structure for my articles:

  • blog/
    • 2022/ (yyyy)
      • 12/ (MM)
        • my-post/
          • index.md
          • cover-image.jpg

Right now, I'm unable to use Front Matter to create new content or the preview functionality.

I'm interested in this too. I follow the next structure for my articles: - blog/ - 2022/ (yyyy) - 12/ (MM) - my-post/ - index.md - cover-image.jpg Right now, I'm unable to use Front Matter to create new content or the preview functionality. <!-- github-comment-id:1343034461 -->
adam commented 2026-10-05 02:41:47 +02:00
Author
Owner
Copy link
Copy source

Good news @AlbertoFdzM and @lorezyra, I started working on this enhancement.

In version 8.3.0, Front Matter will support placeholders in content paths.

{
  "frontMatter.content.pageFolders": [    {
      "title": "Content by month",
      "filePrefix": null,
      "path": "[[workspace]]/content-folder/{{year}}/{{month}}"
    }
  ]
}

This creates the content as follows:

image

Good news @AlbertoFdzM and @lorezyra, I started working on this enhancement. In version `8.3.0`, Front Matter will support placeholders in content paths. ```json { "frontMatter.content.pageFolders": [ { "title": "Content by month", "filePrefix": null, "path": "[[workspace]]/content-folder/{{year}}/{{month}}" } ] } ``` This creates the content as follows: ![image](https://user-images.githubusercontent.com/2900833/217942941-84495602-39a4-41a3-9ec1-78c9f5bb6905.png) <!-- github-comment-id:1424863745 -->
adam commented 2026-10-05 02:41:48 +02:00
Author
Owner
Copy link
Copy source

It supports at the moment the following placeholders: https://frontmatter.codes/docs/content-creation/placeholders#placeholders

Feel free to test it out in the latest beta.

PS: This is not yet working on the preview path, this is the next step.

It supports at the moment the following placeholders: https://frontmatter.codes/docs/content-creation/placeholders#placeholders Feel free to test it out in the latest beta. PS: This is not yet working on the preview path, this is the next step. <!-- github-comment-id:1424866322 -->
adam commented 2026-10-05 02:41:48 +02:00
Author
Owner
Copy link
Copy source

Good news, preview paths now also support placeholders, but there is even more! There are two new types introduced for previews:

  • {{fm.<field>}}: It allows you to use a field value
  • {{pathToken.<integer>}}: It allows you to define the index of the part or the path you want to include in your URL

Here is an example:

  "frontMatter.content.pageFolders": [    {
      "title": "Content by month",
      "filePrefix": null,
      "previewPath": "/{{fm.type}}/{{pathToken.3}}/{{pathToken.4}}",
      "path": "[[workspace]]/content-folder/{{year}}/{{month}}",
      "contentTypes": ["post"]
    }
  ]
}

In my case, the above will generate a file in the content-folder/2023/02 folder, and when you want to preview, it will use the content type configuration to find the configured preview path (it can also be configured on the content type).

Here is an example of defining it on the content type (preferred):

{
  "frontMatter.taxonomy.contentTypes": [
    {
      "name": "post",
      "previewPath": "/{{fm.type}}/{{pathToken.3}}/{{pathToken.4}}",
      "pageBundle": false,
      "fields": []
    }
  ]
}

image

Good news, preview paths now also support placeholders, but there is even more! There are two new types introduced for previews: - `{{fm.<field>}}`: It allows you to use a field value - `{{pathToken.<integer>}}`: It allows you to define the index of the part or the path you want to include in your URL Here is an example: ```json "frontMatter.content.pageFolders": [ { "title": "Content by month", "filePrefix": null, "previewPath": "/{{fm.type}}/{{pathToken.3}}/{{pathToken.4}}", "path": "[[workspace]]/content-folder/{{year}}/{{month}}", "contentTypes": ["post"] } ] } ``` In my case, the above will generate a file in the `content-folder/2023/02` folder, and when you want to preview, it will use the content type configuration to find the configured preview path (it can also be configured on the content type). Here is an example of defining it on the content type (preferred): ```json { "frontMatter.taxonomy.contentTypes": [ { "name": "post", "previewPath": "/{{fm.type}}/{{pathToken.3}}/{{pathToken.4}}", "pageBundle": false, "fields": [] } ] } ``` ![image](https://user-images.githubusercontent.com/2900833/218106772-256aa65d-73ea-4318-a45c-6b99883ea58d.png) <!-- github-comment-id:1425830925 -->
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#343