17

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?

prosoitos
  • 6,679
  • 5
  • 27
  • 41
jloosli
  • 2,461
  • 2
  • 22
  • 34

4 Answers4

22

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.

jloosli
  • 2,461
  • 2
  • 22
  • 34
3

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/

Ashish Lahoti
  • 648
  • 6
  • 8
1

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>
minitauros
  • 1,920
  • 18
  • 20
1

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: info@example.net

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.
bufh
  • 3,153
  • 31
  • 36