Taxo Buttons

tips & tricks
1

Hello all,

I went into an overhauling mood for displaying tags and categories on my site last night :slight_smile:

The new buttons for tags and categories blend better into my site (https://scripter.co).

  • Hovering over those shows the number of posts with the same tags/categories.
  • Tag buttons are in the light grey background, category buttons are in the dark grey background.
  • Clicking on a button will show posts only with that taxo. But on that page, that particular taxo button is colored in my site’s theme color (maroon/reddish)! This one needed a nasty hack as the buttons are created in a Render view, and the view does not know the Term of the current taxonomy Kind page (e.g. /tags/foo/)… and you cannot pass variables to the .Render.
  • Re-used the same taxo buttons on post singles.
  • Custom hover text for those buttons (title attr) based on if there only 1 post with that tag/category, or more, whether it’s a tag or a category.
  • Switched from list of tags/categories in terms.html to a series of buttons with their sizes proportional to the number of posts (tag cloud). Example: https://scripter.co/categories/. The size variation is not quite there as I yet need to organize categories and tags better… You’ll find that I never set a tags taxonomy in my older posts.
  • Reused the same taxo buttons on list pages too. Example: https://scripter.co/posts/.
  • You won’t find /tags or /categories hard-coded in any of my templates.
  • And no Javascript involved anywhere! :slight_smile:

Click through the taxo buttons on my site to see what I mean.

And here are the relevant bits:

  1. The taxo-buttons partial.
  2. Re-use of that partial in single, summary, li.
  3. The ugly hack in taxonomy for .Render limitation that I mentioned earlier. The taxo-buttons partial implements the complementary part of that hack.
  4. The taxo “cloud”: terms, and the related CSS.
3 Likes
2

@kaushalmodi would like to learn from your talent works, thanks. I am working on a side-project of my own so that I could learn and understand the Hugo in deep. Now I met a difficulty when filtering tags or categories. https://discourse.gohugo.io/t/need-help-how-to-get-list-page-when-click-on-a-tag-shared-by-different-sections/11858.

What’s your content structure for your site? Are the posts and notes the different sections?

3

Yes. But I am not displaying the tags and categories filtered per section as you want in that referenced thread.