Hugo

Filter content by tags, sections, etc using JS

Hello!

I am sharing a bit of javascript that I wrote. It allows filtering content across different criteria simultaneously, for example tags, content types, authors etc.

This was originally written to filter hugo themes using multiple tags, which I posted about here:
https://discourse.gohugo.io/t/filterable-hugo-themes/
but I have spun this off into its own repo to be reusable inside hugo projects.

Demo and documentation are available here:
https://pointy.netlify.com/filter/

and source here (also includes example site):

Please let me know what you think, any suggestions or feedback would be appreciated!

7 Likes

Hi @pointyfar, thank you for making this!

I am trying to use it on my site, and notice a minor bug.

This is expected and current behaviour:

  • Click Tag A, posts with Tag A are shown
  • Click Tag B, posts with Tag A and Tag B are shown
  • Click Tag A again, posts with Tag B are shown only
  • Click Tag B again, all posts are shown

But when the order for the second click is different from the first, the behaviour is different from what I would expect, eg:

  • Click Tag A, posts with Tag A are shown
  • Click Tag B, posts with Tag A and Tag B are shown
    - Click Tag B again, posts with Tag B are shown only
    - Click Tag A again, posts with Tag B and Tag A are shown

I’m having a go at fixing it but have not made any progress. I think it must be something in the showCheck function, but I haven’t managed to figure it out. Would be grateful if it was easy for you to point me in the right direction and I can have a go fixing it.

Thanks!

1 Like

Hi @pointyfar! I think I have fixed the bug by replacing line 162 in hugotagsfilter.js from:

this.FILTERS[i][‘selected’].splice(tag,1);

to:

this.FILTERS[i][‘selected’].splice(this.FILTERS[i][‘selected’].indexOf(tag),1);

I’ll make a pull request on the repo.

Hey, thanks for letting me know, I’ll have a look.

1 Like

Hi @pointyfar, haven’t made the pull request above yet, but have found another bug:

  • When I click Tag A, posts with Tag A are shown.
  • And then when I click Author B, zero posts are shown instead of expected behaviour where posts with Tag A and Author B are shown.

I’ll have a go and see why this is happening.

Edit: ignore this comment, brain fart, the behaviour I expected didn’t make sense.

When I click Tag A, posts with Tag A are shown.
And then when I click Author B, posts which satisfy Tag A AND Author B are shown, and if there are no posts meeting that criteria, zero posts are correctly shown.