Using Hugos Related Content feature

Developers
1

I’m looking at implementing a “Related Posts” feature in the Cards Theme.

I see that Hugo has a “Related Content” feature, but I think it relies on keywords, tags, or other metadata provided in the markdown YAML. I don’t know if Micro.blog uses these.

My understanding is that Micro.blog uses Categories, which may be different than Tags. Therefore, the Related Content feature in Hugo, would not be useful.

I am able to get the “Related” posts based on the category, but it is not very smart. It is only showing the top X posts in the same category as the current post.

Any other suggestions? Has anyone else experimented with this feature?

{{- range first 1 (where (where .Site.Pages ".Params.categories" "intersect" .Params.categories) "Permalink"
"!=" .Permalink) -}}
{{- $.Scratch.Set "has_related" true -}}
{{- end -}}

{{ if $.Scratch.Get "has_related" }}
<div class="related-content">
    <strong>Related:</strong>
    {{- $num_to_show := .Site.Params.relatedPostLimit | default 3 -}}
    {{ range first $num_to_show (where (where .Site.Pages ".Params.categories" "intersect"
    .Params.categories) "Permalink" "!=" .Permalink) }}

    {{ $postDateTimeSys := .Date.Format "2006-01-02T15:04:00Z" }}
{{ $postDateTime := .Date.Format "January 2, 2006" }}
    <p class="related-post">
        <a href="{{ .Permalink }}" class="u-url">
            <time class="dt-published" datetime="{{ $postDateTimeSys }}">{{ $postDateTime }}</time>
        </a>:
        <span class="p-name"><b>{{ .Title }}</b></span>
        <span class="p-summary">{{ .Summary | truncate 100 }}</span>
    </p>
    {{ end }}
</div>
{{ end }}
1 Like
2

I haven’t used this feature, but you are correct that Micro.blog does not support taxonomies other than categories. It looks like related content can use some other metadata like dates or even header titles based on the links, but that seems pretty low value to me.

1 Like
3

I opened a PR against “Tiny Theme” that adds a “Related” section to the posts on my blog: Add a “Related” block to posts by kstrauser · Pull Request #11 · MattSLangford/Tiny-Theme-for-Micro.blog · GitHub

It uses categories to find related content.

4

I’m not seeing anything TinyTheme specific-- I think it would be helpful to the community if this is, instead, a plug in that provides a new partial someone can drop anywhere they’d like in their own theme.

5

The part that differs between themes is how to include the code in a page. For instance, with Tiny Theme you can either edit the layouts/post/single.html file to include the partial (which is what I’d done in that PR), or create a layouts/partials/microhook-after-comments.html (and hope no other plugin wants to use that same hook). There’s not a consistent way across the various themes to tell the page template, “hey, put my new block here”.

I did turn this into a separate plugin, at kirk/mb-tiny-related-content: Tiny Theme add-on: Add links to related posts at the bottom of each post - Kirk's Gitea server . It should be super easy to port it to any other arbitrary theme, but it would need to be tailored for each theme.

6

Sure-- but my point was just “hey, now this partial exists, add it where you want” as a plug-in seems valuable versus “this is now a feature that exists only in TinyTheme”. The latter is portable and can be put into the Micro.blog plug in directory for anyone else interested in using this feature-- it would be more valuable if your partial did not name itself for the microhook in Tiny and instead was a related-content partial that can be dropped in that (or another) microhook/template.

7

I get what you’re saying and that makes sense. My thinking at the moment is that if I turned this into a generically-named partial, or maybe a shortcode, then I’d still have to make my own custom theme to add it to the page template. If I have the chops to do that in the first place, I’d have the skills to copy this plugin’s code into that custom template anyway.

I’m totally willing to be shown that I’m wrong! I’m a n00b to the Micro.blog ecosystem; I’ve had an account for years but only really started using it heavily in the last week or so. There’s not way that’s obvious to me to make this work easily for everyone without making it slightly harder to use for my original intended audience, namely, me, using Tiny Theme on my own blog.

I suppose I could rename it without Tiny’s naming convention, and then I’d still need to make a custom theme, but my theme could have a single partial: layouts/partials/microhook-after-comments.html like

{{ partial "related-content.html" . }}

Is that close to what you had in mind?

1 Like
8

Thanks. I’ll look at this when I have time and see about incorporating the plugin support into the Cards Theme.

9

I went ahead and made that change. If you install the plugin and are using Tiny Theme, it Just Works. If you’re using another theme, you can use include the renamed “related-content.html” partial wherever you’d like it.

10

Have you registered/delivered it to the Micro.blog plugin directory? You may be interested in how @gregmorris did it for his partial search plugin. You can either add it to a template or via a shortcode in a page. The latter may not apply to yours tho.

Update: Never mind. I see it listed there although 7 times!

11

I have so submitted it! :grinning:

Speaking of which, @manton, could you delete the dupes please? I was tired and didn’t read the part where Micro.plug would poll for updates, and that I didn’t need to manually update it. I’m a little surprised it could accept dupes – I imagined the URL to be a primary or unique key. Oh, on the subject of that plugin submission web form, that doesn’t have to be a GitHub URL. I’m hosting this plugin on my own Forgejo server.

12

I’m late to seeing this, but very cool.

1 Like
13

Sorry for the delay, I’ve archived the duplicate plug-ins in the directory. I didn’t delete them completely yet in case someone was using an older version, but I can clean that out later.

That’s great it worked with Forgejo too!

14

Thanks, and sorry about the mess!

15

Do you have a demo site to show how it looks?

16

I don’t have a separate demo site, but here’s a representative page on my main site: Apple: "What's a professional?"

I didn’t add any CSS for the h2 or ul it adds. Figuring out the right way for that would probably be my next update. (That is, should I also add class="related-content to the list of links? Remove it from the h2 tag and wrap the whole thing in another <div class="related-content"> tag? I dunno; TBD.)

2 Likes
17

Thanks for making this!

18

Happy to help, but I just bundled up some stuff that the Hugo team had published here and there. They did all the hard work!