Archive page issues on Kiko theme

dandycat · January 25, 2022, 10:45pm

For a few weeks now, I’ve been having two issues with my Archive page:

The categories listed at the top direct to a full listing of all my posts, essentially my website’s home page. This is despite the URL displaying as I would expect, e.g., hovering on “Podcasts” shows “https://www.dandy.cat/categories/podcasts/”.
The categories at the top of the page are not alphabetized. It appears to be a random sorting that doesn’t reflect the order on my Categories page on Micro.blog (which is itself unordered, but that’s another topic).

For my theme, I’m using Kiko, which I’ve set as a custom theme as opposed to using it as a plug-in. I’ve set the Hugo version to 0.91 (this behavior also happened on 0.54).

I’ve added some custom CSS, but I don’t know how that would cause this issue.

My best guess is something is wonky with the custom template Archive page (layouts/list.archivehtml.html), but I would appreciate guidance on what it actually may be and how to fix it. As unlikely as it seems, I believe this started happening on its own, or at least, I didn’t do anything to alter any of my custom template pages when this started happening.

Here is what’s present on the Archive template page:

{{ define "main" }}

    <h1 class="page-title">Archive</h1>
    <h2>Categories</h2>

	{{ $list := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
	{{ if gt (len $list) 0 }}
		<div class="archive_categories" style="border-bottom: 1px solid lightgray; padding-bottom: 15px; margin-bottom: 30px;">
			{{ range $list }}
				<p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
			{{ end }}
		</div>
	{{ end }}
	
	{{ $list := (where .Site.Pages "Type" "post") }}
	{{ range $list }}

    <h2>Posts</h2>

		<p class="h-entry">
			<a href="{{ .Permalink }}" class="u-url"><span class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05-0700" }}">{{ .Date.Format "2006-01-02" }}</span></a>:
			<span class="p-name"><b>{{ .Title }}</b></span> 
			<span class="p-summary">{{ .Summary | truncate 100 }}</span>
		</p>

	{{ end }}

{{ end }}

If anything else is needed from me to help diagnose this issue, please let me know. Thanks!

sod · January 25, 2022, 11:36pm

Hey, thanks for taking the time to put together an excellent problem description.

I think the problem might be elsewhere for this one. Have you altered any other template? Maybe layouts/_default/list.html?
This one is a quick fix; just change the first occurrence of {{ range $list }} to {{ range sort $list "Title" "asc" }}.

dandycat · January 26, 2022, 12:37am

You’re welcome! And thank you for replying and working to help out.

First, the fix for sorting the categories was indeed quick and easy, as you said. Awesome!

I have altered some of the other templates, including layouts/_default/list.html. Here is what’s shown on that one:

{{ define "main" }}
<div class="content list h-feed">

{{ $paginator := .Paginate (where .Site.Pages.ByDate.Reverse "Type" "post") (index .Site.Params "archive-paginate" | default 25) }}
{{ range $paginator.Pages  }}

  <div class="list-item h-entry">
	{{ if .Title }}
		<a href="{{ .Permalink }}"><h1 class="home-title">{{ .Title }}</h1></a>
	{{ end }}
    <div class="content post e-content">
      {{ .Content }}
    </div>
    <div class="list-post-date">
      <a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time>  →</a>
    </div>
  </div>

{{ end }}

</div>

{{ partial "pagination.html" . }}

{{ end }}

What I’ve done is add an <a> tag around the <h1> tag for the title and inserted a right-facing arrow after the <time> tag for the post date.

I’ve also altered the head, header, and footer partials. I can provide those if needed, of course.

sod · January 26, 2022, 6:57am

Thanks! So, there are multiple ways to fetch pages. .Data.Pages contains pages specific to the current page, and .Pages is just an alternative name to that variable. On the other hand, .Site.Pages contains every page on the entire site.

In this case, you’re interested in only the pages under the current list page (current category). Changing from .Site.Pages.ByDate.Reverse to .Pages.ByDate.Reverse should solve your issue.

dandycat · January 26, 2022, 5:02pm

This is enlightening information and I can see how it would work with forming a site theme.

Removing .Site and ending up with .Pages.ByDate.Reverse does indeed leave me with an Archive page that works properly, which is great!

Unfortunately, it also leaves me with a home page lacking in a feed of posts. Now it’s just a blank page with a header and footer which isn’t the desired behavior. This result doesn’t make a whole lot of sense to me.

I’ve appreciated all of the great help so far, @sod. It feels like this one is close to being solved.

sod · January 26, 2022, 5:21pm

Ah, sorry, my bad. I didn’t realize the homepage used the default listing template. There are multiple ways to solve this, but the least amount of work is probably by tweaking the same line of code one more time and adding an additional line above it, like this:

{{ $pages := cond .IsHome .Site.Pages .Pages }}
{{ $paginator := .Paginate (where $pages.ByDate.Reverse "Type" "post") (index .Site.Params "archive-paginate" | default 25) }}

dandycat · January 26, 2022, 5:46pm

That was brilliant and completely solved the issue!

Thank you, @sod. You’ve been a real life saver. I appreciate your help more than a simple bit of text can express.

dandycat · February 4, 2022, 7:27pm

Sorry to keep carrying on about my Archive page woes, @sod. This is teaching me that I need to learn more about Hugo and how Micro.blog works.

Seemingly out of the blue, my Archive page has stopped displaying anything at all. I’ve not made a single change to anything with my theme since the last time you helped me out. Heck, the only thing I’ve done besides make new posts is turn off cross-posting to Twitter.

I notice that @pimoore has also recently been having issues with the Archive page in his Hitchens theme. Forgive the leap if they’re not related.

Any help you could give will, as always, be much appreciated. I’m on Hugo version 0.91. Here is the text for the Archive template for reference:

{{ define "main" }}

    <h1 class="page-title">Archive</h1>
    <h2>Categories</h2>

	{{ $list := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
	{{ if gt (len $list) 0 }}
		<div class="archive_categories" style="border-bottom: 2px solid #efe9ff; padding-bottom: 15px; margin-bottom: 30px;">
			{{ range sort $list "Title" "asc" }}
				<p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
			{{ end }}
		</div>
	{{ end }}

    <h2>Posts</h2>
	
	{{ $list := (where .Site.Pages "Type" "post") }}
	{{ range $list }}

		<p class="h-entry">
			<a href="{{ .Permalink }}" class="u-url"><span class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05-0700" }}">{{ .Date.Format "2006-01-02" }}</span></a>:
			<span class="p-name"><b>{{ .Title }}</b></span> 
			<span class="p-summary">{{ .Summary | truncate 100 }}</span>
		</p>

	{{ end }}

{{ end }}

pratik · February 4, 2022, 9:27pm

This is a MB-wide issue. It affected my custom theme (designed by Amit) too.

dandycat · February 4, 2022, 10:18pm

On the one hand, I’m sorry to hear that. I wish @manton luck in solving this problem. I hope that there will be a follow-up from him about the issue and what can be done to solve it (if there’s anything that needs to be done on our end).

On the other hand, I’m glad to know that my theme isn’t just self-destructing.

Thank you for the explanation!

manton · February 5, 2022, 12:56am

@dandycat I’ve fixed your site. There are basically 2 things going on:

I changed Archive and Photos to be normal pages a few days ago instead of special “output formats” of the home page. To do this, I had to move the archive template location into the “layouts/_default” folder. If a theme wasn’t using the correct template, this is why.
Some blogs seem to have an Archive page that wasn’t properly marked as an archive page internally in Micro.blog. Probably it was deleted and recreated at some point? If your archive page wasn’t showing any posts, this is why.

This shouldn’t have effected very many sites. I’m in the process of rolling out a fix for the template change so that Micro.blog copies it to the new location for you. If anyone is having the problem of no posts appearing, please email me.

dandycat · February 5, 2022, 2:46am

The Archive page is back up, as you said, and working perfectly.

Thank you very much for your hard work and detailed explanation, @manton. I understand what was happening much better now. I do recall deleting the Archive page at some point in the past, but I can’t recall why. Seems like that was probably the main issue.

I wish you continued good luck with your work!