Ich habe zu diesem Thema recherchiert, konnte aber keine funktionierende Lösung finden.
Wie füge ich eine einfache, grundlegende Breadcrumb-Navigation hinzu, die Kategorien und Unterkategorien anzeigt?
Z. B.
Startseite / Tech Talks / WordPress
Ich möchte sie direkt unter der Top-Navigation hinzufügen.
Das ist wahrscheinlich das, was @asugar im Sinn hatte.
Hallo @asugar. 
Könntest du bitte etwas genauer erklären, was du meinst? Wir nennen die Navigationshilfe für Kategorien und Tags „Breadcrumbs“; @Canapin hebt sie in ihrem Screenshot hervor.
Normalerweise würde ich vorschlagen, einen Screenshot zu zeigen und zu markieren, wo du sie haben möchtest, und dann arbeiten wir von dort aus weiter, aber ich habe zuerst eine weitere Beobachtung:
Ich denke, wenn du das zu jeder Seite hinzufügen würdest, würden im Wesentlichen mehrere identische Navigationsmenüs in unmittelbarer Nähe zueinander angezeigt werden.
Gibt es alternativ etwas, das wir mit der vorhandenen Breadcrumb-Navigation machen könnten, damit sie für deine Website funktioniert? 
Es lohnt sich auch, die Bedeutung von „Breadcrumbs“ zu klären. Ich war in zahlreichen Gesprächen, in denen zwei Parteien unterschiedliche Dinge meinten:
@asugar, auf welche Art von Breadcrumbs beziehst du dich?
Ich sollte nicht raten, was @asugar bekommen möchte, aber vielleicht ähnlich wie bei allen anderen Webseiten – und WordPress verwendet meistens: Navigations-Breadcrumbs, die mithilfe von Kategorien erstellt werden.
Aber Discourse hat nur eine zweistufige Konstruktion, sodass es nur Home - Kategorie - Unterkategorie sein kann (sicher, es könnte auch eine Seitenzahl geben, aber das ist nutzlos und meiner Meinung nach fast unmöglich zu erstellen).
Daher bietet ein Breadcrumb nichts anderes als Platzverschwendung.
Hallo zusammen. @Jagster hat es richtig erfasst. Ich wollte Links zu Kategorien und Unterkategorien. Wie\nHome - Kategorie - Unterkategorie - Unterunterkategorie - … \n\nIch sehe die vorhandene Navigation in Discourse, aber sie ist nicht klick- und navigierbar zu Kategorien/Unterkategorien. Beim Klicken wird ein Dropdown angezeigt.\n\nIst es wirklich unmöglich, eine einfache Navigation wie gewünscht hinzuzufügen?
Es ist möglich, was alle zu sagen versuchten, ist, dass es möglicherweise eine alternative Lösung gibt, die sich von dem unterscheidet, wonach Sie fragen, und sie fragten sich, ob Sie daran interessiert wären. Das heißt, es ist möglich, aber nicht sofort einsatzbereit. Sie müssten etwas Individuelles entwerfen oder erstellen. Beispiele, wo etwas Ähnliches erstellt wurde, sind:
Custom top navigation links - theme - Discourse Meta und Custom Header Links - theme - Discourse Meta
Das ist Navigation/Menü und das habe ich bereits. Breadcrumb ist keine Navigation/Menü. Ich möchte Breadcrumb.
Ich verstehe, deshalb habe ich das Wort „ähnlich“ verwendet. Sie sind in dem Sinne ähnlich, dass die Implementierung oder Entwicklung ähnlich ist, nicht exakt gleich oder identisch oder auch nur annähernd, sondern ähnlich oder, wenn ich sagen darf, vergleichbar.
Ich habe das geteilt oder erwähnt, dass sie ähnlich sind, weil ich dachte, es könnte hilfreich sein zu sehen, dass technisch etwas Ähnliches in Discourse möglich ist.
Da nun festgestellt wurde, dass dies in Discourse derzeit ohne etwas Individuelles nicht möglich ist, müssen Sie möglicherweise ein Thema im Marketplace dafür erstellen.
Das ist eine typische Brotkrümelspur, die in jeder Forensoftware zu finden ist. Oben ist eine von vBulletin. Das ist es, worüber ich gesprochen habe.
Das Menü ist im Grunde ein Breadcrumb (da es Kategorie und Unterkategorie auf Kategorie- und Unterkategorieseiten anzeigt), daher denke ich, dass Sie es von Dropdown-Menüs auf einfache Hyperlinks zur aktuellen Kategorie oder Unterkategorie umstellen könnten. Ich wette, jeder, der weiß, wie man ein Plugin schreibt, könnte das tun.
Oben auf den Themenseiten, wenn Sie nach unten scrollen, werden bereits die Kategorie und Unterkategorie (und Tags) angezeigt, daher sind Sie damit vielleicht schon zufrieden. Ich stelle mir vor, ein Plugin-Autor könnte sie an eine andere Stelle des Bildschirms verschieben.
Wenn Sie dafür bezahlen und es frei verfügbar machen, könnte ich es vielleicht nutzen…
Ich wünschte, es gäbe bereits ein Plugin, kennt jemand eines?
Konnte jemand das Problem mit der Anzeige klassischer Breadcrumbs auf der Seite lösen?
Dies ist vielleicht nicht der beste Weg, dies zu tun, aber für uns hat es funktioniert:
header.html oder separates Plugin:
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Hilfsfunktion zum Zurücksetzen des Breadcrumbs-Containers
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// Wenn auf der Startseite
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/')) {
// Wenn auf einer Kategorieseite
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("Fehler beim Abrufen der Kategorie-Details", error);
}
});
} else if (url.includes('/t/')) {
// Wenn auf einer Themen-Seite
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;
// Jetzt den Kategorienamen anhand der Kategorie-ID abrufen
$.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("Fehler beim Abrufen der Kategorie-Details für das Thema", error);
}
});
}
},
error: function(error) {
console.error("Fehler beim Abrufen der Themen-Details", 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;
}
}
}
In unserer after_header.html-Vorlage:
<div id="breadcrumbsContainer"></div>
Für diejenigen, die sehen möchten, wie es aussieht:
(HOME wird standardmäßig durch eine SVG ersetzt, ich habe das CSS angepasst)
Einige Teile des Breadcrumbs werden nach einer Ajax-Abfrage langsam generiert.
Außerdem wird beim Öffnen eines Themas der Inhalt nicht standardmäßig nach oben gescrollt.
Sehr gut. Ich hoffe, dass es nach einigen Upgrades in den Kern gelangt.
Ich würde das gerne haben!
Gibt es dafür eine Option, oder muss ich Programmierer damit beauftragen?
Wenn Sie eine zuverlässige Komponente wünschen, benötigt sie die Arbeit des Entwicklers.
Ich würde nicht empfehlen, die in diesem Thema geteilte zu verwenden.
Vielen Dank für Ihre Antwort!
Ich werde einen Entwickler hinzuziehen, um dabei zu helfen, aber könnten Sie mir bitte die Hauptprobleme mit diesem Code mitteilen?
Vielen Dank im Voraus!
Ich bin kein Entwickler, und wenn jemand die Komponenten von Discourse besser kennt als ich, würde das bessere Antworten als meine bringen
2 Hauptpunkte, die ich sehe:
Die AJAX-Aufrufe zur Rückgabe von Daten sind sehr, sehr schlecht optimiert. Ich bin ziemlich sicher, dass Sie eine solche Komponente erstellen können, ohne Anfragen wie diese zu stellen. Sie machen das Ganze träge und lassen die Breadcrumb mit Verzögerung erscheinen.
Die Komponente nutzt die Discourse JS API fast gar nicht, die wahrscheinlich die benötigten Daten zurückgeben und eine Vorlage richtig dekorieren/einfügen kann, anstatt HTML-Code manuell in das DOM einzufügen.
