Page Resources
A page is saved as a leaf bundle by creating it’s own folder and then adding an index.md file. When you do this other files can be stored in this folder and they become page resources.
To access these we can use .Resources in a similar way to .Pages.
1{{ range .Resources }}
2 {{ . }}
3{{ end }}
This will give the following list where there is one image, one text file and one markdown file:
profile.webp text.txt Page(/about/about.md)
Like using range with pages we could use it like this:
1<ul>
2 {{ range .Resources }}
3 <li><a href="{{ .Permalink }}">{{ .Name }}</a></li>
4 {{ end }}
5</ul>
This gives the following list with, almost, links to the files:
- profile.webp
- text.txt
- more-words.md
- about.md
Whilst the links to the first two files work the links to the two markdown files actually link to the index.md file instead. In fact while .Permalink gives the url of the resource:
Resources of type page will have no value.
Hugo docs
This listing can sorted by the type of file: image, text and page for the 4 files here by simply adding .Resources.ByType "image"
1<ul>
2 {{ range .Resources.ByType "image" }}
3 <li><a href="{{ .Permalink }}">{{ .Name }}</a></li>
4 {{ end }}
5</ul>
These are MIME types and the options are: audio, image, text,
Here is some code from Regis Philibert’s site.
1{{ with .Resources.ByType "page" }}
2<div class="page">
3 {{ range . }}
4 <h2>{{ .Title }}</h2>
5 <div>
6 {{ .Content }}
7 </div>
8 {{ end }}
9</div>
10{{ end }}
…but if you only want one specific file and only want the content of that file then:
1{{ with .Resources.GetMatch "about.md" }}
2<div>
3 {{ .Content }}
4</div>
5{{ end }}
To show an image
…simply bring it’s url into an image tag:
1<div>
2 {{ with .Resources.GetMatch "*.webp" }}
3 <img src="{{ . }}" alt="">
4 {{ end }}
5</div>
└── content
├ ─ ─ post
vertical line ||
alt 195 �
├ƕƕ$(…—Ð)
|——