Using Markdown content inside JSOn Schema

feature
1

I am building a recipe website because of this I need to markup my site with the correct JSON schema. This will allow me to appear in the enhanced elements of the SERP.

I have a working solution however it requires me to extract content that would normally be in the markdown into a JSON file. From there I can then use this content when building the schema as well as when building the page.

File Containing content

[
    {
        "question": "Can I use different vegetables?",
        "answer": "Yes! In this recipe, we use chopped carrots, but great contenders for this recipe are:\\n - Broccoli\\n - Zucchini\\n - Mushrooms\\nHowever, keep in mind that that delicate vegetable should be cooked separately to avoid them becoming too mushy."
    },
    {
        "question": "How much chili should I use?",
        "answer": "1 teaspoon crushed chilies 🌶🌶🌶\\n½ teaspoon crushed chilies 🌶🌶\\n¼ teaspoon crushed chilies 🌶\\nThis dish also doesn’t need spice to taste great! Skip the crushed chilies altogether if you’d prefer a milder meal."
    }
]

Single.html

                {{- $faq := (index .Site.Data (replace .File.Dir "/" "")).faq -}}
                {{- range $faq -}}
                    <h2 class="recipe__content-question">{{.question}}</h3>
                    <p class="recipe__content-answer">{{(replace (.answer | markdownify) "\\n" "<br />" ) | safeHTML }}</p>
                {{- end -}}

I am then able to generate the correct schema format like this

{{- $faq := (index .Site.Data (replace .File.Dir "/" "")).faq -}}
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
    {{- range $i, $faqItem := $faq -}}
    {
      "@type": "Question",
      "name": "{{$faqItem.question}}",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "{{(replace ($faqItem.answer | markdownify) "\\n" "<br/>" ) | safeHTML }}"
      }
    }
    {{- if ne (add $i 1) (len $faq) -}},{{- end -}}
    {{- end -}}
    ]
  }

My problem with this approach is that it’s really horrible to write content in this JSON format, even things like new lines that are easy in markdown become quite unreadable.

My current idea is that I would like to be able to write all of my content in the markdown and use shortcodes to tag key areas. I would then like to be able to access an array of all FAQs on the page.

{{<FAQ>}}
{{<Question>}} 
## Test question
{{</Question>}} 
{{<Answer>}} 
Test answer
{{</Answer>}} 
{{</FAQ>}}

Has anyone come up with a better solution to this problem? or can they see a better way to improve this in Hugo?

Schema is a really important part of building a competitive webpage these days so it would be great to find a way to improve the support of it in Hugo.

2

Another user came up with a suggestion almost identical to yours a few day ago.

I am not aware of another solution, so I guess that you should try the nested shortcodes route and see if it’s a viable option for your purposes.

3

It looks like this is not possible, I had an idea to attempt to use shortcodes and then using .Scratch to communicate between my markdown and the HTML renderer.

However, it appears this is not possible.

My shortcode

{{.Scratch.Set "testing" "example" }}
{{.Inner}}

My single.html

<h1>{{ .Scratch.Get "testing" }}</h1>

The expected output is

<h1>example</h1>

Actual output

<h1></h1>

Any idea why this doesn’t work? Additionally does anyone have a suggestion as to how I can store data that comes in via a shortcode and access it from within the HTML templates as this is key to finding a solution here.

4

Note that .Scratch from a shortcode will return the shortcode’s Scratch , which in most cases is what you want. If you want to store it in the page scoped Scratch, then use .Page.Scratch .

.Scratch Documentation

5

Thanks that did the trick.

I have however run into a weird issue, if I reload my Hugo server with the below command everything works fine

hugo server -D

However, as soon as I modify a file that triggers a live-reload the data from my scratchpad is empty. This is fixed by restarting Hugo and running the above command again.

I suspected this to be some kind of optimization issue where the content is not re-rendered and thus the shortcode is not triggered. However, I would expect the following command to resolve that

hugo server -D --disableFastRender

However, with fast render disabled the scratchpad is always empty even on the first load.

Am I missing something obvious here? or is this a bug

6

Seeing the project in question or (if you cannot share) a project with dummy content that reproduces the empty scratchpad when running hugo server, would help understand whether this is a bug or something else.

I haven’t encountered the behavior you report.

7

A post was split to a new topic: .Page.Scratch missing on rebuilds in live-reload

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.