How can I read in chronological order?

Getting started
18

Maybe, but I would argue that the opposite is true. :blush: Modifying something – instead of building from scratch – can be a viable path to acquire a new skill. For example, instead of designing and building a house as a first project, one can learn the ropes on an existing home. Paint a ceiling, install laminate flooring, build an interior wall, tear another one down, and so on.

As I touched on earlier, we all prefer learning in different ways. The already linked resources may be balanced wrong according to your current skills and previous experiences. As I don’t know you or how you learn, it’s a bit of a challenge to recommend resources.

I’m sure of one thing: no human being is born with the skill of building Hugo Templates. :blush: I’m also pretty sure you can do this!

But you can also ask yourself: is this something I need to or want to learn? What’s the goal? Is it to learn something new and have fun doing it? Or is it to have a page listing your blog posts in chronological order?

If it’s the latter: you could just have someone else do it for you.

All that said, I would love to figure out what’s going on. Send over a link to the blog in question, and I will take a look.

19

The question rather is, is there a platform that better suits my needs? I’m not married to the idea of using micro∙blog as my sole blogging platform.

I’m a blogger, not a front end web developer. I have little interest in becoming one, since it’s rather an investment.

For starters, from a brief overview on W3Schools, I gathered one needs a computer with a windowing OS, like a Mac laptop. It just doesn’t cut it with an iPhone:

image
image750×1294 114 KB

That’s contrary to my wish to reduce my dependency on digital equipment as much as possible, and why I opt for a managed blogging solution rather than rolling my own.

20

In short, I’m stuck with the tools provided. My crummy solution with reordering the /archive page offline and splitting the result up in years is about what I’m able to do, it seems.

Modifying a template is just too finicky and easy to get wrong. Writing a plug-in seems well beyond my capabilities and skill level. So both of those aren’t options for me.

Thanks to anyone who tried to help me.

21

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:

22

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.

23

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:

Screenshot of a blog post with previous and next links.
Screenshot of a blog post with previous and next links.1125×532 25.8 KB

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.

24

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.

25

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
26

I can’t. Server is down again.

27

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

29

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

30

So, success then? Hurray! :tada:

31

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.

32

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:

33

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.

34

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?

35

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.

36

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!

37

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).

38

image
image750×1286 123 KB

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.