How can I read in chronological order?

I hear you and think you’re totally right; if you just want to blog and get no joy from learning about template languages, you shouldn’t bother with it.

If you decide to stick with Micro.blog anyway, I’ll help you get through Miraz’s tutorials and change the post sort order on the archive page. :blush:

That’s very kind of you, @sod.

I didn’t want my archive page to change, though. What I really want is a page with a date filter, with the posts in chronological order, but I suppose that’s either a dynamic blog engine thing, or a Javascript generated listing. The first would mean changing back to WP. The second seems brittle and slow, as it would entail code that requires a lot of maintenance and testing on browsers, apps and OSes I don’t own, as well as slow down a fast loading static page with client-side JavaScript.

My current—inelegant—solution (year pages in chronological order, as separate MD documents) still seems best, since only the current year needs maintenance. It could be coded in template language, I’m sure, but why bother, if it takes little to no effort to modify a static year page?

What really bothers me, though, is that posts aren’t linked together (previous post, next post). This is a major failing of all blogs I’ve seen so far on MB. It seems a basic functionality that should be included from day one.

Regarded me not wanting to learn templating language. It seems to me, that templates need testing, and the best device to test on is still a computer with a windowing OS, like a laptop, since it has a variable viewport size, by changing the window of the webbrowser.

I’ve looked into buying such a computer, a MacBook Air specifically. I got sticker shock right away. I suppose my days as a developer have been ended before they even started. I don’t have the disposable income to maintain and replace (after 5 years of support by the manufacturer) such a device.

Windows is no alternative, unless you don’t mind your bank account to be emptied by malware or through the negligence of incompetent software developers (especially of printer drivers). A device like an iPad (€ 400) is within my budget, replaced every three years. Chromebooks are cheaper (€ 300), but seem to last shorter and seem less luxurious, compared to even the most basic iPad (non Air, non Pro). It also would require me to learn a new OS.

It’s definitely doable in Hugo or any other static blog engine. But of course, you have to know how templates work or find someone who knows. Or, in some cases, there are plugins that solve the problem for you.

No client-side JavaScript or WordPress is needed. :blush: But those are viable solutions as well, as are creating the page manually, as you do now.

I guess no one in the Micro.blog community wanted it badly enough just yet? :blush: Again, if you know your way around templating in Hugo, it’s doable. A basic version looks like this:

<nav>
  {{ if .PrevInSection }}
  <a href="{{ .PrevInSection.Permalink }}" rel="prev">Previous post</a>
  {{ end }}

  {{ if .NextInSection }}
  <a href="{{ .NextInSection.Permalink }}" rel="next">Next post</a>
  {{ end }}
</nav>

If those lines are copy-pasted into the template layouts/post/single.html you will get previous and next links. Templates are a little fuzzy about where you can put stuff, but you’re relatively free to place the above lines where you see fit in the layout. A good starting point would be to paste them right below the line that looks like this <footer class= "post-footer"> (assuming you’ve based your custom template on Arabica). It will end up looking like this:

I agree that that’s the optimal environment, but I know folks use iPads for web development both personally and professionally. A DuckDuckGo search (or Google if that’s your thing) for web development on ipad yields blog posts describing different setups. But it sure has a bit of driving off the road feeling to it. Maybe not the best tool to start one’s web development adventure on. But, sometimes, the best tool is the one you have available and can afford.

Great, I’ll try that out as soon as the MB is back up. Right now I get a 503, Service not available.

No, didn’t get it to work. The <foot class= "post-footer"> isn’t in my version of Arabica. I added it (including the closing tag), and it still didn’t work.

As I wrote earlier, finicky and easy-to-get-wrong.

Maybe you just experience the delay as Hugo rebuilds the blog? After saving your changes, some time will have to pass before you can see the result online. From a handful of seconds up to maybe a minute or so, depending on the server workload.

If that’s not the cause, we will get it right together. :blush: Would you mind sharing:

  • a screenshot where I can see your custom template
  • the link to your blog

I can’t. Server is down again.

Well, I ain’t in a hurry. So feel free the share when the server is up again, and you’ve got the time.

Ah, wrong single.html. Now it seems to work.

So, success then? Hurray! :tada:

It’s a small victory code-wise, a huge improvement for blog readers (I hope).

I implemented it on my Dutch language blog Loopgenot, with :point_left: and :point_right: added to the Dutch text, so non-Dutch readers can understand it too.

Also, the favicon now works too. No idea why it didn’t before, which troubles me. I know enough to get myself into trouble, but not enough to get out of it.

So I guess, you suckered me into learning more about templating, @sod :laughing:

That was my evil plan all along; you’re welcome. :wink: I do hope you get some utility and fun out of this new knowledge, though.

There seems to be a bug in the code for “previous/next.” After editing older posts, they got shoved elsewhere in the order. This means from that post, no earlier posts can be accessed, while those certainly exist.

I need date order, not the order in which they are stored in the database. Is there a way to accomplish this?

Okay, I’ll try my best to help you troubleshoot the problem. I need a post with a missing Eerder :point_left: link and the URL to the post you would expect to be there.

Here you go:

I suspect the post is shoved onto the back of the date base, or the ordering is based on modification date, instead of publication date. In either case, me updating old articles will change things. So there’s that to consider.

The proper ordering for 2010 is on this page:

For the year before, 2009:

I hope that’s enough for you. Thanks in advance!

So what we see here is the effect of .PrevInSection and .NextInSection. Let’s see what Hugo’s official documentation has to say about .PrevInSection:

Points down to the previous regular page below the same top level section (e.g. /blog). Pages are sorted by Hugo’s default sort. Example: {{if .PrevInSection}}{{.PrevInSection.Permalink}}{{end}}. Calling .PrevInSection from the last page returns nil.

Okay, I admit, that’s a bit of a mouthful. :blush: In your case, and I guess for everyone hosted on Micro.blog, the top-level section is the year the post was published. So in my basic example posted above, the next and previous links will always be scoped to the year.

When you arrive at the first post of a year, you won’t be able to go further back. In the same way, there won’t be a next post link when you arrive at the last post of a year.

To fix this, you could use .Next and .Prev instead. But that may have other unwanted side effects. Feel free to try it out, though. Just change every instance of .PrevInSection to .Prev and .NextInSection to .Next.

Another solution would be to order posts into a common top-level section (like /blog). I don’t know enough to tell you if that’s possible on a hosted Micro.blog, though. Maybe @manton can chime in here?

A third solution is to build upon my basic version to support navigation between sections (years).


I tried it, but—as you suspected—the result is unpredictable. The links seem to lead anywhere but the next or previous post. Sometimes it’s even a page instead of a post.

So, reverting to the old coding for now.

All my posts are in the category called “dagboek”; could this be used?

Also, see this Stackoverflow question:

Is using with somehow of influence?

Maybe, if you could collect posts in that category under a single section. Again, I don’t know if that is doable on a Micro.blog-hosted Hugo site. Let’s keep our fingers crossed @manton jumps into this thread to answer that. :blush:

No, unfortunately not. It’s just another way to write the same template, its output should be identical to my version. To quote the documentation for with:

An alternative way of writing an if statement and then referencing the same value is to use with instead. with rebinds the context (. ) within its scope and skips the block if the variable is absent, unset or empty.

This may be closer to what you want, @renevanbelzen.

{{ $diaryPages := .Site.Taxonomies.categories.dagboek.Pages.Reverse }}
{{ $currentPage := .Site.GetPage (.File.Path) }}
<nav>
  {{ with $diaryPages.Prev $currentPage }}
    <a href="{{ .Permalink }}" rel="prev">Eerder 👈</a>
  {{ end }}

  {{ with $diaryPages.Next $currentPage }}
    <a href="{{ .Permalink }}" rel="next">👉 Later</a>
  {{ end }}
</nav>

Replace my old version with the above and let me know how it works out.