Support for Taxonomies out of the box

[lfenzo]

Are there any plans to support taxonomies in the near future? By "supporting taxonomies" I mean having theme dedicated pages for "tags" and "categories" in the style of Hextra, instead of defining them ourselves with custom html and templates.

A very interesting example of these two pages I'm talking about is in the Elegant theme, a theme for the Pelican SSG framework. At the moment, the only thing holding me back from porting my personal page to Hextra is the lack of this functionality out of the box.

BTW, thanks for the work in Hextra, such a great theme!

[mafendi]

Hi!

Check this out, if this works well for you, I can share a code...

https://leipapa.com/categories/
https://leipapa.com/tags

[chemlord]

This is great! Also one other thing, how did you manage to do your footer and the blog posts?

Blog:

Footer:

[mafendi]

For the blog cards, add the partial to the hextra-home.html in themes/hextra/layouts
{{ partial "custom/blog-cards.html" . }}

After that, create the partial file in themes/hextra/layouts/partials/custom with the following content:

{{ $posts := where .Site.RegularPages "Type" "blog" | first 6 }}
{{ $blogLatest := (T "blogLatest") }}

<div class="mt-16 mb-16">
    <h2 class="mb-4 text-4xl font-bold leading-tight tracking-tighter md:text-5xl bg-clip-text">{{ $blogLatest | markdownify }}</h2>
    <div class="hextra-cards mt-4 gap-4 grid not-prose" style="--rows: 3;">
        {{ range $posts }}
        {{ $postTitle := .Title }}
        <a
        class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border dark:border-neutral-700 border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200" 
        href="{{ .RelPermalink }}" title="{{ $postTitle }}"
        >
            {{ with .Params.featuredImage }}
                <img
                alt="{{ $postTitle }}"
                title="{{ $postTitle }}"
                loading="lazy"
                decoding="async"
                src="{{ . }}"
                />
            {{- end -}}
            
            <h3><span class="flex font-semibold items-start gap-2 pt-4 px-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
            {{ .Title }}</h3>
            </span>
            <div class="line-clamp-1 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mt-2">
                {{ .Date.Format "January 2, 2006" }}, 
                {{ with .Params.categories }}
                    {{ range . }}
                        <span>{{ . }}</span>
                    {{ end }}
                {{ end }}
            </div>
            <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- .Description | markdownify -}}</div>
        </a>
        {{ end }}
    </div>
</div>

[mafendi]

Please bear in mind, that I use Tailwind CSS instead of custom CSS with hx- prefix as presented in Hextra v.0.8.0

[mafendi]

For the footer menu, you have many ways of implementation...

I made it by adding footer menus to hugo.yaml file like this:

menu:
  footer1: 
    - identifier: linkRegister
      name: "Register an LEI"
      pageRef: "https://app.leipapa.com/create"
      weight: 20
    - identifier: linkRenew
      name: "Renew an LEI"
      pageRef: "https://app.leipapa.com/renew"
      weight: 30
    - identifier: linkTransfer
      name: "Transfer an LEI"
      pageRef: "https://app.leipapa.com/transfer"
      weight: 40
  footer2: 
    ....
  footer3: 
    ....
  footer4: 
    ....
... and so on

Add partial to the footer.html:

  <div
    class="{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
  >
    {{- partial "footer-menu.html" . -}}
  </div>

After that, add footer-menu.html to the partials folder

{{- $footer1 := (T "footer1") -}}
{{- $footer2 := (T "footer2") -}}
{{- $footer3 := (T "footer3") -}}

<div class="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full not-prose">
    <!-- *** Col1 *** -->
    <div class="flex w-full flex-col items-start">

      <!-- *** Footer1 *** -->
      <h2 class="font-semibold">{{ $footer1 | markdownify }}</h2>
      <div class="mt-6 text-sm">
        {{ with .Site.Menus.footer1 }}
          <ul>
            {{ range . }}
              {{ if .Params.type | eq "separator" }}
                <li class="mb-4 separator">{{ .Name }}</li>
              {{ else }}
                {{- $link := .PageRef -}}
                {{- $external := strings.HasPrefix $link "http" -}}
                <li class="mb-4"><a href="{{ .PageRef | absURL }}" {{ if $external }}target="_blank" rel="noreferer"{{ end }} title="{{ .Name }}"><h3>{{ .Name }}</h3></a></li>
              {{ end }}
            {{ end }}
          </ul>
        {{ end }}
      </div>
      
    </div>

    <!-- *** Col 2 *** -->
    <div class="flex w-full flex-col items-start">

      <!-- *** Footer2 *** -->
...

    </div>

    <!-- *** Col 3 *** -->
    <div class="flex w-full flex-col items-start">

      <!-- *** Footer3 *** -->
      ...

    </div>

  </div>

