Blogroll/Website List in Right Sidebar?

Hey there,
I’m new to Hugo (entirely). I’m using the hugo-icarus-theme, which is very nice so far. I have it generally set up as a decent framework to start doing stuff with it and I’m wondering: how can I add a small “favorite sites” to the right hand side? I just want to add a few sites there. I actually searched for how to it, and I honestly couldn’t find anything specific, which is odd. So I’m asking in here - hope that’s okay. Maybe I used the wrong search terms. I know it’s probably in some partials file, but I just have no idea which one or where or what to put in.

Any help would be greatly appreciated. Thank you all for reading and for any help.

You have to tune the theme templates and CSS.

Read first:

1 Like

Thank you. I’ll read that and see what I can figure out.

Your theme already have a sidebar so you only need to populate it.

Start by adding a new favourite content type, i.e. create a new directory inside the “content” directory. Lets name it “favourite” for this example.

Add all the favourites you need, one content post for each. A post could be as simple as this, only frontmatter with title and link.

---
title: "Example"
link: "https://www.example.org/"

---

Now you need to update your layout templates to render these favourite links.

Inside your root layouts directory create

  1. partials/widgets/favourites.html. Maybe something like this.
<ul>
{{ range where .Pages "Type" "favourite" -}}
{{ .Render "link" }}
{{ end -}}
</ul>
  1. _default/link.html, see “link” in the render statement above. Simplest version is.
<li><a href="{{ .Params.Link }}">{{ .Title }}</a></li>

(Since link is a custom variable in the frontmatter it’s accessed via .Params.)

Copy layouts/partials/sidebar.html from the theme to the same location inside you root layouts directory. (If you edit it in place it will work, but when you update your theme your changes will be overwritten. Best practice is to copy it to the root and edit it there.)

In the copied sidebar.html add the the new favourite widget where you want to display the links. Use this code.

{{ partial "widgets/favourites" . }}

This part with dividing up the sidebar template in “widgets” is just how your theme does it, it has nothing to do with Hugo.

4 Likes

Wow! Thank you! I’m going to try that out in another couple of hours. Just heading out for a bit. That sounds like what I was looking for but I guess I’ll see. I just wanted to link to a few of my favorite blog sites I really love and respect for the info they give out. :slight_smile:

If it looks too complex for your needs you can just hardcode the favourite links in sidebar.html and be done with it.

I did it the long way you suggested and it worked beautifully. Thank you :slight_smile: Wasn’t too hard at all and allows for greater control of course. Very appreciated. :slight_smile: