以下是几张截图:
- 默认分类与精选主题
顺便提一下,这里的 Logo 确实有点大,导致大量空间浪费——我倾向于将它们的高度调整为 75 像素。 - 默认区块与子分类
请注意,其中几个子分类已设置了 Logo 图像并正常显示。
布局非常浪费空间:分类 Logo 被限制为 40 像素,但居中显示在标题上方。子分类的 Logo 没有正确保持宽高比(–aspect-image 计算未生效,而且如果直接设置高度,只要空间足够,宽高比自然会保持,因此这些计算其实并无必要)。
此外,子分类的 Logo 也稍显过大,导致行间距被拉大。 - 我的修改步骤一
Logo 浮动在标题左侧,标题则在剩余空间中居中显示。
子分类每行显示一个,带有彩色条纹和锁定图标,但子分类的 Logo 未显示(这与默认行为一致)。
在区块中,如果空间允许,试图将两个简短的子分类标题挤在一行似乎并不合理;我认为每行单独显示一个标题效果更好,不过也有人可能更喜欢在子分类较多时将其压缩显示。 - 我的最终修改:
子分类 Logo 以 18 像素高度显示,并在标题末尾保持正确的宽高比。这是可选的,也可以将 Logo 放置在锁定图标与文本之间,但我更倾向于让条纹和标题对齐。
此外,在其他默认布局中启用子分类 Logo 也是合理的,但我尚未对此进行尝试。
此处我还使用了 Category Icons 组件(仅在 Niki Test 子分类上设置了图标),因此条纹的位置略有偏移,以使图标与条纹对齐;同时图标颜色与条纹颜色一致,从而在视觉上替代了条纹——但这些是对该组件的修改,而非核心代码的改动。 - 最后,这是当子分类区块显示在父分类主题上方时的渲染效果(如果启用了该设置)。
显然,目前尚无子子分类需要展示,但未来需要对此进行适配。另外,当标题特别长时,或许将 Logo 垂直浮动会更合适;不过更好的做法可能是保持分类标题简短!
综上所述,这需要结合 HTML 和 text/x-handlebars 代码(在主题的 /head 中),实际上替换了 “components/categories-boxes” 组件,并配合 SCSS 样式。我很乐意将代码发送给任何有能力测试并将其提交到 GitHub 的开发者。
这套方案在我的网站上运行良好,但可能还存在一些我尚未察觉的其他影响。




