とても便利です、本当にありがとうございます！
このコードを使ってみましたが、うまくいかないようです。
breadcrumbsContainerとその白い背景は確認できますが、その中にパンくずリストが生成されていません。
コンポーネントとして、また「カスタムCSS/HTML」の下で直接テーマの一部として試しました。
私が間違っている可能性のある点はありますか？
はい、@DogBite さん、ソリューションは header.html の先頭と末尾にスクリプトタグを追加することです。
先頭に:
<script type="text/discourse-plugin" version="0.8">
末尾に:
</script>
このようになります…
<script type="text/discourse-plugin" version="0.8">
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Helper function to reset the breadcrumbs container
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// If on the homepage
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/')) {
// If on a category page
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 fetching category details", error);
}
});
} else if (url.includes('/t/')) {
// If on a topic page
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;
// Now, fetch the category name using the category 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 fetching category details for topic", error);
}
});
}
},
error: function(error) {
console.error("Error fetching topic details", error);
}
});
}
}
</script>
「いいね！」 1
リンクとしての非常にシンプルなパンくずリスト（ホーム画面にはパンくずリストが表示されない）テーマコンポーネントを作成しました。PRは歓迎します！
また、（重要ですが）現在はカテゴリでのみ正しく機能し、サブカテゴリは処理しません！
カテゴリ一覧ページでの表示…
トピックページでの表示…
「いいね！」 3
「いいね！」 1
これをさらに調べてみると、今年初めに Discourse にパンくずコンポーネントが追加されました: https://github.com/discourse/discourse/commit/1239178f496cba5d864adb7c118b17902b8b72dc。現在は一部の管理者ページでのみ表示されています。
そこで、パンくずを表示するためのテストコンポーネントを作成しました: https://gitlab.com/manuelkostka/discourse/components/breadcrumbs。現在のテンプレートは次のとおりです。
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<ul class="breadcrumbs {{concat '--' settings.plugin_outlet}}">
<li class="breadcrumbs__item --home">
{{#if this.homePage}}
{{i18n "js.home"}}
{{else}}
<a href="/">{{i18n "js.home"}}</a>
{{/if}}
</li>
{{#if this.parentCategory}}
<li class="breadcrumbs__item --parent">
<a href="/c/{{this.parentCategoryLink}}">
{{this.parentCategoryName}}</a>
</li>
{{/if}}
{{#unless this.homePage}}
<li class="breadcrumbs__item --current">
{{this.currentPage}}
</li>
{{/unless}}
</ul>
{{/if}}
</template>
新しい dbreadcrumbs コンポーネントを使用したブランチを作成しました: https://gitlab.com/manuelkostka/discourse/components/breadcrumbs/-/tree/dbreadcrumbs。これにより、テンプレートがより簡潔になり、一般的に一貫性とアクセシビリティが向上すると思われます。
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<DBreadcrumbsContainer class="{{concat '--' settings.plugin_outlet}}" />
<DBreadcrumbsItem @path="/" @label={{i18n "js.home"}} />
{{#if this.parentCategory}}
<DBreadcrumbsItem
@path="/c/{{this.parentCategoryLink}}"
@label={{this.parentCategoryName}}
/>
{{/if}}
{{#unless this.homePage}}
<DBreadcrumbsItem @path="" @label={{this.currentPage}} />
{{/unless}}
{{/if}}
</template>
しかし、DBreadcrumbsItem を使用すると、親カテゴリとサブカテゴリの順序がレンダリングされたコンポーネントで混在してしまいます。現在のカテゴリが最初に挿入されます。
コミットメッセージに記載されているこの動作が原因でしょうか？
- DBreadcrumbsItem - パンくずリストの LinkTo を登録するコンポーネント。パンくずリストは、これらのアイテムがページにレンダリングされる順序に基づいて表示されます。