How to best render a list? (ideally via a range)

support
1

I would like to add on the right side of my site a list of favorite sites and channels, something like that (this sis the right side of the page):

image
image607×910 55.5 KB

The best I found so far is to write a Markdown file:

---
title: ""
meta: true
---

## Some sites I like

- aza
- kjhkjhkjhkj

## Some channels I like

- lmkmqslkd
- mqlskdmqlskd qsdmlq
- qmsldkqmlskdmq

and render it via

{{ os.ReadFile "content/great-sites.md" | markdownify }}

While this almost works (I cannot yet get rid of the frontmatter being parsed by markdonify) it is a bit cumbersome because I have to style the content separately through a class instead of how I do it for the Latest posts and All tags sections above:

            <!-- latests posts -->
            <div class="pt-5">
                <h2 class="text-center font-bold mb-5">Latest posts</h2>
                {{ range ( where .Site.RegularPages "Type" "posts" | first 3 ) }}
                <li class="pl-3" style="list-style-type: none;"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
                {{end}}
            </div>

            <!-- list of tags -->
            <div>
                <h2 class="text-center font-bold mb-5">All tags</h2>
                <div class="ml-5">
                    {{ range $key, $value := .Site.Taxonomies.tags }} {{ partial "tag.html" $key }} {{ end }}
                </div>
            </div>

My question: is there a good way to write such a list and render it through a range?

2

I think I found a solution: I added the structure I wanted in config.toml:

[params]
  [[params.sites]]
    title = "Eddie Woo"
    url = "https://www.youtube.com/c/misterwootube"
    description = "a fantastic math teacher"
  [[params.sites]]
    title = "Eddie Woo"
    url = "https://www.youtube.com/c/misterwootube"
    description = "a fantastic math teacher"

and then render it dynamically:

<div class="favorite">
  {{ range .Site.Params.sites }} {{ .title }} {{ .url }} {{ end }}
</div>
3

Using site.Data approach would be similar to what you did, but much cleaner. It will separate the “data” portion of your website content from the Hugo configuration.

See

1 Like