こんにちは！
これをどのように進めればよいか正確にはわからないので、少し助けを求めています。
基本的に、固定トピックと通常のトピックの間に視覚的な区別を設けたいと考えています。これはゲームスタジオのコミュニティフォーラム用で、その区別はユーザーにとって役立つでしょう。
求めているのは、次のようなものです。
[PINNED] トピック名
通常のトピック
代わりに：
[PINNED] トピック名
通常のトピック
すでに固定トピックの背景色を変更して、両者の間にわずかな違いを設けています。CSSを試しましたが、ページを更新した場合にのみ機能しました。
独自のテーマコンポーネントを作成しようとしましたが、そこで行き詰まっています。何かを追加する必要があるのですが、どこに追加すればよいかわかりません。
私の目標は、元の（通常のトピックの）tbodyの前に <tbody> class="pinned-topics"> を追加することです。
どのようなガイダンスでも大歓迎です！
in:pinned クエリを使用して、Filtered Topic Lists のテーマコンポーネントの使用を検討できます。
代わりに CSS を使用したい場合は、次のようなことができます。
// リストの最後のピンをターゲットにする
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
// テーブル行内にスペースを強制する簡単な方法
padding-bottom: 1.8em;
}
tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
// 必要に応じてスペースに表示するコンテンツ
content: 'regular';
width: 100%;
position: absolute;
display: flex;
height: 1em;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
border-top: 1px solid var(--primary-low);
}
お手伝いありがとうございます！残念ながら、うまくいきませんでした。必要なことを行うはずのプラグインを試しましたが、Discourse 3.4.0-beta2 で動作させることができないようです。
これに関するご支援をいただければ幸いです！
こんにちは、Teriseさん。
コードを見ましたが、あと一歩です！
フィードバックをいくつかご紹介します。
プラグインではなく、テーマコンポーネントで変更できます。このテンプレートの使用をお勧めします: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
コネクタの使用は正しいです。正しいパスは /discourse/connectors/ です…
コネクタに渡される引数は outletArgs で取得できます。コネクタはここで確認できます:
これは次のようになります。
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
そしてテンプレート:
{{#if this.pinnedTopics}}
<tbody class="pinned-topics">
{{#each this.pinnedTopics as |topic|}}
<TopicListItem
@topic={{topic}}
@bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
@lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
@selected={{@outletArgs.selected}}
@hideCategory={{@outletArgs.hideCategory}}
@showPosters={{true}}
/>
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
</tbody>
{{/if}}
注意: 残念ながら、showPosters は引数として渡されないため、ここで値をハードコーディングする必要があります。
注意: デフォルトでは、次のようになります。
これは、一意のIDを持つdivラッパーを生成し、CSSを混乱させます。ただし、要素にアクションをバインドしたい場合は必要です。
ラッパーをカスタマイズするには、tagName と classNames を使用できます。
import { classNames, tagName } from "@ember-decorators/component";
@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
...
}
{{#if this.pinnedTopics}}
{{#each this.pinnedTopics as |topic|}}
...
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
{{/if}}
（要素に対して何も行わないことがわかっている場合は、テンプレートの tbody を保持し、tagName("") を使用できます）。
すると、次のようになります。
より良い方法があるかどうか、徹底的に調べたわけではありません。
あなたのコードを機能させる手助けをしたかっただけです！ 
コンポーネントディレクトリに何か必要になりますか、それともすべてのファイルはコネクタに配置されますか？
プラグインではなくテーマコンポーネントとしてこれを行った唯一の理由は、後でさらに機能を追加する予定があるためです。
このコネクタとコードのコンテキストでは、components ディレクトリは不要です。
既存のコンポーネントを変更したため、私のスクリーンショットで見ることができます。
とはいえ、それはあなたが後で何をしたいかによります。コネクタ内に、別のコンポーネントを参照するコンポーネントを作成することも可能です（そして、このコンポーネントは components ディレクトリに配置することになります）。
完璧です、本当にありがとうございました！
もしよろしければ、もう一つ質問があります。ピン留めされたトピックが通常のトピックリストに表示されないようにする方法はありますか？そうすれば、ピン留めされたトピックが重複しなくなります。
編集: CSSで実際にそれを実現できました。
重ねて、ご協力いただき本当にありがとうございました！
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
