Custom taxonomy under section?

Hi!
I just started with Hugo and just ran into a little issue I can’t seem to fix.

I created a folder called blog in the content folder. I also created a custom taxonomy called destinations and all works as should, but I how can I have the custom taxonomy sit under blog and not in the root?

What I have
http://localhost:1313/destination/japan/

What I want
http://localhost:1313/blog/destination/japan/

I tried to change the config.toml to this:

[taxonomies]
  destination = "destination"

[permalinks]
  destinations = "blog/:slug/"

Also changed the path in the range tag but just get a 404.

{{ range .Params.destination }}
    <a href="{{ "/blog/destination/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
{{ end }}

But still can’t get it to work… I know it’s a silly little thing but I hope someone can point me in the right direction.

Thanks again

Displaying a taxonomy list under a section is not a trivial task in Hugo.

A while ago I posted this technique (haven’t tried it with taxonomies) but it should give you a start.

3 Likes

Thanks for posting that @alexandros, still reading the HUGO docs, but would this not be better for a complex section of nested pages and not with taxonomy? I was using HexoJS prior to using HUGO and in HexoJS to change the URL of tag or category you would just need to change it in the config.yaml file, so thought you could do it in the same way with HUGO.

As far as I know you cannot do this in Hugo with what you posted above.

[taxonomies]
 destination = "destination"

[permalinks]
 destinations = "blog/:slug/"

The permalinks configuration in the config refers to single content pages not nodes (list pages) such as taxonomies.

In any case your best bet is GetPage

1 Like

oh I see, was not aware of that. I did find this link: How to customise categories and tags URLs in Hugo which is a good way of achieving what I want, but then the downside is it removes pagination which is something I also need.

Maybe being able to “nest” a custom taxonomy or taxonomies in HUGO would be a nice feature for the future. Thanks again for the help!

Hang on a minute. I just tested this locally and I am able to get what you want.

But the configuration needs to be like this (not what you posted above):

[taxonomies]
 destination = "destination"

[permalinks]
 destinations = "/blog/destination/:slug/"

And in the front matter of your content pages you need to have:

destination = "japan"

With the above your taxonomy will be available under:
/blog/destination/japan/

Nested under your /blog/ section.

@bep Is this known behavior? Is it future proofed?

I never tried this before and it seems like a viable way to display taxonomies under sections.

PS. @Noodles I haven’t checked whether this works with pagination.

Strange, I can’t get it to work… I get an error this error when I add the destination to the front matter:
Error while rendering "page" in "blog/": template: _default/single.html:14:18: executing "main" at <.Params.destination>: range can't iterate over japan

Error goes away when I add: destination: ["Japan"]. After restating the server, I still get a 404 when I go to http://localhost:1313/blog/destination/japan/ but http://localhost:1313/destination/japan/ still works…

Please post a link to your repository. Or if you cannot share add some dummy content.

I will look into this later as I have to go now.

Still just playing around locally, but here is a link to a sample repository:
https://github.com/testareas/hugo-test-taxonomies thanks a lot for the help!

Yes and yes.

You obviously need to take care about duplicates, in which one of them will win, but I guess that is a general problem (we have an open issue about tracking that and create some warning:

2 Likes

Cool! This is a brilliant feature.

I’ll send a PR in the Docs. No need for the hacks that are floating around.

You have a few issues with your setup.

I’ll point them all out to help you since you’re very new with Hugo, but please do study the Docs.

First of all in your config you have:

  [taxonomies]
   destination = "destination"

  [permalinks]
   destination**s** = "/blog/destination/:slug/"

Remove the erroneous s to configure your taxonomy’s permalinks.

Then in your template under /_default/single.html

The following is what throws the console error:

  {{ range .Params.destination }}
    <a href="{{ "/destination/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
  {{ end }}

You don’t need to use range because there is nothing to go through.
Instead you need to use with. Pay attention to with it’s one of the tersest functions that Hugo has and you will be using it very often since it’s what we use to check if something exists in a template.

Also you need to change the link construct you have above because with what you have you will get a link that points to /blog/destination/ and that is not what you want -I think-.

So change it to <a href="/blog/destination{{ . | urlize | relLangURL }}">{{ . }}</a>

Note the dot after "/blog/destination/" that will render the word Japan. Also note how I’ve piped both urlize and relLangURL. You can pipe several functions at once in Hugo.

So to put it all together your code block needs to become:

  {{ with .Params.destination }}
    <a href="/blog/destination{{ . | urlize | relLangURL }}">{{ . }}</a>
  {{ end }}

One last thing. In the front matter of your posts include the following only once (you have it twice in one of your posts)
destination: "Japan"

Note that I have removed the angle brackets. These are meant for an array and I don’t think that you need an array here since each content will have one destination.

Do the above and you will get what you want also pagination works.

And if you feel like it leave a comment to the web page you linked to above and let the author know that there is a native way to configure Taxonomy Permalinks in Hugo without breaking pagination.

3 Likes

@alexandros first of all, thank you so much for taking the time to look at my code and for pointing out where I went wrong, I see now what gave me that error… I just started with Hugo last week so still reading the docs. I added another custom taxonomy as a test and it didn’t break the pagination so now I can add as many custom taxonomies under my page section as I want.

Thank you once again! Hugo rocks!

@alexandros just noticed one small thing, when I run the hugo command, I get destination folder in the root of public and in /blog, is there away of getting rid of that? I guess not since taxonomies are called from the root of public?

The Docs are a bit problematic with custom taxonomy URLs I will try to fix that and submit a PR for review one of these days.

Now regarding the empty page /destination/ under the root you can turn it off by using disableKinds = [ “taxonomyTerm” ]

The other empty list page under /blog/destination/ may show up when Hugo server is running but once the site is deployed it will throw a 404. So don’t worry about it.

I went the extra mile to deploy your repo as a test, to see what happens with the empty pages.

I would also like to thank you because I had somehow missed this feature in Hugo and using taxonomies nestled under Sections will make my life easier in a couple of projects I maintain.

Oh I added: disableKinds = ["destination", "party"] to my config.toml but still see the folders in the root when I run hugo

From Googling around a few people wanted to have nested taxonomies and having the ability to have other terms than category or tag as default. Also from a SEO point of view it works better to nest taxonomy rather than having it in the root. So really happy it can help you out also, I am a taxonomy addict and love to categorize all of my content.

You need to enter disableKinds = [“taxonomyTerm”] It’s global configuration and the folder under /destination/ will not be created.

Doh! I see what I did there, and now it works! Thanks again for all the help @alexandros :smile: