このトピックについて検索しましたが、動作する解決策が見つかりませんでした。
カテゴリ、サブカテゴリを示すシンプルな基本的なパンくずリストを追加するにはどうすればよいですか？
例：
ホーム / テックトーク / WordPress
トップナビゲーションのすぐ下に表示したいです。
「いいね！」 5
これはおそらく @asugar が考えていたことでしょう。
「いいね！」 2
Hi @asugar。
もう少し詳しく説明していただけますか？ カテゴリとタグによるナビゲーション補助を「パンくずリスト」と呼んでいます。@Canapin がスクリーンショットでそれを強調しています。
通常であれば、スクリーンショットを示して、どこに追加したいかをマークしてもらえれば、そこから進めるのですが、まず別の点について指摘させてください。
これを各ページに追加すると、実質的に複数の同一のナビゲーションメニューが近接して表示されることになると思います。
代替案として、既存のパンくずリストナビゲーションでサイトに合わせて機能させることができるものはありますか？ 
「パンくずリスト」の意味を明確にすることも価値があります。私は、2つの当事者が異なる意味で使っていた会話に何度も参加したことがあります。
- サイト構造を反映した階層的なパンくずリスト（カテゴリ/サブカテゴリ/タグ、または書籍/タイトル/章）
- 訪問したページの履歴を追跡するパンくずリスト（私の好きな例は dokuwiki [DokuWiki] です。ランダムなリンクをいくつかクリックしてヘッダーを確認してください）
@asugar さん、どちらのタイプのパンくずリストについて言及されていますか？
「いいね！」 3
@asugar が何を期待しているのか推測すべきではありませんが、おそらく他のすべてのウェブページと同様に、WordPress が主に利用しているもの、つまりカテゴリを使用したナビゲーションパンくずリストでしょう。
しかし、Discourse は 2 レベルの深さしかないので、ホーム - カテゴリ - サブカテゴリ のみになります（もちろん、ページ番号も追加できますが、それは役に立たず、ほぼ不可能だと思います）。
したがって、パンくずリストはスペースを消費するだけで、他に何も提供しません。
「いいね！」 1
皆さん、こんにちは。@Jagster さんがおっしゃる通りです。カテゴリとサブカテゴリへのリンクが必要でした。例えば、
ホーム - カテゴリ - サブカテゴリ - サブサブカテゴリ - …
といった具合です。
Discourse の既存のナビゲーションは見えますが、カテゴリ/サブカテゴリをクリックして移動するものではありません。クリックするとドロップダウンが表示されます。
私が望むようなシンプルなナビゲーションを追加することは本当に不可能なのでしょうか？
「いいね！」 3
可能です。皆が言いたかったのは、あなたが求めているものとは異なる代替ソリューションが存在する可能性があり、それに興味があるかどうかを尋ねていたということです。とはいえ、それは可能ですが、すぐに使えるものではありません。カスタムで何かを設計または作成する必要があります。類似のものが作成された例は次のとおりです。
カスタムトップナビゲーションリンク - テーマ - Discourse Meta および カスタムヘッダーリンク - テーマ - Discourse Meta
「いいね！」 1
それはナビゲーション/メニューであり、すでにあります。パンくずリストはナビゲーション/メニューではありません。パンくずリストが欲しいです。
「いいね！」 1
理解しました。だからこそ「類似」という言葉を使ったのです。実装や開発が類似しているという意味で、全く同じ、似ている、あるいは近いという意味ではありませんが、類似している、あるいは比較可能と言うべきでしょうか。
Discourseでも技術的に類似したことが可能であることを見ていただけると役立つかと思い、共有した、あるいは類似していると述べました。
Discourseでは現在カスタムなしではこれが不可能であることが確立されたので、マーケットプレイスのトピックを作成する必要があるかもしれません。
これは、vBulletin のフォーラムソフトウェアで見られる典型的なパンくずリストです。私が話していたのはこれのことです。
「いいね！」 2
メニューは実質的にパンくずリスト（カテゴリとサブカテゴリ、カテゴリとサブカテゴリのページに表示される）なので、ドロップダウンメニューの使用を現在のカテゴリまたはサブカテゴリへのプレーンなハイパーリンクに変更できると思います。プラグインの書き方を知っている人なら誰でもできると思います。
トピックページの先頭には、スクロールダウンすると、すでにカテゴリとサブカテゴリ（およびタグ）が表示されていますので、おそらくこれで満足しているかもしれません。プラグイン作成者が画面の別の場所に移動させることもできると思います。
これにお金を払って自由に利用できるようにしてくれるなら、私も使うかもしれません…
「いいね！」 3
すでにプラグインがあればいいのにと思いますが、どなたかご存知ですか？
「いいね！」 2
ページにクラシックなパンくずリストを表示する問題は解決できましたか？
これは最善の方法ではないかもしれませんが、私たちにはうまくいきました。
header.html または別のプラグイン:
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// ヘルパー関数でパンくずリストコンテナをリセットします
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// ホームページの場合
if (url === '/') {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item active">
Community
</li>
`);
} else {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item">
<a href="/">Community</a>
</li>
`);
}
};
resetBreadcrumbs();
if (url.includes('/c/')) {
// カテゴリページの場合
const categorySlugOrId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/c/${categorySlugOrId}/show.json`,
success: function(response) {
if (response && response.category && response.category.name) {
const categoryTitle = response.category.name;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item active">
${categoryTitle}
</li>
`);
}
},
error: function(error) {
console.error("カテゴリ詳細の取得エラー", error);
}
});
} else if (url.includes('/t/')) {
// トピックページの場合
const topicId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/t/${topicId}.json`,
success: function(response) {
if (response && response.title) {
const topicTitle = response.title;
const categoryId = response.category_id;
// カテゴリIDを使用してカテゴリ名を取得します
$.ajax({
type: "GET",
url: `/c/${categoryId}/show.json`,
success: function(categoryResponse) {
if (categoryResponse && categoryResponse.category) {
const categoryTitle = categoryResponse.category.name;
const categoryURL = `/c/${categoryResponse.category.slug}`;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="${categoryURL}">${categoryTitle}</a>
</li>
<li class="breadcrumb-item active">
${topicTitle}
</li>
`);
}
},
error: function(error) {
console.error("トピックのカテゴリ詳細取得エラー", error);
}
});
}
},
error: function(error) {
console.error("トピック詳細の取得エラー", error);
}
});
}
}
SCSS:
#breadcrumbsContainer {
display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 0;
list-style: none;
background-color: #FFFFFF;
border-radius: 0.25rem;
.breadcrumb-item {
display: flex;
align-items: center;
padding-left: 0;
& + .breadcrumb-item::before {
content: ">";
display: inline-block;
padding: 0 0.5rem;
color: #6c757d;
}
.home {
position: relative;
padding-left: 2.3rem;
font-size: 0;
visibility: hidden;
&::before {
content: "";
position: absolute;
display: block;
background-image: url('HOME SVG');;
background-repeat: no-repeat;
height: 24px;
width: 32px;
top: -20px;
visibility: visible;
}
&:hover {
&::before {
background-image: url('HOME HOVER SVG');;
}
}
}
a {
text-decoration: none;
color: #006BB4;
&:hover {
text-decoration: underline;
color: #0056b3;
}
}
&.active {
color: #6c757d;
}
}
}
after_header.html テンプレート内:
<div id="breadcrumbsContainer"></div>
「いいね！」 3
見た目を確認したい方のために：
（デフォルトではHOMEはSVGに置き換えられますが、CSSを調整しました）
パンくずリストの一部は、AJAXクエリの後にゆっくりと生成されます。
また、トピックを開いたときに、デフォルトでコンテンツが一番上にスクロールされません。
「いいね！」 3
非常に良い。数回のアップグレードを経て、コアに組み込まれることを願っています。
これがあれば嬉しいです！
これに対するオプションはありますか、それともプログラマーを関与させる必要がありますか？
信頼できるコンポーネントが必要な場合は、開発者の作業が必要です。
このトピックで共有されているものは推奨しません。
お返事ありがとうございます！
開発者に依頼して対応してもらいますが、そのコードの主な問題点を教えていただけますでしょうか？
よろしくお願いいたします！
私は開発者ではありません。もしDiscourseのコンポーネントについて私よりも詳しい方がいれば、私よりも良い回答ができるでしょう
私が認識している主なポイントは2つです。
-
データを返すためのAJAX呼び出しは、非常に、非常に最適化されていません。このようなコンポーネントは、このようなリクエストを一切行わずに実現できると確信しています。これらのリクエストが全体を遅くし、パンくずリストの表示を遅らせています。
-
コンポーネントはDiscourseのJS APIをほとんど使用していません。これは、必要なデータを返し、HTMLコードを直接DOMに注入するのではなく、テンプレートを適切に装飾/挿入できる可能性があります。
「いいね！」 3