感谢 @erlend_sh 的敏锐发现！我之前还没看到这个话题。是的，去年我们确实花了一些时间专门研究这个问题，试图实现类似 Flarum 风格的标题栏。以下是我们网站上的效果：我们的网站：
以下是我们为此设计的 HTML / CSS 核心代码：
CSS：
（以下内容全部放在“common”中——除此之外，针对桌面端和移动端还有一些细微的边距/内边距调整，此处未列出。）
/* 通用 */
body {
overflow-x: hidden;
}
.custom-cat-header {
display: block;
margin-left: -9999px!important;
padding-left: 9999px!important;
margin-right: -9999px!important;
padding-right: 9999px!important;
text-align: center;
margin-top: -18px;
}
.custom-cat-header p {
color: #dddddd;
}
.custom-cat-header h1 {
display: inline-block;
margin-top: 20px;
color: #dddddd;
background-color: #222222;
border-radius: 5px;
width: inherit;
}
/* 所有分类 */
.custom-cat-header-all-categories {display: none;}
body.navigation-categories .custom-cat-header-all-categories, body.navigation-topics .custom-cat-header-all-categories {
display: block;
background-color: #b1880b;
}
.custom-cat-header-all-categories h1 {color: #d4a411;}
/* 演奏技巧 */
.custom-cat-header-playing-technique {display: none;}
body.category-playing-technique .custom-cat-header-playing-technique {
display: block;
background-color: #9c2116;
}
.custom-cat-header-playing-technique h1 {color: #d62e1f;}
body.category-playing-technique .custom-cat-header-all-categories {display: none;}
/* 为所有其他分类重复此操作！*/
HTML（放在“标题后”部分）：
<!-- 所有分类 -->
<div class="custom-cat-header custom-cat-header-all-categories">
<a href="https://forum.troygrady.com/"><h1>所有分类</h1></a>
<p>欢迎来到 Cracking the Code 论坛！</p>
</div>
<!-- 演奏技巧 -->
<div class="custom-cat-header custom-cat-header-playing-technique">
<a href="https://forum.troygrady.com/c/playing-technique"><h1>演奏技巧</h1></a>
<p>关于拨片角度、分块、按弦、动作机制等技术问题，请在此提问。</p>
</div>
<!-- 为所有其他分类重复此操作！-->
这在视觉上已经相当精致了……但也非常定制化/ hacky，需要大量重复的手动编辑。对于我们大约十几个分类来说还算容易处理，但如果想要更高的灵活性，我觉得将其做成一个简单的插件会很有趣，该插件可以：
- 自动获取并插入分类描述
- 自动处理颜色计算（我们的颜色与分类颜色相似，但我们手动将标题背景色调暗了一些，并将 h1“胶囊”文本颜色调亮了一些，以获得更好的对比度/可读性）。
我没有制作插件的经验。不过目前看来，将 @lll 和我构思的内容结合成一个主题组件，似乎是不错的下一步！