Solution: Rendering Shortcodes , Use case for example a Dynamic Page Builder

support
1

Hi im using markdownify to render markdown inside Frontend Matter

My set up on home page is quite not the usual type…
Im rendering each sections partials dynamically with netlify cms

{{ define "main" }}
{{if .IsHome}}
{{$sections := .Page.Params.sections }}
{{$sc := len $sections }}
{{if gt $sc 0}}
{{- range $sections -}}
{{- partial .template . -}}
{{ if (and ( (isset .video "id") ) ( not (eq .video.id "" )) ) }}
{{- partial "modal" .video -}}
{{end}}
{{- end -}}
{{end}}
{{end}}
{{end}}

I have no problem rendering different templates but i cant simple render markdown with shortcodes.

below i tried to render body front matter with markdownify

<article class="prose prose-2xl mx-auto px-5 sm:px-0">
      <p class="lead">{{.summary}}</p>
      {{ .body|markdownify }}
 </article>

It render markdown easily but , it wont parse the shortcode

If i remember correctly .Content is reserve to hugo , but since i cannot use .Content

Im having trouble now rending shortcodes

for example

{{< youtube "hsm4poTWjMs" >}}

it just rendered a simple text {{< youtube “hsm4poTWjMs” >}}

is there a way to tell hugo to parse that specific template frontmatter?

Any help would be appreciated thanks

2

I see this is a difficult task now to do and its not possible with markdownify

The Condition is to use {{.Content}} , to enable shortcode , it needed to be a PAGE

I hope other people might find my solution quite helpful.

Especially For Someone who likes to build page builder…

// index.html for homepage

{{ define "main" }}
{{if .IsHome}}
{{$sections := .Page.Params.sections }}
{{$sc := len $sections }}
{{if gt $sc 0}}
{{- range $sections -}}
{{ $params :=  merge (dict "Site" $.Site) . }}
{{- partial .template $params -}}
{{ if (and ( (isset .video "id") ) ( not (eq .video.id "" )) ) }}
{{- partial "modal" .video -}}
{{end}}
{{- end -}}
{{end}}
{{end}}
{{end}}

As You can see on that code Ive Passed the Site as $.Site

That is needed later in any template, but this Template is not normal

It is a Headless Bundle , you can read more here

So Ive Create home/contents folder under content

inside home/contents ive created _index.md

with this content

---
index: true
draft: false
_build:
  list: false
  render: false
  cascade:
    _build:
      render: false
      list: true
---
This is HomePage Contents , This Body Wont be Used

Now I can create a New Page for example inside content/home/contents
example.md

---
index: false
order: 0
title: Example
---
Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.

{{< youtube hsm4poTWjMs >}}

As You can See There is a shortcode there and that Would be Render HOW?

So Inside a TEMPLATE , any partials im loading dynamically I just added this

<article class="prose prose-2xl mx-auto px-5 sm:px-0">
      {{with .intro}}<p class="text-2xl text-center leading-6 text-brand font-semibold tracking-wide uppercase">{{.}}</p>{{end}}
      {{with .title}}<h1 class="mt-2 mb-8 text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">{{.}}</h1>{{end}}
      {{with .summary}}<p class="lead">{{.}}</p>{{end}}
      {{ with .Site.GetPage "home/contents/example" }}{{ .Content }}{{ end }}
    </article>

As You Can See m Referencing the .Site Variable Ive Passed To Each Template

Now It Rendered the shortcode since Im on the Context of a Page and Adding {{.Content}} is now possible and is Inside the Page Scope.

Last Part is to Add a New Folder Collection to Netlify CMS for home contents.

Which can the user can choose … Yeah Im still not on that part , havent tried it ,

but i think that is possible with the relation widget…

But that is my solution to render shortcode in a dynamic template…

It may or may not fit your Use case but mine , I only need it on Home Page

Where I dont know where the user would place it, it can be at the start , middle or end…

3

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