How would I create a sidebar with page specific "related links"?

I am looking for a way to generate main content and related external links all from one .md file. How would I do this?

Here’s an image of the layout I’d like to achieve.

Right now I am putting it in front matter as:

Title: Example
Link1URL: http://google.com
Link1Name: Google
Link2URL: http://youtube.com
Link2Name: Youtube

Then I am hard coding about 10 of these into a “sidebar.html” partial. This isn’t very programmy, so I figured I’d poke yall’s brains a bit.

Thanks in advance!

Here’s a starting point - https://gohugo.io/content-management/related/

I have not tried it, but you’d likely put the “related” partial that page mentions in your sidebar.

Also, it appears it’s relating by keywords, author, etc., so I assume that pages with the same keyword etc, would be indexed when Hugo builds, and thus appear in the list.

1 Like

Thanks for the starting point Rick! Helpful stuff because I didn’t know about it. However, my “related content” would mostly be external.

For instance, this particular site deals with international students admissions, and a “related link” would be something like a student visa form page on a .gov site.

Ideally I would like to create some sort of array that contains both link urls and link text, then that sidebar just loops through the manually entered array.

You could probably use data files for that, then.

I mean, it’s easy enough to stick them in frontmatter, but, I’d say you could get some benefit from making an array in a data file, especially if you need to link multiple pages to the same external site.

2 Likes

I think data templates are the way to go as well, but you did say, “all from one .md file”, so I poked around and came up with this.

Front matter:

sidebar:
  - "[Org Link](https://example.org)"
  - "[Com Link](https://example.com)"

Included in single.html:

{{ range .Params.sidebar }}
  {{ . | markdownify }} <br />
{{ end }}

HTML output:

<a href="https://example.org">Org Link</a> <br />
  
<a href="https://example.com">Com Link</a> <br />

Not as elegant, but probably a lot easier for most folks to grok while editing. :slight_smile:

2 Likes

Nailed it! Great job. Yeah the nature of the project isn’t very self contained, and I just wanted something that was a bit more central.

Thanks both for your advise!