[chemlord]

So I tried to input this in, I didn't get it to look exactly like how you have it on your site. For the footer specifically, either nothing is showing up or the three dots are showing. Can you provide your .css files?

[mafendi]

Here are the layouts for categories and tags.
layouts.zip

[lfenzo]

Thanks @mafendi!

[StefanKoell]

Just to let you know: I was able to successfully implement tags to my blog using this information. Thanks for all the help!

[mafendi]

Great! 👍

[toddmichael]

@mafendi thrilled to find this discussion as tags are the only thing missing from this otherwise excellent theme for me. Unfortunately, not able to get working.

I placed your layouts.zip contents in my root layouts dir like so:

layouts
├── categories
│   └── list.html
└── tags
    └── list.html

but my /tags page looks like this:

FWIW, I use Hextra like this:

module:
  imports:
    - path: github.com/imfing/hextra
      disable: false

Did I miss a step to get the actual tags to show up? Appreciate any help 🙇

[mafendi]

Hi!

Sorry for the late response.
Lots of things to do and it takes all my time.

Did you specify tags in the frontmatter of your posts?

[toddmichael]

@mafendi never a need to apologize. I probably should have been more specific in my initial post. I have indeed included requisite frontmatter. For example:

tags: ["DevSecOps"]

which does yield a page, but not a very useful one.

[mafendi]

Please, bear in mind my custom styles and vocabulary...
Also, I haven't updated to the official v 0.8.0+ ... I am waiting when all styles will be converted to Tailwind ones:) without hx- prefix.

In the post's frontmatter:

tags: [DevSecOps, tag2, tag3, tag4, tag5]

In the hugo.yaml:

params:
  blog:
    list:
      displayTags: true

Content of: themes/hextra/layouts/tags/list.html

{{ define "main" }}
  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ partial "toc.html" . }}
    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
                <!-- Breadcrumbs on the tags page -->
                {{ partial "breadcrumb.html" . }}
        <div class="content">
          <h1>{{ .Title }}</h1>
          {{ if eq .Kind "taxonomy" }}
            {{ $allTags := (T "allTags") }}
            {{ $taggedWith := (T "taggedWith") }}
            <!-- Tags Index Listing -->
            <h2>{{ $allTags }}</h2>
            <ul style="list-style: none; margin-left: 0;">
              {{- range $.Site.Taxonomies.tags.Alphabetical -}}
                <li>
                  <a href="{{ .Page.RelPermalink }}" title="{{ $taggedWith }} {{ .Page.Title }}">{{ .Page.Title }}</a>  <sup>{{ .Count }}</sup>
                </li>
              {{ end }}
            </ul>
          {{ else if eq .Kind "term" }}
            <!-- Tags Posts Listing -->
            {{ $tagName := .Title }} <!-- Assuming you're in the context of a specific tag -->
            {{ $tagPosts := where .Site.RegularPages "Params.tags" "intersect" (slice $tagName) }}
            {{ $noPosts := (T "noPosts") }}

            {{ if gt (len $tagPosts) 0 }}
              <h2>Posts tagged with "{{ $tagName }}"</h2>
              <ul style="list-style: none; margin-left: 0;">
                {{ range $tagPosts.ByDate.Reverse }}
                  <li style="display: flex; align-items: baseline;">
                    <span style="flex: 0 0 120px;">{{ .Date.Format "Jan 02, 2006" }}</span>
                    <a style="text-decoration: none;" href="{{ .RelPermalink }}" title="{{ .Title }}">{{ .Title }}</a>
                  </li>
                {{ end }}
              </ul>
            {{ else }}
              <p>{{ $noPosts }}</p>
            {{ end }}
          {{ end }}
          {{ .Content }}
        </div>
        <div class="mt-16"></div>
        {{ partial "components/last-updated.html" . }}
        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
{{ end }}

Content of themes/hextra/layouts/categories/list.html:

