FKB Pro - 社交主题

您也可以在以下地址寻求帮助:

https://ask.discourse.com

如何让右侧边栏在所有地方都显示?不只在主页和分类页。

“添加主题”按钮不起作用

1 个赞

嗯……我在主题创建器中预览时运行正常。

如果你想专门针对“新建主题”按钮,可以尝试:

button#create-topic {
  // 在此处添加内容...
}

此更新后,此部分的 CSS 似乎出现了问题。

当同时满足以下条件时:

  • 收到私信
  • 带有标签
  • 查看时不显示侧边栏

宽度会变得非常小

原因:

.navigation-topics,
.categories-list,
body[class*="tag-"]:not(.archetype-regular):not(.archetype-banner),
body[class*="category-"]:not(.archetype-regular):not(.archetype-banner):not(.archetype-banner):not(.archetype-private_message) {

fkb-d-topic-list.scss 中被应用了,但本不应如此。

我怀疑需要添加 :not(.archetype-private_message)
不过,我想知道为什么它会如此具体地针对这些架构类型?它是否只是在判断当前是否在话题列表页面(而非话题详情页)?

2 个赞

我非常喜欢这个主题,但我遇到了一个 bug,或者是我自己弄坏了什么。

不知为何,主题上方似乎没有内边距,导致圆角看起来消失了,而且各个主题之间也没有明显的分隔。

看起来是新的现代基础实验性变更导致了这种行为。关闭该选项后,内边距似乎恢复正常。

标题:
[Bug] 主题在 Discourse 2026.4.0-latest 上崩溃 — 无法找到模块 'ember-this-fallback/js-component'

描述:

在将 Discourse 更新至 v2026.4.0-latest(提交 19374472fd)后,FKB Pro 主题导致前端致命崩溃,使论坛部分无法使用。Discourse 显示橙色横幅:

“由于主题/组件有错误,您的站点可能无法正常运行。由 ‘FKB Pro theme’ 引起。”

根本原因:

该主题(或其某个组件)仍引用了 ember-this-fallback/js-component 模块,该模块在近期版本中已从 Discourse 核心移除。此模块是用于兼容已弃用的 Ember this-property-fallback 模式的兼容性垫片,允许模板使用 {{foo}} 代替 {{this.foo}}。Discourse 已正式宣布移除该垫片,并要求所有主题和插件迁移到显式的 this. 绑定。


浏览器控制台错误信息:

Failed to load theme 4 from https://www.sitetalk.net/...
Error: Could not find module 'ember-this-fallback/js-component' imported from (require)

[THEME 4 'FKB Pro theme'] Error: Could not find module 'ember-this-fallback/js-component' imported from (require)
  at vendor.js
  at requireModule (vendor.js)
  at Object.lookup (chunk.js)
  ...
  at reportThemeError (chunk.js)

(控制台显示的 Discourse 版本:v2026.4.0-latest,Ember 版本:v6.10.1


环境信息:

项目
Discourse 版本 v2026.4.0-latest(提交 19374472fd)
Ember 版本 v6.10.1
主题 FKB Pro(从此仓库默认安装)
复现情况 升级 Discourse 后 100% 可复现

我们希望开发者能修复此问题。谢谢!!!

4 个赞

你好,在将Discourse更新至 v2026.4.0-latest — Ember v6.10.1 出现了错误,使论坛无法使用
client-error-handler.js:109 [THEME 28 ‘FKB Pro theme’] Error: Could not find module ember-this-fallback/this-fallback-helper imported from (require)
at loader.js:247:1
at a (loader.js:258:1)
at requireModule (loader.js:24:1)
at Object.lookup (app.js:36:12)
希望进行修复。

4 个赞

关于修复此问题有什么最新消息吗?

有任何关于修复这个问题的最新消息吗?

我有一份报告表明 GitHub - literatecomputing/fkb-pro-theme: FKB Pro is a highly modified, detailed, professional social theme, but still user-friendly. · GitHub 可以正常工作。我已经提交了一个拉取请求。

4 个赞

你好,Don,

首先,这个主题简直太惊艳了!我最近为我的本地教育社区 Jiwa.now 部署了 FKB Pro,基于卡片的用户界面看起来非常精美且极具专业感。

在移动端测试时,我注意到话题卡片上的可点击区域存在一个用户体验问题。目前,可点击区域的设置显得不一致。例如,用户可以点击卡片的边缘进入话题,但点击其他空白区域(如头像行右侧或页脚中间)则没有任何反应。

这种“碰运气”式的交互方式会让用户感到困惑,而且当用户只是想滑动或滚动浏览信息流时,往往会导致误触。

:light_bulb: 对未来更新的一点建议: 如果主题默认能对此进行优化,将会提升用户体验——即让核心内容(标题、图片和摘要)可点击进入话题,同时禁用卡片背景,以防止滑动时的误触。

在此期间,为了让我的用户在移动端的触控体验达到 100% 可靠,我编写了一段 CSS 代码,采用了 pointer-events 的“白名单”方法。它完全中和了背景点击,并专门重新启用了实际交互元素的点击功能。

我想把它分享在这里,供任何希望优化触控目标的用户参考,或许对开发者也有借鉴意义:

/* 修复移动端卡片点击/触控冲突(智能白名单方案) */

/* 1. 中和整个卡片背景,防止滑动误触 */
.topic-list-item {
    pointer-events: none !important;
}

/* 2. 重新启用所有原生链接和按钮(头像、标签、标题) */
.topic-list-item a,
.topic-list-item button {
    pointer-events: auto !important;
}

/* 3. 重新启用图片点击 */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. 重新启用整个页脚统计区域 */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
    pointer-events: auto !important;
}

/* 5. 消除任何重叠的拉伸链接伪元素 */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
    pointer-events: none !important;
    display: none !important;
}

