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

1

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.

image
image.png1204×1134 50.4 KB

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!

2

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
3

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.

4

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
5

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
6

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!