Enhancement: Parameter support for defining paths

[estruyf]

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!

[lorezyra]

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...

[estruyf]

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

[lorezyra]

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

[lorezyra]

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

[estruyf]

@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]

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

[estruyf]

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

[AlbertoFdzM]

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.

[estruyf]

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:

[estruyf]

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.

[estruyf]

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": []
    }
  ]
}