Feature Request: Improve differentiation between categories and tags in list layout

[allocgator]

Take this page for instance, where "Show Data" and "Style Data" are listed.

The page "Show Data" has categories "customization", "paige" and tags "show", "singles" (from this source) and page "Style Data" has categories "customization", "paige" and tags "singles", "style" (from this source).

When these pages are listed under customizations, it's unclear what the categories and tags are respectively.

In cases where this list is big (30+ pages), identifying them is tougher.

Requesting a feature to differentiate between tags and categories.

Eg. If keywords are color-coded differently for categories and tags, page identification in list layout would be a lot easier.

[willfaught]

Sorry for the delay in response. In v0.92.0, I added new paige-keyword-{category,tag} CSS classes that are applied to the corresponding keywords. You should be able to use these to change the coloration or styling as needed. Please try it out.

[zigmd]

Thanks for considering this request!

Can you let me know Which CSS file and property you're referring to? I'm assuming that the keyword_style would need to be text.

[willfaught]

It works for both keyword styles, either text or pills.

The HTML element for each keyword now has the CSS class paige-keyword-category or paige-keyword-tag applied to it in the class attribute. This means you can style them like this:

[params.paige]
style = """
.paige-keyword-category { color: red; }
.paige-keyword-tag { color: blue; }
"""

[zigmd]

I've added

[params.paige]
style = """
.paige-keyword-category { color: red; }
.paige-keyword-tag { color: blue; }
"""

to hugo.toml, but dont see changes in either layout.

[zigmd]

I think in one of the previous releases (maybe 0.90), you had introduced configured Paige related parameters in the hugo.toml. I have [params.paige], [params.paige.list_page], and [params.paige.page] in hugo.toml.

The front matter of individual files has no Paige specific configuration - they have Hugo specific configuration like title, description, date, authors, tags, categories, and weight.