如何将分类框移到顶部

受到 Meta 新设计的启发,我尝试实现类似 Meta 品牌主题中子类别框的显示效果。

我最终得到了这个结果:


我可以确认标签下拉菜单实际上是对齐的 :sweat_smile:

我该怎么做才能实现这个效果? 通过 CSS 或 JavaScript 可行吗?我可以部署自己的主题组件,并想了解相关方法。

顶部导航栏需要靠近主题(topics),而不是子类别(subcategories),所以对我来说,这个改动关乎用户体验,而不仅仅是细微的视觉布局调整。

可能不是用 CSS 就能实现的,但具体还要看你最初是如何实现这个首页的。你在重新设计首页时,有没有使用某个特定的组件?

这不是主页,而是分类页面。我还在学习中,目前还没学会如何生成一个合适的主页。这是我待办事项之一 :slight_smile:

也许用 JavaScript 可以实现。看到主题组件能做的事情之多,我真的感到很惊讶。虽然没有技术背景,但我猜这里可能存在某种可能性。

Meta 主页是构建在 custom_homepage 主题修改器 + 新的 Blocks API 之上的,因此这是重现它的推荐方式。

如果仅使用 CSS,如果你能在父级包装器上应用网格(grid)或弹性布局(flex),也许可以重新排序,但这只是外观上的改变,而且很可能会变得一团糟。

再次感谢!重新上手之后,我觉得问题并不在于新的主页设计,而在于核心行为,而这一点我理解是可以被广泛重新审视的。

子分类显示在导航栏上方看起来好多了。对某些人来说,这可能纯粹是外观上的问题,但我发现子分类的方块会干扰日常的 UX 体验。

对此大家有什么看法吗?我的 CSS 技巧无法解决这个问题,而且我也明白用这种方式是行不通的。