Create references/sources shortcode with URLs in front matter

support
1

Hi,

I want to create a references/sources section at the bottom of each page, but I want to specify the URLs in the front matter of each page.

The anchor text of the links need to be the URLs, so no need for “Example.com” or “How to change the time zone”. Just the URL (e.g., https://example.com/change-time-zone/)

Then in the single.html I want to add a partial that displays the references/sources links specified in the front matter.

And it doesn’t need to show when there are no URLs specified.

Is this possible? If yes, how?

2

Yes.

front matter (TOML)

+++
title = 'Test'
date = 2021-01-01T00:00:00-00:00
draft = false
sources = ['https://example.com/foo','https://example.com/bar']
+++

layouts/_default/single.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ partial "sources.html" . }}
{{ end }}

layouts/partials/sources.html

{{ with .Params.sources }}
  <p>Sources:</p>
  <ul>
    {{ range . }}
      <li><a href="{{ . }}">{{ . }}</a></li>
    {{ end }}
  </ul>
{{ end }}
1 Like
3

Thank you for your answer.

But I get the following error message:

Start building sites …
hugo v0.104.1-8958b8741f552c8024af5194330fbf031544a826 windows/amd64 BuildDate=2022-09-26T17:05:45Z VendorInfo=gohugoio
Error: Error building site: failed to render pages: render of "page" failed: "C:\Users\m\Websites\Sites\websitename\themes\ThemeName\layouts\_default\single.html:10:3": execute of template failed: template: _default/single.html:10:3: executing "main" at <partial "sources.html" .>: error calling partial: "C:\Users\m\Websites\Sites\websitename\layouts\partials\sources.html:3:9": execute of template failed: template: partials/sources.html:3:9: executing "partials/sources.html" at <.>: range can't iterate over https://www.example.com/example-page/
Total in 1649 ms
4

It works fine. Try it:

git clone --single-branch -b hugo-forum-topic-41353 https://github.com/jmooring/hugo-testing hugo-forum-topic-41353
cd hugo-forum-topic-41353
hugo server

Maybe your front matter is incorrect.

5

Yes, you’re right.

Because I have 1 source for one of my pages, I thought I could set the following in the front matter:

sources: https://www.example.com/test-page

But when I changed it to the line below it worked:

sources: ["https://www.example.com/test-page"]

Normally I only use [“”] when I have multiple tags or categories or in this case sources.

6

Because the code is ranging through an array, you need to provide an array.

1 Like
7

Okay, thank you

8

Can I do the same with related articles but then with the title of the article?

9

Sure.

front matter

+++
title = 'Post 1'
date = 2022-11-09T10:00:10-08:00
draft = false
sources = ['https://example.com/foo','https://example.com/bar']
related = ['/posts/post-2','/posts/post-3']
+++

layouts/partials/related.html

{{ with .Params.related }}
  <p>Related:</p>
  <ul>
    {{ range . }}
      {{ with site.GetPage . }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
      {{ end }}
    {{ end }}
  </ul>
{{ end }}

But you might have a look at:
https://gohugo.io/content-management/related/

That would allow you to determine related content based on taxonomy terms or other fields in front matter; you wouldn’t have to hardcode the paths in front matter.

1 Like
10

Thank you

11

This doesn’t work on my side. It doesn’t show anything besides <p>Related:</p>

12

The you are doing it wrong. I don’t post untested code.

I’ve updated the example:

git clone --single-branch -b hugo-forum-topic-41353 https://github.com/jmooring/hugo-testing hugo-forum-topic-41353
cd hugo-forum-topic-41353
hugo server

If you need additional assistance please post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

15

Your solution doesn’t work for me. That’s why I hope someone else will provide a solution that works for me.

16

This does exactly what you want:

git clone --single-branch -b hugo-forum-topic-41353 https://github.com/jmooring/hugo-testing hugo-forum-topic-41353
cd hugo-forum-topic-41353
hugo server

If it isn’t working for you, please post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

17

Could it be because I’m using HTML files instead of MD files?

Front matter example:

---
title: "This is the title of the article"
description: "This is the description of the article"
category: Category
tag: Tag
type: article
related: ["/example-page-url/"]
sources: ["https://www.example.com/test-page/"]
date: 2022-11-05T10:18:00+08:00
lastmod: 2022-11-05T10:18:00+08:00
---

/layouts/default/single.html

{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ if isset .Params "category" }}<hr>
{{ partial "categories.html" . }}{{ end }}
<hr>
{{ if ne .Params.no_ads true }}{{ if eq .Type "article" }}{{ partial "bottom-ad.html" . }}{{ end }}{{ if eq .Type "video" }}{{ partial "video-bottom-ad.html" . }}{{ end }}{{ end }}
{{ if isset .Params "related" }}<hr>{{ partial "related.html" . }}{{ end }}
{{ if isset .Params "sources" }}<hr>{{ partial "sources.html" . }}{{ end }}
{{ end }}

layouts/partials/related.html

{{ with .Params.related }}
<p>Related:</p>
{{ range . }}
{{ with site.GetPage . }}
<p><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>
{{ end }}
{{ end }}
{{ end }}

Only Related: (text/title above the related articles section) shows up and not a link to the related article I’ve set in the front matter.

18

Anyone?

19

If your HTML file contains front matter, then site.GetPage can find your page provided that it is not draft, dated in the future, or expired.

With the trailing slash, this is looking for a section in the root of your site.

If you need additional assistance, for the third and last time, please post a link to the public repository for your project.