🔥 吐槽我的主题组件:高级主题卡片

大家好

免责声明:在构建此主题组件的过程中,没有 AI 受到伤害 :smiley:

是的,伙计们,我承认我厚颜无耻地“氛围编码”了一个抄袭自 Topic Cards 主题组件的东西。因此,要向原创作者和贡献者们的出色工作致以崇高的敬意!

虽然最初这是一个分支,但超过 80% 的代码和结构都经过了彻底重写。我们添加了大量新功能,乍一看,各种设置可能会让人不知所措。

高级主题卡片 - 预览发布

通过我们的重写,您将获得:

  • 对主题卡片显示位置更精细的控制
  • 两种不同的主题卡片布局
  • 在“最新”页面顶部的精选卡片轮播 (Carousel)

有关详细信息的完整列表,请向下滚动 :down_arrow:

欢迎随时测试、运行、复制并在本帖中对其进行“吐槽”!我非常期待收到关于结果的反馈:

已知问题:

  • 重复的 TC(主题卡片)设置:一些关于缩略图和卡片高度的功能已不再是必需的/没有价值了
  • 桌面视图缺少通过触摸板/鼠标滚轮的水平滚动(Embla 提供了相关插件,但我们还没有实现)
  • 操作按钮不够“精致”,需要更好的视觉重做

改进和功能总结:

  • 按类别、按设备布局
    您可以分别为桌面和移动设备配置卡片为列表(图片在左,内容在右)或网格(图片在上,内容在下)。您可以精确选择哪些类别在每个平台上使用哪种布局。

  • 示例网格布局:https://forum.cannabisanbauen.net/c/samenverzeichnis/230

  • 示例卡片布局:https://forum.cannabisanbauen.net/c/growreports/11

  • 子类别布局继承
    可以选择从父类别继承卡片布局,这样您就不必手动配置每个子类别了。

  • 主页精选主题轮播 (Embla)
    一个您可以放置在发现路径(主页/最新/热门/类别)上的精选主题轮播,由 Embla Carousel 提供支持,具有每视图幻灯片数、循环、对齐、拖动行为等的设置。

  • 示例:forum.cannabisanbauen.net(主页)

  • 类别页面上的子类别轮播
    将类别页面上的子类别列表转换为水平轮播,并设置在显示前所需的父类别和子类别的数量的控件。

  • 示例:https://forum.cannabisanbauen.net/c/growreports/11

  • 视觉定制选项

  • 缩略图占位符(当主题没有图片时显示 Font Awesome 图标)

  • 卡片边框半径预设

  • 卡片标题字体大小选择(使用 Discourse 的字体标记)

  • 可选的固定卡片/网格高度和缩略图大小控制

  • 更丰富的卡片组件
    新的卡片结构,包含:

  • 署名行(OP 头像 + 用户名 + 可选的发布日期)

  • 操作按钮(详情 + 精选链接 CTA)

  • 内联标签(类别徽章 + 标签位于卡片主体内部)

  • 与其他主题组件/插件兼容

  • 日历 + 活动插件:在标题后显示活动日期

  • 用户作品集主题组件:显示

  • 计划中的功能:

  • 对精选轮播进行更精细的控制:额外的插件插口、页面路由等

  • 展开/折叠精选主题卡片轮播(+ 根据新/未读主题自动展开)

1 个赞

非常感谢您的分享——这太棒了!