Special Content Pages

Hosting on Micro.blog
1

I’d like to create special collection pages that do the following.

  1. Let me create a custom section of content at the top. (think: intro, description, maybe some links or disclaimers)
  2. Automated collection of posts with a certain tag. Preferably with options for me on how to display (alphabetical, chronoligical, reverse-chronological, etc.)

Is this something that’s pretty easy to do, maybe with some light Hugo magic?

1 Like
2

Yes, this is doable with Hugo a bunch of different ways.

You can see how I do a few versions of this at

All of which do this.

My favorite way to do this is to make a custom layout like:

layouts/thepagename/list.html

Then I put my template there, filtering to the right category or term and organizing it how I want.

Then I make a page that’s empty in:

content/myurlforpage.md

That only has the front matter:

---
title: pagename
type: thepagename
---

That will then make a page at /thepagename.

For example, this makes /letters:

{{define "main" }}
<div class="content list h-feed">
{{$pages := where .Site.Pages "Type" "post" }}
{{$letters := where $pages "Params.categories" "intersect" (slice "letters") }}
  {{ range ($letters.GroupByDate "2006-01").Reverse }}
    {{ $themonth := (time (printf "%s-%s" .Key "01")) }}
    <h1> 
      {{ if lt $themonth.Year "2023" }}
        About Letters
      {{ else }}
        {{ $themonth.Format "2006 - January" }}
      {{ end }}
    </h1>
    {{ range .Pages.Reverse }}
      {{ partial "li.html" . }}
    {{ end }}
    <hr>
 {{ end }}
</div>
{{ end }}

And this is /books:

{{ define "main" }}

{{ $books := $.Site.Data.bookshelves.currentlyreading }}
<div class="singlearea">
 <h1 class="bookshelf-name">Currently Reading</h1>
</div>
<div class="bookshelf">
    {{- range $books }}
      <a href="https://bookshop.org/a/{{ $.Site.Params.bookshop_affiliate_id }}/{{ .isbn }}">
<figure>
   <img 
      class="bookshelf-book-cover"
      src="{{ .cover_url }}"
      alt="{{ .title }} by {{ .author }}"/>
    <figcaption> {{ .title }} by {{ .author }}</figcaption>
</figure>
      </a>
    {{ end }}
</div>

{{- range $shelf, $bookshelf :=  $.Site.Data.bookshelves  }}

{{ if ne $shelf "currentlyreading" }}
<div class="singlearea">
  <h1 class="bookshelf-name">Read in {{ $shelf | replaceRE ".*(20[0-9]{2})$" "$1" }}</h1>
</div>
<div class="bookshelf">
    {{- range $bookshelf }}
  <a href="https://bookshop.org/a/{{ $.Site.Params.bookshop_affiliate_id }}/{{ .isbn }}">
<figure>
  <img 
      class="bookshelf-book-cover"
      src="{{ .cover_url }}"
      alt="{{ .title }} by {{ .author }}"/>
    <figcaption> {{ .title }} by {{ .author }}</figcaption>
</figure></a>
{{ end }}
</div>
{{ end }}
{{ end }}
{{ end }}
2 Likes
3

Oh nice, this is something I was going to figure out. Thanks!

cc: @Miraz might be good for @custom; looks like an expanded version of Jason’s advice to which you linked last year.

1 Like
4

Thanks for drawing my attention to this. Appreciate the tip. :grinning:

5

I’m struggling to get this to work fully, and Im not sure if I am doing something wrong.

Currently I have a customer template at layouts/podcast/list.html and also content/podcast.md which contains the following

---
title: Title
type: podcast
---

However when I go to the page it seems to pull though the title but not the custom layout.

I believe that micro.blog is viewing this as a page rather than list and so using the _default/single template. @jsonbecker

6

That is correct-- content/podcast.md is not a list page, but a single. You need the template to be layouts/podcast/single.html.

7

How would I make this a list page like your example above?

8

You can use range even though it’s a “single” to get all pages. “Single” doesn’t mean it can only access a single page. The example above uses a single template.

9

Ok thanks.

I miss understood because your example says list.html. I think I get it now

10

I should update that because it’s wrong :slight_smile: .