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

How to align the default slug generation behavior with astro? #718

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

Is your feature request related to a problem? Please describe.
Refer Astro Content Loader API | Docs, astro use github-slugger to generate a slug with kebab-cased words.

Setting frontMatter.taxonomy.slugTemplate has these options:

  • When using the {{title}} placeholder in the slug template it will be automatically converted to lowercase and spaces will be replaced with hyphens.
  • To have a SEO friendly URL, you can use the {{seoTitle}} placeholder instead.
  • If the setting is not defined, the page name will be used as the slug.

I don't use slug property in file, just let astro generate it by file name. But there is no an option to tell front matter CMS to use a slugged file name to open the preview.

It is not a big problem, since files created by front matter panel has a slugged file name. But when user create file manually, the file name may have space, causes preview path mismatch.

Describe the solution you'd like
New setting to set file name to slug strategy. Or new placeholder like {{fileName}}, {{sluggedFileName}} for frontMatter.taxonomy.slugTemplate. Or match the slug strategy automatically with the framework setting

**Is your feature request related to a problem? Please describe.** Refer [Astro Content Loader API | Docs](https://docs.astro.build/en/reference/content-loader-reference/#generateid), astro use [github-slugger](https://github.com/Flet/github-slugger) to generate a slug with [kebab-cased](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case) words. Setting `frontMatter.taxonomy.slugTemplate` has these options: - When using the {{title}} placeholder in the slug template it will be automatically converted to lowercase and spaces will be replaced with hyphens. - To have a SEO friendly URL, you can use the {{seoTitle}} placeholder instead. - If the setting is not defined, the page name will be used as the slug. I don't use `slug` property in file, just let astro generate it by file name. But there is no an option to tell front matter CMS to use a slugged file name to open the preview. It is not a big problem, since files created by front matter panel has a slugged file name. But when user create file manually, the file name may have space, causes preview path mismatch. **Describe the solution you'd like** New setting to set file name to slug strategy. Or new placeholder like {{fileName}}, {{sluggedFileName}} for `frontMatter.taxonomy.slugTemplate`. Or match the slug strategy automatically with the framework setting <!-- github-sync-id:2855080794 -->
adam closed this issue 2026-10-05 03:02:00 +02:00
adam commented 2026-10-05 03:02:01 +02:00
Author
Owner
Copy link
Copy source

Thanks @yinhx3 for the suggestion. Both of the placeholders make sense and are now available in the latest beta.

"frontMatter.taxonomy.slugTemplate": "{{fileName}}",
"frontMatter.taxonomy.slugTemplate": "{{sluggedFileName}}"
Thanks @yinhx3 for the suggestion. Both of the placeholders make sense and are now available in the latest beta. ```json "frontMatter.taxonomy.slugTemplate": "{{fileName}}", "frontMatter.taxonomy.slugTemplate": "{{sluggedFileName}}" ``` <!-- github-comment-id:2660976254 -->
adam commented 2026-10-05 03:02:01 +02:00
Author
Owner
Copy link
Copy source

Version 10.8.0 has been released

Version 10.8.0 has been released <!-- github-comment-id:2687639271 -->
adam commented 2026-10-05 03:02:02 +02:00
Author
Owner
Copy link
Copy source

It occurred to me that "slugged" is wrong, it should be "slugified".

It occurred to me that "slugged" is wrong, it should be "slugified". <!-- github-comment-id:2746097917 -->
adam commented 2026-10-05 03:02:03 +02:00
Author
Owner
Copy link
Copy source

@yinhx3 added the {{slugifiedFileName}} placeholder in the beta version.

@yinhx3 added the `{{slugifiedFileName}}` placeholder in the beta version. <!-- github-comment-id:2747181433 -->
adam commented 2026-10-05 03:02:03 +02:00
Author
Owner
Copy link
Copy source

Version 10.9.0 just got released with this included.

Version 10.9.0 just got released with this included. <!-- github-comment-id:3022248237 -->
adam commented 2026-10-05 03:02:04 +02:00
Author
Owner
Copy link
Copy source

Is this undocumented? I've been struggling a lot with this very issue with Hugo for several hours today...

  • FrontMatter CMS generates 2025-10-04-my-new-page\index.md (Hugo page bundles)
  • Frontmatter preview by default opens http:\\localhost:1313\my-new-page, which is a 404.
  • My fiddling around I can kinda force it by overriding the default slug template with "frontMatter.taxonomy.slugTemplate": "{{date|yyyy-MM-dd}}-{{seoTitle}}" or with {{Title}}, but this breaks if I rename any files or retitle it.

It seems it would be far more logical for the slug default to depend on file/folder name given initially (and automatically) by FrontMatter itself, rather than a separate calculated {{slug}} variable that does not match and will 404 by default without hours of frontmatter.json hacking to partially fix...

Neither "frontMatter.taxonomy.slugTemplate": "{{date|yyyy-MM-dd}}-{{slugifiedFileName}}" nor "frontMatter.taxonomy.slugTemplate": "{{date|yyyy-MM-dd}}-{{sluggedFileName}}" work with Hugo page bundles, where filename is index.md (folder name should be referenced instead) and seems to come up blank as http://localhost:1313/2024-08-04-/

Is this undocumented? I've been struggling a lot with this very issue with Hugo for several hours today... - FrontMatter CMS generates `2025-10-04-my-new-page\index.md` (Hugo page bundles) - Frontmatter preview by default opens `http:\\localhost:1313\my-new-page`, which is a 404. - My fiddling around I can kinda force it by overriding the default slug template with `"frontMatter.taxonomy.slugTemplate": "{{date|yyyy-MM-dd}}-{{seoTitle}}"` or with `{{Title}}`, but this breaks if I rename any files or retitle it. It seems it would be far more logical for the slug default to depend on file/folder name given initially (and automatically) by FrontMatter itself, rather than a separate calculated {{slug}} variable that does not match and will 404 by default without hours of `frontmatter.json` hacking to partially fix... Neither `"frontMatter.taxonomy.slugTemplate": "{{date|yyyy-MM-dd}}-{{slugifiedFileName}}"` nor `"frontMatter.taxonomy.slugTemplate": "{{date|yyyy-MM-dd}}-{{sluggedFileName}}"` work with Hugo page bundles, where filename is `index.md` (folder name should be referenced instead) and seems to come up blank as `http://localhost:1313/2024-08-04-/` <!-- github-comment-id:3151886372 -->
adam commented 2026-10-05 03:02:05 +02:00
Author
Owner
Copy link
Copy source

@AdriandeLima all the supported placeholders can be found here:

In your case, if you want to use your page folder as name, you can use the following config: https://frontmatter.codes/docs/content-creation/placeholders#slug-placeholders

{
  "title": "blog",
  "path": "[[workspace]]/content/blog",
  "previewPath": "blog/{{pathToken.relPath}}", 
  "trailingSlash": true,
  "excludePaths": ["**/_index.md"]
}
@AdriandeLima all the supported placeholders can be found here: In your case, if you want to use your page folder as name, you can use the following config: https://frontmatter.codes/docs/content-creation/placeholders#slug-placeholders ```json { "title": "blog", "path": "[[workspace]]/content/blog", "previewPath": "blog/{{pathToken.relPath}}", "trailingSlash": true, "excludePaths": ["**/_index.md"] } ``` <!-- github-comment-id:3152082403 -->
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#718