Using other ways to include content in Hugo?

support
1

Hi all,
I just wanted to know if there was another way to include content into Hugo themes besides partials? I tried to call content outside of the partial folder but that gave me an error. I am just playing around with new theme ideas. Maybe a bit like the include function in PHP?!

Thank you in advance. E

2

One option is to use the readFile func https://gohugo.io/templates/files/#use-readfile

Another option is to put your content in a page bundle https://gohugo.io/content-management/page-bundles/#readout

3

Thank you @zwbetz! Readfile looks interesting, are there any disadvantages using that over partials ? I guess if I need to pass variables maybe ?

4

It depends on your use case. Give us an example of content you would be including

1 Like
5

Hi @zwbetz I tried using readfile today and created a file called foo.html and added it to my root. The HTML file just has a div with a background colour and “foo” as text, but when I visit my localhost I just see “foo” and not the background colour, the tag I used was: {{readFile “foo.html”}}

Does readfile only pass text ?

6

How does the actual rendered source look like? Because you may have to call it like:

{{readFile "foo.html" | safeHTML}}
7

AHH I see, I will try to add that tomorrow, I just see the div class of foo and the text inside as it’s just passing it as plain text. I will comment back tomorrow. Thank you zwbetz

8

Several ways to do this, depending on your use case:

Static HTML, created outside of your Hugo site, that you want to link to
Make a directory for the file or files, put them there, and then add staticDir = [*dirname]* to your config file. Hugo automatically moves the files in dirname to the root of your site. You can link to them from your content using a short code like html_ref.html:

<a href="{{- .Site.BaseURL -}}/{{- safeHTML (.Get 0) -}}">{{- .Inner -}}</a>

then {{< html_ref "someFile.html" >}}someText{{< /html_ref >}}

Data file containing YAML, JSON, or TOML

In the /data subdirectory of your Hugo site (I think you can change the name in your config file), put the file containing the data you want to use. Refer to the contents of a key using something like this:

{{ .Site.Data.someFileName.someKey | markdownify }}

where someFileName is the name of the data file, and some is a YAML variable or TOML variable or JSON property. I can send examples to people who want one.

asciidoctor

In case you’re using asciidoctor or you’re just curious, you can use the asciidoctor ::include in Hugo content. Use something ::include includes/someFileName.adoc[]. Shameless plug: if you want to write complex content like documentation, asciidoctor is well worth learning.

1 Like
9

Wow thanks for the detailed information on will look into that !) Also was not aware about the staticDir would put the files in my root, super helpful

10

Yes! {{readFile “foo.html” | safeHTML}} works and can now see the HTML, but unfortunately I can’t pass say {{ . Site.Title }} and see my site name when I include it in a readFile :frowning:

11

This is why I asked for an example of your content. There’s likely a way to get what you want, I just can’t help you unless I see it :slight_smile:

12

Static files and static directories are an important feature of Hugo that I think could be more fully documented. Most of the Hugo documentation is reference: “Here’s how you do (some technical web or blog feature)”. There’s much less documentation along the lines of “What can I do with Hugo? How do I (some task expressed in terms of the user)”. And really not many detailed examples at all. As a technical writer, I can see what’s wrong. As full-time employee, I don’t have the time to fix it.

1 Like