HUGO

HTML links for Tags and Categories

I am trying to have the tags and categories with “.html” links when I generate pages with the Icarus theme using Hugo, because I am using Cloudfront on Amazon S3, and it does not resolve for folders and sub-folders. I was able to fix the categories and tags links in the headers with uglyurls = true in config.toml, but not those generated elsewhere.

For example I now have this:
http:/mysite.com/categories/canada
http://mysite.com/tags/parks

But I would like to have this:
http:/mysite.com/categories/canada.html
http://mysite.com/tags/parks.html

Any ideas?

The main problem I face with this issue is the correct generation of the urls. Currently, I use the following scheme:

{{ range $name, $items := .Site.Taxonomies.tags }}
    <a href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower  }}">{{ $name }}</a>
{{ end }}

As far as I know there is no built-in template function that could uglify a given url or string that would link to the correct tag pages.

Alternatively, I could generate the uglified scheme manually by checking the configuration:

{{ if .Site.Params.uglifyURLs }}
// generate link uglyfied
{{ else }}
// use current scheme
{{ end }}

But I don’t have access to the uglifyURLs setting and can’t decide which scheme should be generated. Hopefully someone else has a good idea :smile:

2 Likes

For offline documentation purposes, I need to have URLs that are both relative and ugly (end in .html).

My current hack is:

In config.toml, define:

relativeURLs = "true"
uglyURLs = "true"
[params]
    # set to "" if uglyURLs = "false"
    # set to ".html" if uglyURLs = "true"
    ugly = ".html"

Then, where I need a list of categories:

{{ if isset .Params "categories" }}
  {{ range .Params.categories }}
    <a href="{{ delimit (slice "/categories/" (urlize .) $.Site.Params.ugly) "" | relURL }}">Category: {{ . }}</a>
  {{ end }}
{{ end }}

Which is:

  • slice : make a slice containing three strings
  • delimit : join those strings together using the string "" (the empty string)
  • | relURL : make the whole mess relative.

I wouldn’t really call this elegant.

What’s the type of the elements in .Params.categories ? It would be neat if it supported a .URL property:

<!-- Note: This doesn't work. -->
{{ if isset .Params "categories" }}
  {{ range .Params.categories }}
    <a href="{{ .URL }}">Category: {{ . }}</a>
  {{ end }}
{{ end }}