First and Last in category

I feel this should be easy but I’m unable to figure it out.

I have a website displaying comics, and I want a FIRST and LAST button to display the first and last page of that comic.

Instead what I have now displays the first and last pages published of every comic. This is the code I have now:


    {{ range first 1 site.RegularPages }}
    <a href="{{ .Permalink }}" id="article-nav-newer" class="article-nav-link-wrap">
        <strong class="article-nav-caption">
            << first
        </strong>
    </a>
    {{ end }}

This is the closest topic I’ve found [SOLVED] Get the first and last post in a section (date-based)

However it yields the same results, and I’m not smart enough to adapt it from the general category of “comics” to “the particular comic the page is in”.

The pagination concept has a first and last item. This will be confusing, because you can call the pagination only once per page and then it will be fixed to it’s context, but once you understood how it works you will be able to use it for this feature.

The questions for this to work are:

  • where is one single comic (it should be a section or subsection)
  • how do you configure weight to denote first and last items

okay I’m getting confused now.

First, the only time I’ve touched pagination is in the config file, where I defined it as 1 because I only want one comic page displayed on the home page.

From the docs:

This feature is currently only supported on homepage and list pages

I’m trying to apply this concept to single pages, not the home page or list pages. Is there something I’m misunderstanding?

where is one single comic (it should be a section or subsection)

Each comic is under a separate category bearing the name of the comic.

how do you configure weight to denote first and last items

I haven’t done this manually, will look into it.

I’m surprised there is the concept of .PrevInSection but not the equivalent .FirstInSection.

I would do it this way:

content/comic-1/
content/comic-1/page1.md
content/comic-1/page2.md
...
content/comic-1/_index.md

This would lead to _index.md being a collection of ALL pages. Then, if you set pagination to 1, it will display one of the page1, page2, page… inside of that section. In that case first/last would work.

An other system would be that you create a custom taxonomy that will add for instance a comic1 to all pages of comic-1. then you would do a “range where taxonomy is comic-1” and within that selection you too have a command called first and last. And “index pagenumber” to select a certain page.

Your problem can be solved, but you probably will have to put a sample comic somewhere in a repo online so people can play around with your issue and find the best way.

This is the structure I have:

content/comics/comic-1/page1.md
content/comics/comic-1/page2.md
content/comics/comic-1/page3.md
content/comics/comic-1/_index.md

And in each page I have categories: comic-1.

To me this looks like the second alternative you mention? If that’s the case could you lay out the actual code for “range where taxonomy is comic-1”? cause that’s what I feel I’m having trouble with.

the problem with your frontmatter is (probably, not 100% sure) that the way you define it it’s not a “slice” but a “string”.

categories = comic-1

is not

categories = [comic-1]

https://learnxinyminutes.com/docs/toml/
https://learnxinyminutes.com/docs/yaml/

The best way to make sure a range .categories is working is this (in TOML):

categories = ["first category", "second category"]

This way you go sure a range will work. even if you have only one category item in there.

Interesting, this is news to me.

So in practice, I changed categories = comic-1 to categories = [comic-1], and then in the code displayed above:

   {{ range first 1 .categories }}

And this is the error I get:
at <.categories>: can't evaluate field categories in type *hugolib.pageState

With this content:

content/
├── comics/
│   ├── comic-1/
│   │   ├── _index.md
│   │   ├── page1.md
│   │   ├── page2.md
│   │   └── page3.md
│   └── comic-2/
│       ├── _index.md
│       ├── page1.md
│       ├── page2.md
│       └── page3.md
└── _index.md

You can use this in layouts/comics/single.html

{{ if and (gt .CurrentSection.Pages.Len 1) (ne .CurrentSection .FirstSection) }}
  {{ $firstInSection := index (first 1 .CurrentSection.Pages.ByTitle) 0 }}
  {{ $lastInSection := index (last 1 .CurrentSection.Pages.ByTitle) 0 }}
  <a href="{{ $firstInSection.RelPermalink }}">First</a>
  {{ with .PrevInSection }}
    <a href="{{ .RelPermalink }}">Prev</a>
  {{ end }}
  {{ with .NextInSection }}
    <a href="{{ .RelPermalink }}">Next</a>
  {{ end }}
  <a href="{{ $lastInSection.RelPermalink }}">Last</a>
{{ end }}

The conditional makes sure that (a) there’s more than one page in a section, and (b) the comic is a not a single page beneath the content directory (e.g., contents/comics/comic-3.md).

Try it:

git clone --single-branch -b hugo-forum-topic-37474 https://github.com/jmooring/hugo-testing hugo-forum-topic-37474
cd hugo-forum-topic-37474
hugo server

I see no reason to use the taxonomy system, but maybe I’m missing something.

Refence:

2 Likes

Thanks for the detailed response.

I see no reason to use the taxonomy system, but maybe I’m missing something.

It’s likely my ignorance, I’ve copied a theme and then adapted it for comics, and from my cursory knowledge of Hugo, categories seemed like the intuitive way to organize them.

Your code from the project works, but when I apply it to my existing theme the if condition seems to fail, even tho there’s at least 3 pages in each comic.

If I get rid of the conditional for testing purposes, then I run into the same problem of first and last jumping across comics.

Did you clone and test the example I provided?

Yup, like I said the example works. It seems that the conditional that fails is (ne .CurrentSection .FirstSection).

I’m comparing directory structures, my first_last.html is under layouts/partials/ while your example is in layouts/comics/. I don’t know if this is relevant.

Looking at the theme isn’t terribly helpful. Please provide a link to your project.

I figured, the full project has sensitive and NSFW data so when I have time I’ll clean it up to share an example.

I made small progress, I moved my own content into the example project and figured out that in order for the conditionals to work I had to remove the “type: posts” taxonomy.

However, the opposite case, moving the example content into my own project, does not yield the same results, the prev and last buttons don’t get shown.

That would be good. Until then, we’re just guessing.

Solved it: I had to remove the categories taxonomy from config.toml entirely.

Clearly my understanding of “sections” vs “taxonomies” is lacking.

The way I ended up figuring it out was applying my theme to the example you provided, and tweaking and guessing there. You’ve been very helpful, thank you!

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.