谢谢!

Leo

2 个赞

@Don 你的主题太棒了,感谢分享这个精美的主题 :high_five: 。这只是想表达一下感谢,因为我觉得很有必要提一下,为了社区,你为此付出了无数个小时,真是令人敬佩!!

3 个赞

@gilles :waving_hand: 谢谢你的美言!:hugs:
我的个人资料里有一个小小的支持板块,如果你愿意支持我的工作,可以点这里:> ./support --coffee

1 个赞

FKB Pro v2 - 有什么新功能?

公告发得有点晚——v2 版本大约在两周前就已发布——不过没关系,迟到的总比没有的好。:slightly_smiling_face:

FKB Pro v2 在底层进行了相当大幅度的更新。虽然整体外观和感觉依然熟悉,但主题中的许多部分都经过了重新设计、优化和清理。

:desktop_computer: 改进的桌面布局

桌面端的主题列表现在采用了一种更灵活的布局,能更好地配合 Discourse 侧边栏和 FKB Pro 自己的面板使用。

该布局会根据可用空间的变化自动调整,并为较小屏幕和移动设备设置了专门的断点。

:triangular_ruler: 更好的响应式行为

我们在处理窄布局和溢出内容方面投入了大量工作。

现在可以更可靠地处理较长的主题标题、用户名、标签和其他内容,而不会让它们将布局推至超出可用宽度。

移动设备布局也经过调整,以基于实际容器宽度工作,而不是依赖视口(viewport)尺寸。

:high_voltage: 主题列表性能

主题列表也进行了一些性能优化。

在适当的情况下,浏览器现在可以跳过屏幕外的主题卡片,同时主题图片及其容器使用了更好的包含(containment)规则。

这在较长的主题列表中尤其有用。

:locked_with_key: 改进的 FKB 面板缓存

FKB 面板现在使用特定于用户的、带版本号的缓存键。

不再共享通用的缓存条目,用户数据是相对于当前的 Discourse 用户存储的,这防止了在同一个浏览器中切换用户时缓存信息在账户之间泄露。

缓存现在也能更可靠地处理过期和无效条目。

:high_voltage: 更快的面板加载

用户摘要和卡片数据现在并行请求,而不是等待一个请求完成后再开始下一个。

此外,还增加了额外的保护机制,防止在活跃用户更改后,过时的请求覆盖数据。

:control_knobs: 新的面板状态管理

FKB 面板的显示/隐藏状态已移至一个专门的状态服务中。

这使得行为更可预测,更易于维护,同时也改进了面板切换本身,包括:

  • 正确的 aria-expanded 状态

  • 描述性标签

  • 动态图标

  • 持久的显示/隐藏状态

:wheelchair_symbol: 无障碍性改进

多个交互元素获得了更好的无障碍性支持,特别是围绕 FKB 面板控件的部分。

面板切换现在能正确地向辅助技术暴露其状态,并提供更有用的标签和标题。

:mobile_phone: 移动端改进

各种移动端布局得到了清理和增强,更加健壮,包括主题列表、分类、私信、用户页面、群组和主题。

目标是让 FKB Pro 在 Discourse 的响应式布局中表现得更自然,而不是与之对抗。

:puzzle_piece: 更模块化的代码

更新的很大一部分内容也是为了使代码库更易于维护。

FKB 面板已拆分为更小的组件,用于处理用户信息、统计、徽章和访客等内容。

主题列表卡片也被重新组织为独立的头部、主体、元数据和列表部分组件。

这并不一定会改变用户看到的内容,但使未来的开发变得更加容易。

简而言之

FKB Pro v2 不仅仅是一个视觉更新。它是对主题多个部分的相当重大的重写,重点在于更好的响应式行为、性能、缓存、无障碍性和可维护性

感谢所有使用 FKB Pro 并报告问题或提出改进建议的人。:heart:

> ./support --coffee :heart:

2 个赞

由于描述部分的原因,我在移动端遇到了显示问题。我尝试过看看能不能解决,但没能成功。我不知道是不是只有我一个人遇到这种情况

1 个赞

我成功地在 scss 里为移动端做了一个修改

/* Force le texte de la description à s'enrouler */
.category-heading__content p,
.category-heading__content span,
.category-heading__content div {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

之后,也许还有更好的方案 :rofl:

这看起来是一个核心问题。:thinking: 我在默认主题上也遇到了同样的情况。

不过,我认为用 grid 来处理这部分会更合适。比如:

.category-heading {
  &.--has-logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }

  &__content {
    min-width: 0;

    .badge-category__wrapper {
      max-width: 100%;
    }
  }
}

这样处理可用空间似乎更可靠,尤其是在分类名称很长的情况下。

1 个赞