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) が必要なのでしょう。
ただし、なぜこれらのアーキタイプをこれほど具体的にターゲットにしているのか疑問です。トピックリスト(トピック表示 vs)にいるかどうかを確認しようとしているだけなのでしょうか?

「いいね!」 2

このテーマは素晴らしいのですが、バグに遭遇しているのか、何かを壊してしまったようです。

何らかの理由でトピックの上にパディングが設定されていないため、角丸がほぼ消えてしまい、トピック同士に目に見える区切りがありません。

新しいモダンなファウンデーションの実験的変更に関連する何かがこの動作を引き起こしているようです。それを無効にすると、パディングが正常に戻ります。

タイトル:
[Bug] テーマが Discourse 2026.4.0-latest でクラッシュ — モジュール 'ember-this-fallback/js-component' が見つかりません

説明:

Discourse を v2026.4.0-latest (コミット 19374472fd) に更新した後、FKB Pro テーマにより致命的なフロントエンドクラッシュが発生し、フォーラムが部分的に使用不能になりました。Discourse はオレンジ色のバナーを表示します:

「テーマ/コンポーネントにエラーがあるため、サイトが正常に動作しない可能性があります。原因は ‘FKB Pro theme’ です。」

根本原因:

テーマ(またはそのコンポーネントのいずれか)が、最近のバージョンでDiscourseコアから削除された ember-this-fallback/js-component モジュールをまだ参照しています。このモジュールは、廃止されたEmberの this-property-fallback パターン向けの互換性シェムであり、テンプレートで {{this.foo}} の代わりに {{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

ドンさん、こんにちは。

まず、このテーマは本当に素晴らしいです!最近、地元の教育コミュニティ Jiwa.now 向けに FKB Pro をデプロイしたのですが、カードベースの UI は美しく、非常にプロフェッショナルな仕上がりです。

モバイル環境でテストしている際、トピックカードのクリック領域に関する UX の問題に気づきました。現在、クリック可能な領域が一貫していません。例えば、カードの端をクリックするとトピックに遷移しますが、アバターの右側の空白部分やフッターの中央部分など、他の空白部分をクリックしても何も反応しません。

この「当たるか外れるか」のような操作感はユーザーを混乱させ、単にフィードをスワイプしてスクロールしようとした際に誤クリックを引き起こす原因にもなります。

:light_bulb: 今後のアップデートへの提案: もしテーマ側でデフォルトとしてこれを改善できれば、UX が向上するでしょう。具体的には、トピックに遷移するクリックを「タイトル」「画像」「抜粋」といった核心コンテンツのみに絞り込み、カードの背景自体はクリック無効化することで、スワイプ時の誤クリックを防ぐことです。

それまでの間、私のユーザーにとってモバイルのタッチ操作を 100% 確実なものにするため、pointer-events を使った「ホワイトリスト方式」の CSS スニペットを作成しました。これはカードの背景へのクリックを完全に無効化し、実際のインタラクティブな要素にのみクリックを再有効化するものです。

タッチターゲットの改善を検討されている方の参考になればと思い、また開発者の方々にとって役立つリファレンスになるかもしれないと思い、ここに共有させていただきます。

/* モバイルのカードクリック/タッチ競合の修正(スマートなホワイトリスト方式) */

/* 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. 重なっている stretched-link 疑似要素を無効化 */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
    pointer-events: none !important;
    display: none !important;
}

ありがとうございます!

レオ

「いいね!」 2

@Don テーマ最高ですね!素晴らしいテーマを共有してくれてありがとうございます :high_five: 。これは単なるお礼のメッセージです。コミュニティのために何時間も費やして作ったものなので、その努力をきちんと伝えたいと思ったからです!!

「いいね!」 3

こんにちは @gilles :waving_hand: 温かいお言葉をありがとうございます!:hugs:
もし私の活動をサポートしていただける気がしたら、プロフィールに小さなサポートセクションを用意しています:> ./support --coffee

「いいね!」 1

FKB Pro v2 - 新機能とは?

アナウンスが少し遅れてしまいました。v2 のリリースは約2週間前でしたが、遅くてもいいから何もしないよりまし、というものです。:slightly_smiling_face:

FKB Pro v2 は、内部構造においてかなり大きな更新となっています。全体的な見た目や雰囲気は以前と変わっていませんが、テーマの多くの部分が再設計、最適化、そして整理されました。

:desktop_computer: デスクトップ用レイアウトの改善

デスクトップのトピックリストは、Discourse のサイドバーや FKB Pro 独自のパネルとの相性がはるかに良くなった、より柔軟なレイアウトを使用するようになりました。

レイアウトは利用可能なスペースの変化に合わせて自動的に適応し、小さな画面やモバイルデバイス用の専用のブレークポイントが用意されています。

:triangular_ruler: より優れたレスポンシブ動作

狭いレイアウトやコンテンツのオーバーフロー処理に多くの労力が費やされました。

長いトピックタイトル、ユーザー名、タグ、その他のコンテンツは、レイアウトが利用可能な幅を超えて押し広げられることがなくなり、はるかに確実に処理されるようになりました。

モバイルレイアウトも、ビューポートベースのサイズ指定に頼るのではなく、実際のコンテナ幅に合わせて動作するように調整されました。

:high_voltage: トピックリストのパフォーマンス向上

トピックリストにもパフォーマンスの最適化が施されました。

オフスクリーンのトピックカードは、適切な場合にブラウザによってスキップされるようになり、トピック画像とそのコンテナはより優れたコンテインメントルールを使用するようになりました。

これは特に長いトピックリストにおいて有用です。

:locked_with_key: FKB パネルのキャッシュ改善

FKB パネルは、ユーザー固有のバージョン管理されたキャッシュキーを使用するようになりました。

一般的なキャッシュエントリを共有するのではなく、ユーザーデータは現在の Discourse ユーザーに対して保存されるため、同じブラウザ内でユーザーを切り替えた際に、キャッシュされた情報がアカウント間で漏洩することを防止します。

また、キャッシュの有効期限切れや無効なエントリの処理もより確実にされるようになりました。

:high_voltage: パネルの読み込み高速化

ユーザーサマリーとカードデータは、1つのリクエストが完了するまで待たずに次を開始するのではなく、並行して要求されるようになりました。

また、アクティブユーザーが変更された後、古いリクエストがデータを上書きするのを防ぐための追加の保護も実装されています。

:control_knobs: 新しいパネル状態管理

FKB パネルの表示/非表示状態は、専用の状態管理サービスに移行されました。

これにより、動作がより予測可能になり、メンテナンスしやすくなるだけでなく、パネルのトグル自体も以下のように改善されました:

  • 適切な aria-expanded 状態
  • 説明的なラベル
  • ダイナミックなアイコン
  • 永続的な表示/非表示状態

:wheelchair_symbol: アクセシビリティの改善

いくつかのインタラクティブな要素、特に FKB パネルのコントロール周辺で、より良いアクセシビリティサポートが施されました。

パネルのトグルは、支援技術に対してその状態を正しく公開し、より有用なラベルやタイトルを提供するようになりました。

:mobile_phone: モバイル環境の改善

トピックリスト、カテゴリ、プライベートメッセージ、ユーザーページ、グループ、トピックなど、様々なモバイルレイアウトが整理され、より堅牢になりました。

その目標は、Discourse のレスポンシブレイアウトと戦うのではなく、その中でより自然に動作するように FKB Pro をすることでした。

: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