CODEWITHSUNDEEP
hugohugo-shortcode
jloosli
jloosli

Reputation: 2581

Use variable inside Hugo content

I'm trying to use a variable within the content of a Hugo statically generated site. For example, the content looks like the following:

  1. Go to your site's url ({{ .Site.BaseURL }})
  2. Enter your credentials
  3. .....(blah blah blah)

When this gets rendered, the {{ .... }} part doesn't get processed...it stays the same as I put above. I've tried it with a $ in front as well. Variables within templates seem to work just fine. Do I need to create a shortcode to use within content pages?

Upvotes: 20

Views: 10643

Answers (4)

bufh
bufh

Reputation: 3410

This is an attempt to slightly improve @minitauros answer with a simplistic example to lookup a (site) parameter sub-key (aka walk the YAML tree, infer an element, etc.).

I would like Hugo to have a JSONPath or jq syntax and, obviously, this example is far from competing with either solutions.

config.yml

params:
  mode: one
  support:
    mailing: [email protected]

layouts/shortcodes/param.html

{{ $v := .Site.Params }}
{{ range (split (.Get 0) ".") }}{{ $v = index $v (.) }}{{ end }}
{{ $v }}

content/_index.md

We are in mode {{< param "mode" >}}.

In case of turbulence, [reach the support](mailto:{{< param "support.mailing" >}}) for help.

Upvotes: 3

Ashish Lahoti
Ashish Lahoti

Reputation: 1008

In Hugo, When you want to use a variable in markdown (.md) file then you need to create a shortcode for that first.

You can follow these steps:-

create shortcode

layouts/shortcodes/siteurl.html

{{ .Page.Site.BaseURL }}

usage

content/post/myblogpost.md

---
# front-matter
---
1. Go to your site's url ({{< siteurl >}})
2. Enter your credentials
3. .....(blah blah blah)

result

post/myblogpost.html

1. Go to your site's url (https://codingnconcepts.com)
2. Enter your credentials
3. .....(blah blah blah)

Source: https://codingnconcepts.com/hugo/custom-shortcode-hugo/

Upvotes: 5

minitauros
minitauros

Reputation: 2030

I had the same problem, and this post helped me.

I wanted to display a site param in my site content, and discovered you cannot use regular templating inside content files.

In the end I created a shortcode to load the requested site param. Who knows this information might help someone.

/config.yml

params:
  appName: My app

/content/about.html

<p>My app's name is {{< param "appName" >}}</p>

/layouts/shortcodes/param.html

{{/* Usage: {{< param "siteParamName" }} */}}
{{ index .Site.Params (.Get 0) }}

Result

<p>My app's name is My app</p>

Upvotes: 2

jloosli
jloosli

Reputation: 2581

So it looks like a shortcode is the way to do this. For what it's worth, I changed the document to look like the following:

  1. Go to your site's url ({{< siteurl >}})

In layouts/shortcodes, I created the file siteurl.html. It looks like the following: 

{{ .Page.Site.BaseURL }}

I needed to add .Page in there to get access to the Site variables. See this Issue Report for more details.

Upvotes: 24

Related Questions