search

willfaught / paige

Powerful, pliable pixel perfection. An advanced Hugo theme.
https://willfaught.com/paige
MIT License
232 stars 50 forks source link

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

Open saurabh-sm opened 1 month ago

saurabh-sm commented 1 month ago

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 commented 2 weeks ago

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.

saurabh-sm commented 2 weeks ago

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 commented 2 weeks ago

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; }
"""
saurabh-sm commented 2 weeks ago

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.

saurabh-sm commented 2 weeks ago

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.