{{ define "main" }}
  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ partial "toc.html" . }}
    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
                <!-- Breadcrumbs -->
                {{ partial "breadcrumb.html" . }}
        <div class="content">
          <h1>{{ .Title }}</h1>
          {{ if eq .Kind "taxonomy" }}
            <!-- Categories Index Listing -->
            {{ $allCats := (T "allCats" ) }}
            {{ $postsInCat := (T "postsInCat") }}
            <h2>{{ $allCats }}</h2>
            <ul style="list-style: none; margin-left: 0;">
              {{- range $.Site.Taxonomies.categories.Alphabetical -}}
                <li>
                  <a href="{{ .Page.RelPermalink }}" title="{{ $postsInCat }} {{ .Page.Title }}">{{ .Page.Title }}</a>  <sup>{{ .Count }}</sup>
                </li>
              {{ end }}
            </ul>
          {{ else if eq .Kind "term" }}
            <!-- Categories Listing -->
            {{ $catName := .Title }} <!-- Assuming you're in the context of a specific category -->
            {{ $catPosts := where .Site.RegularPages "Params.categories" "intersect" (slice $catName) }}
            {{ $noPosts := (T "noPosts") }}
            {{ $postsInCat := (T "postsInCat") }}

            {{ if gt (len $catPosts) 0 }}
              <h2>{{ $postsInCat }} "{{ $catName }}"</h2>
              <ul style="list-style: none; margin-left: 0;">
                {{ range $catPosts.ByDate.Reverse }}
                  <li style="display: flex; align-items: baseline;">
                    <span style="flex: 0 0 120px;">{{ .Date.Format "Jan 02, 2006" }}</span>
                    <a style="text-decoration: none;" href="{{ .RelPermalink }}" title="{{ .Title }}">{{ .Title }}</a>
                  </li>
                {{ end }}
              </ul>              
            {{ else }}
              <p>{{ $noPosts }}</p>
            {{ end }}
          {{ end }}
          {{ .Content }}
        </div>
        <div class="mt-16"></div>
        {{ partial "components/last-updated.html" . }}
        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
{{ end }}

Content ofthemes/hextra/layouts/blog/list.html:

{{ define "main" }}
  {{- $readMore := (T "readMore") | default "Read more →" -}}
  <div class="mx-auto flex {{ partial `utils/page-width` . }}">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
        <br class="mt-1.5 text-sm" />
        <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
        <div class="content">{{ .Content }}</div>
        {{ range .Pages.ByDate.Reverse }}
          <div class="mb-10">
            <h3><a style="color: inherit; text-decoration: none;" class="block font-semibold mt-8 text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>

            <!-- ATTENTION HERE start -->
            {{- if site.Params.blog.list.displays -}}
              {{ with .Params.tags }}
              <p class="opacity-50 text-sm leading-7 mt-4">
                {{- range . }}<a href="/tags/{{ . | urlize }}" class="mr-2 not-prose inline-flex items-center rounded-full gap-2 my-1 px-3 text-xs bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
                >#{{ . }}</a>{{ end -}}
              </p>
              {{ end -}}
            {{- end -}}
            <!-- ATTENTION HERE end -->

            <p class="opacity-80 mt-4 leading-7">{{- partial "utils/page-description" . -}}</p>
            <p class="opacity-80 mt-1 leading-7">
              <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">
                {{- $readMore -}}
              </a>
            </p>
            <!-- Tags and Categories start -->
            <p class="flex items-center text-sm mt-4 leading-7">
              <span class="opacity-50">{{ partial "utils/format-date" .Date }}</span>
              {{ with .Params.authors }}
              <span class="mx-2 opacity-50">|</span>
              <span>
                {{- range . }}
                  <a href="/authors/{{ .name | urlize }}" class="flex items-center underline mr-2">
                    <img src="{{ .image }}" alt="{{ .name }}" title="{{ .name }}" class="rounded-full block mr-2" style="width: 20px; height: 20px;">
                    <span class="opacity-50">{{ .name }}</span>
                  </a>
                {{ end -}}
              </span>
              {{ end -}}
            </p>
            {{ $publishedInCategory := (T "publishedInCategory") }}
            {{ with .Params.categories }}
            <p class="opacity-50 text-sm leading-7">
              {{ $publishedInCategory }} {{- range . }}
                <a href="/categories/{{ . | urlize }}" class="underline inline-block mr-2">{{ . }}</a>
              {{ end -}}
            </p>
            {{ end -}}
            <!-- Tags and Categories end -->
          </div>
        {{ end }}
      </main>
    </article>
    <div class="max-xl:hidden h-0 w-64 shrink-0"></div>
  </div>
{{ end }}

[sekthor]

I am using the hextra theme with a number of custom taxonomies and was also missing out-of-the-box support for them.
My solution was, to add a layouts/_default/taxonomy.html template.

I based it off of the default list page and added the following snippet:

{{ .Content }}
<ul>
  {{ range .Pages }}
   <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
  {{ end }}
</ul>

In my opinion, this is a simple and clean solution, if you have multiple taxonomies and do not need a different layout for each indiviual taxonomy.
I am fine with just a simple <ul> with <li> elements.

[toddmichael]

Appreciate the tip. Unfortunately doesn't work for me. Appears everything in my layouts directory is ignored. Maybe it's something to do with use of module import method.

If it's working for others, I'll just chalk it up to PIBKAC and get over it. I like the theme more than I miss this functionality so... 🤷 Cheers 🍺