みなさん、こんにちは。
タグがナビゲーションでより構造化された可視性を持つようにしたいと考えています。特に、親 > 子 の階層構造に依存している方々にとって重要です。現在、タグは 40 以上ありますが、タグの構造化されたナビゲーション（個人的な意見ですが、多くのフォーラムでは ひどく 活用されていない一方で、Discourse はこれに長けています！）は非常に重要です。
Discourse のネイティブナビゲーションの上に複数のメニューを追加するのは馬鹿げているため、私の提案（多分？）は劇的なものではありません。このように醜いモックアップを作成しました…
もしこのようなものが存在するならば、私には見つけられませんでした。@Johani の コンポーネント が最も近いですが、残念ながら構造化されていません。
ともあれ、どんなフィードバックでも歓迎します。「これは意味をなさない」や「GitHub でこれを見つけるのに 10 秒かかったよ、新人さん」のようなコメントでも構いません。
ありがとうございます！
parent > child タグの数が多すぎるため、すべてのタグを収めることはできません。
例えば、Meta のタグを見てみてください。
その意見には共感します。[tip-toeing] 氏の例はタグの使い方のベストプラクティスとは言い難いでしょう（タグに関する明確なベストプラクティス自体が存在しないとは思うのですが）。しかし、タグに関する統制された語彙を持ち、カテゴリよりもはるかにタグを重視している私たちにとって、これは単なる「オプション」としてさえも有用かもしれません。私の例は単なる一例に過ぎません。他の方々にはより良いアイデアがあるかもしれませんね！
なぜタグページを使わないのでしょうか？そのページへのリンクをさまざまな方法で強調表示できます。ページ自体はデフォルトでグループによる構造化をサポートしています。
その後、タグにカスタムスタイルを追加したり、
より具体的なプレゼンテーションを得るためにページ全体のレイアウトをスタイルしたりできます。
はい、タグページが大好きです。そして、その柔軟性も素晴らしいです。しかし、タグページは至る所にあるわけではありません。一方、メニューはカテゴリの場合と同様に、動的でどこにでも存在するナビゲーションを提供します。
私と同じように、カテゴリよりもはるかにタグを頻繁に利用している人もいるはずです。それは直感的ではないように思えるかもしれませんが、特定の文脈では理にかなっています。Tags の投稿で使われた車の例でさえ、このような機能が役立つでしょう。例えば、車好きの人々にとっては、カテゴリではなく、タグ間を行き来する（「Ford vs Ferrari」など）方が好まれるかもしれません。
とはいえ、もしかすると皆さんはまだこの機能の準備が整っていないのかもしれません。でも、お子さんたちはきっと気に入るでしょうね。
より動的な解決策を見つけられれば嬉しいです！ただし、手動でメンテナンスする必要のないものを実現するには、かなりのコーディングが必要になるでしょう。それまでの間は、タグページへのリンクをよりあちこちに配置するだけでも良いでしょう
私の経験では、タグをさらにユーザーフレンドリーにするもう一つの要素は、適切なタグバナーです。タグバナーコンポーネントに追加するシンプルなコンポーネントを作成し、タグに説明を追加できるようにしました: https://github.com/nolosb/discourse-tag-banners-descriptions
少し異なるアプローチとして、トピックやトピック一覧におけるタグの表示を、階層を「親 > 子」のパンくずリスト形式で示すように変更しました。従来の「子, 親」という表示から変更しています。
私の解決策は特定のサイト向けでややハック的なものでしたが、最終的な結果には満足しています。
私が行ったこと、そしてあなたが目指していることにおける最大の障壁は、Discourse がタググループを事前に読み込んでおらず、API リクエストを行わない限り必要な時に利用できない点です。カテゴリ構造が事前に読み込まれているのと同様に、タググループも事前に読み込まれるべきだと考えます。
ここでの問題は技術的な制限ではなく、スペースの制約です。
これはここで指摘されています。
ユーザーとしての体験を想像してみてください。ウェブサイトでメニューを開くと、以下のような表示になります。
言い過ぎかもしれませんが、圧倒されてしまうでしょう。特に、そのメニューには結果を絞り込むための検索機能がない場合です。
そこで、あなたがやりたいこととユーザーが体験したいことのバランスを取る方法を探してみましょう。どうすればよいでしょうか？タググループの数を制限し、さらに表示可能なものがあることを示すことです。例えば、以下のような形です。
では、それをどう実装するかというと？
コードは以下の通りです。
<script type="text/discourse-plugin" version="0.8">
const MAX_TAGS_TO_SHOW = 20;
const Category = require("discourse/models/category").default;
const siteSettings = api.container.lookup("site-settings:main");
const tagStyle = siteSettings.tag_style;
const getNumberOfTags = (tags, categoryTagsGroups) => {
let count = 0;
count = tags.length;
for (const categoryTagsGroup of categoryTagsGroups) {
count = count + categoryTagsGroup.tags.length;
}
return count;
};
fetch("/tags.json")
.then(response => response.json())
.then(data => {
try {
const tags = data.tags;
const hasCategoryTagGroups = data.extras?.categories;
if (hasCategoryTagGroups) {
const categoryTagsGroups = data.extras.categories;
let moreCount = getNumberOfTags(tags, categoryTagsGroups);
let visibleCount = 0;
const content = [];
for (const categoryTagsGroup of categoryTagsGroups) {
const category = Category.findById(categoryTagsGroup.id);
const name = category.name;
const childTags = categoryTagsGroup.tags;
const childTagNodes = [];
childTags.forEach((tag, index) => {
if (visibleCount <= MAX_TAGS_TO_SHOW) {
childTagNodes.push(
api.h(
"li.tag-link-item",
api.h(
`a.discourse-tag.tag-link.${tagStyle}`,
{ href: `/tag/${tag.text}` },
tag.text
)
)
);
moreCount--;
visibleCount++;
}
});
if (childTagNodes.length) {
content.push([
api.h("li.heading", api.h("span", name)),
childTagNodes
]);
}
}
api.decorateWidget("menu-links:after", helper => {
if (helper.attrs.name !== "general-links") return;
return api.h("div.clearfix", [
api.h("ul.tag-links", [
api.h("a.categories-link", { href: "/tags" }, [
"Tags ",
moreCount ? `(${moreCount} more)...` : ""
]),
content
]),
api.h("hr")
]);
});
}
} catch (error) {
console.error("There's an issue in the hamburger tags theme component");
console.error(error);
}
})
.catch(console.error);
</script>
これはテーマの header タブに追加します。上部にある以下の部分を変更して、表示したいタグの数に設定できます。
const MAX_TAGS_TO_SHOW = 20;
次に、リンクのスタイルを設定するために少し CSS を追加する必要があります。以下は基本的な例です。
.tag-links {
.heading {
padding: 0.25em 0.5em;
}
.tag-link-item {
background-color: transparent;
display: inline-flex;
align-items: center;
padding: 0.25em 0.5em;
width: 50%;
box-sizing: border-box;
.tag-link {
display: inline-flex;
width: 100%;
&:hover {
color: var(--primary);
}
}
}
}
上記の JavaScript は、サイト設定で指定されたタグスタイルを尊重します。また、あなたのサイトがタグに非常に依存している場合、そのメニューにカテゴリを表示する必要はないかもしれません。それらを非表示にすることで、ユーザーの混乱を減らすことができます。
さらに、拡張されたタグセクションを追加した場合、このリンクは冗長になります。
そのため、以下のように非表示にしましょう。
.panel-body {
.category-links,
.categories-separator,
.widget-link[href="/tags"] {
display: none;
}
}
最後に、ここで指摘されている通りです。
このデータは、/tags にアクセスしない限り、デフォルトではクライアントに渡されません。そのため、上記のコードはホームページで追加のリクエストを追加します（アクセスごとに 1 回のみ実行されます）。Discourse は仕組みを非常にシンプルに保とうとしているため、データが必須でない限り、デフォルトでは読み込みません。
この機能が近い将来に Discourse コアに追加されるとは思えません。したがって、サーバー側で動作するプラグインを作成しない限り、追加のリクエストを行うのがほぼ唯一の選択肢です。
ジョー、ありがとうございます！これは素晴らしいですね！
少しだけ確認させてください。元のレスポンスでは、タググループ（子タグではなく）で取得されているようですが、何か理由があるのでしょうか？子タグが表示されなかったのですが、あなたの最初のレスポンスでタググループを使うと表示できました。
唯一の問題は、タグがログインしていないユーザーには表示されないことです。これはAPIに関連するものだと推測していますが、回避策はありますか？
それ以外は、まさに救世主です！他の人々もこのコードを使うのを確かに想像できます。本当にありがとうございます！
この作業を少し楽にするテーマコンポーネントを作成しました。以下のいずれかを選択できます。
詳細はこちら
JoeさんをDiscourseのパトロン聖人に推薦します。
ハハハ、僕もトレーニングコース用のものを作っていたところだったよ。
しまったね。
ともかくありがとう。