search

ppoffice / hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.
https://ppoffice.github.io/hexo-theme-icarus/
MIT License
6.28k stars 1.54k forks source link

Add foldable css class for codeblocks #1071

Closed ppwwyyxx closed 2 years ago

ppwwyyxx commented 2 years ago

This allows users to customize the styles of foldable blocks.

2022-05-07_15-26

ppoffice commented 2 years ago

@ppwwyyxx What can a user gain from adding the unfolded class? Can't the current folded class fulfill custom styling of folded and unfolded code blocks?

ppwwyyxx commented 2 years ago

The existing behavior: (1). For posts with config.article.fold = "", the class is neither "folded", nor "unfolded". (2). For posts with config.article.fold != "", the class is "folded" when the code is folded. (3). For posts with config.article.fold != "", the class is neither "folded" nor "unfolded", when the code is unfolded.

This means users cannot distinguish (1): code that cannot be folded and (3): code that is unfolded but can be folded in their CSS. I'd like to distinguish the two in my CSS.

After this change, (3) will have the class "unfolded" so users can distinguish (1) and (3).

https://github.com/ppoffice/hexo-theme-icarus/pull/1072 shows an example use case where users can benefit from this feature.

ppoffice commented 2 years ago

@ppwwyyxx How about adding a classname foldable to all code blocks if config.article.fold != ""? All folded blocks will have .foldable .folded in its classname and unfolded blocks will only have .foldable? Also, in this way you have one less classname to style.

ppwwyyxx commented 2 years ago

Thanks for the suggestion I think foldable is a better idea. Updated the PR.