Sehr nützlich, vielen Dank!
Ich habe versucht, diesen Code zu verwenden, aber er scheint nicht zu funktionieren.
Ich kann den breadcrumbsContainer und seinen weißen Hintergrund sehen, aber die Breadcrumbs werden nicht darin generiert.
Ich habe es als Komponente und direkt als Teil des Themes unter “Custom CSS/HTML” ausprobiert.
Haben Sie eine Idee, was ich falsch machen könnte?
Ja @DogBite, die Lösung besteht darin, die Script-Tags oben und unten in header.html hinzuzufügen…
Oben:
<script type="text/discourse-plugin" version="0.8">
Unten:
</script>
So…
<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 „Gefällt mir“
Hier habe ich eine sehr einfache Breadcrumbs (als Links) Theme Component erstellt (auf der Startseite werden keine Breadcrumbs angezeigt)… PRs sind willkommen!
Außerdem (wichtig) funktioniert dies derzeit nur korrekt mit Kategorien – es werden keine Unterkategorien behandelt!
So sieht es auf einer Kategorie-Liste-Seite aus…
So sieht es auf einer Thema-Seite aus…
3 „Gefällt mir“
1 „Gefällt mir“
Als ich mir das genauer angesehen habe, wurde Anfang dieses Jahres eine Breadcrumbs-Komponente zu Discourse hinzugefügt: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. Sie wird derzeit nur auf ausgewählten Admin-Seiten gerendert.
Ich habe eine Testkomponente zur Darstellung von Breadcrumbs erstellt: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Die aktuelle Vorlage ist:
<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>
Ich habe jetzt einen Branch erstellt, der die neue DBreadcrumbs-Komponente verwendet: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Das würde die Vorlage übersichtlicher machen und wahrscheinlich generell für bessere Konsistenz und Barrierefreiheit sorgen:
<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>
Bei der Verwendung von DBreadcrumbsItem werden jedoch die Reihenfolge der übergeordneten Kategorie und der Unterkategorie in der gerenderten Komponente vertauscht. Die aktuelle Kategorie wird zuerst eingefügt:
Ich frage mich, ob das an diesem Verhalten liegt, das in der Commit-Nachricht angegeben ist?
- DBreadcrumbsItem - Die Komponente, die einen LinkTo für den Breadcrumb-Pfad registriert. Der Breadcrumb-Pfad wird basierend auf der Reihenfolge angezeigt, in der diese Elemente auf der Seite gerendert werden.