みなさん、こんにちは。
トピック一覧からサブカテゴリを「非表示」にして、代わりにトピックタイトルの下に親カテゴリを表示させる方法はありますか？
目指しているのは、n 個のサブカテゴリを持つルートカテゴリです。これらのサブカテゴリはフロントエンドでは表示せず、グループメンバーシップに基づいて投稿へのアクセスを制限するためにのみ使用します。
トピック一覧では、サブカテゴリの代わりにトピックタイトルの下に親カテゴリを表示させたいと考えています。
タグを使うことも考えましたが、残念ながらそれではトピックへのアクセスを制限できません。
トピックリストのアイテム用テンプレートでは、トピックのカテゴリへのリンクのみが表示されます。例：
{{category-link topic.category}}
親カテゴリへのリンクを表示するには、このテンプレートを変更する必要があります。
{{#if topic.category.parentCategory}}
{{category-link topic.category.parentCategory}}
{{else}}
{{category-link topic.category}}
{{/if}}
ただし、特定の親カテゴリに対してのみこれを適用したい場合は、さらにロジックを追加する必要があります。その推奨される方法が何かはわかりません（ハンドルバースヘルパーを登録するのでしょうか？）。
別のアプローチとして、常にカテゴリと親カテゴリの両方のリンクを表示し、CSSで不要なものを非表示にする方法もあります。
確認はしていませんが、CSS で非表示にできると思います。
このアプローチの場合もテンプレートを修正する必要がありますか？管理画面でそのようなサイト設定は見つかりませんでした。
親カテゴリはデフォルトのテンプレートに含まれていないため、おそらくテンプレートを変更する必要があります。少なくとも、それを実現するより簡易な方法については存じておりません。
テンプレートを変更するためのサイト設定はありませんので、DMで試せるコードをお送りします。
一般的には、完全なテンプレートの上書きは避けるべきです。Discourse のアップデートでテーマが壊れた場合、差分を実行して何が変わったかを確認するメンテナンスが必要になるためです。
その代わりに、テンプレートに渡されるデータ自体を変更するというアプローチをとることをお勧めします。
topic-list-item は Ember コンポーネントなので、api.modifyClass を使用して必要な変更を加えることができます。
例えば、以下のスニペットは、サブカテゴリのトピックでタイトル下に親カテゴリのバッジを表示するものです。トピックがメインカテゴリにある場合、このコードは効果を持ちません。
<script type="text/discourse-plugin" version="0.8">
const { on } = require("discourse-common/utils/decorators");
// 親カテゴリの ID
const targetCategoryIds = [9, 15, 50];
const useParentCategory = function () {
const parentCategory = this.attrs.topic.category.parentCategory;
const switchToParent = parentCategory && targetCategoryIds.includes(parentCategory.id)
if (switchToParent) {
this.attrs.topic.set("category", parentCategory);
}
};
api.modifyClass("component:topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
api.modifyClass("component:latest-topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
</script>
これは素晴らしいですね！
特定の1つ以上のカテゴリに限定することはできますか？
これには、達成したい目的に応じて2つのアプローチがあります。どのような結果を望んでいますか？
これが私たちが探しているものです。
上記のスニペットをその変更を反映するように編集しました。必要なのは、targetCategoryIds 配列に親カテゴリの ID を追加することだけです。カテゴリ ID は、カテゴリページにアクセスして URL を確認することで取得できます。
https://meta.discourse.org/c/support/6
上記の URL の末尾にある「6」は、Meta 上のサポートカテゴリの ID です。
@Johani さん、共有ありがとうございます！Ember を始めたばかりですが、皆さん本当に助かります！
それは素晴らしいですね！迅速なご支援、どうもありがとうございます。
これは本当に素晴らしいです。この機会をいただき、またそれを実行するために時間を割いてくださった皆様に感謝申し上げます。
@Johani このコードスニペットはどこに配置すればよいのでしょうか？
テーマコンポーネントの <head> タグとヘッダー部分に配置してみました。そこにはすべての CSS を格納しています。しかし、サブカテゴリから最初の影響を受けたトピックがリストされるはずの地点で、トピック一覧が切り捨てられてしまいます。
はい、ローカルで見逃していたカテゴリ設定に関する問題がありました。上記のスニペットを編集したので、これで動作するはずです。
上記のスニペットでは、この機能がどのカテゴリで動作するかを設定できます。すべてのカテゴリで動作させたい場合は、以下のような記述になります。
<script type="text/discourse-plugin" version="0.8">
const { on } = require("discourse-common/utils/decorators");
const useParentCategory = function () {
const parentCategory = this.attrs.topic.category.parentCategory;
if (parentCategory) {
this.attrs.topic.set("category", parentCategory);
}
};
api.modifyClass("component:topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
api.modifyClass("component:latest-topic-list-item", {
@on("didReceiveAttrs")
setCategory() {
useParentCategory.call(this);
}
});
</script>
@Johani さん、ご支援いただきありがとうございます。心より感謝申し上げます！
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.