Rendering posts from a particular category in Hugo

Question

I started with Hugo but dont find good examples for customization. I need to render all posts in a category called e.g. "video" to show on main site within a template "list.html".

How to change the code from term.html template to adress only this single category? Any help would be deeply appreciated!

<div class="container">
<article>
<main>
<h1>{{ $.Scratch.Get "Title" }}</h1>

<ul class="terms">
  {{ range $key, $value := .Data.Terms }}
  <li>
    <a href="{{ (print "/" $.Data.Plural "/" $key) | relURL }}">
      {{ $key }}
    </a>
    ({{ len $value }})
  </li>
  {{ end }}
</ul>
</main>
</article>
</div>

score 1 · Answer 1 · answered Mar 20 '22 at 20:54

I developed following code for category called "cats" based on list.html available in my theme:

{{ $var1 := "cats"}}
{{ range $key, $value := .Site.Taxonomies.categories }}
{{ if eq $key $var1  }}


{{ range $value.Pages }}
<section class="article-list">
  <div class="categories">
    {{ with .Params.categories }}
    {{ range first 1 . }}
      <a href="{{ relURL (print "/categories/" . | urlize) }}">{{ . }}</a>
    {{ end }}
    {{ else }}
      <a>{{ default "Uncategorized" .Site.Params.text.uncategorized }}</a>
    {{ end }}
  </div>

  <h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>

  <div class="summary">
      <a href="{{ .RelPermalink }}">
      {{ with .Resources.GetMatch (printf "%s" .Params.thumbnail) }}
      <div class="thumbnail"><img src="{{ relURL .Permalink }}" alt="Thumbnail" /></div>
      {{ else }}
      {{ with  .Params.thumbnail }}
      <div class="thumbnail"><img src="{{ relURL .}}" alt="Thumbnail" /></div>
      {{ else }}
      {{ $img := findRE "<img src=\"[^\"]+\"" .Content 1 }}
      {{ range $img }}
      <div class="thumbnail">{{ (print . " alt=\"Thumbnail\" />") | safeHTML }}</div>
      {{ end }}
      {{ end }}
      {{ end }}
      {{ with .Description }}
        {{ $.Scratch.Set "summary" (markdownify .) }}
      {{ else }}
        {{ $.Scratch.Set "summary" ((delimit (findRE "(<p.*?>(.|\n)*?</p>\\s*)+" .Content) "[&hellip;] ") | plainify | truncate (default 200 .Site.Params.summary_length) (default " &hellip;" .Site.Params.text.truncated ) | replaceRE "&amp;" "&" | safeHTML) }}
      {{ end }}
      {{ $.Scratch.Get "summary" }}
      </a>
  </div>
</section>
{{ end }}

{{ end }}
{{ end }}

If it is in list.html, it shows only posts in this particular category. Or it can be put in a separate partial template cats.html

Rendering posts from a particular category in Hugo

1 Answers1