Vielen Dank, @manuel – ich habe diese Komponente mit Ihrem Code aktualisiert (und einige weitere Code-Schnipsel hinzugefügt), um zusätzliche Funktionalität zu ermöglichen:
Hallo! Diese Komponente ist großartig!
Es gibt nur eine Kleinigkeit, bei der Sie vielleicht wissen, wie Sie sie beheben können.
Die Zurück-Schaltfläche verschwindet, wenn Sie nach unten scrollen (siehe angehängtes Video)… ist es möglich, die Zurück-Schaltfläche am oberen Bildschirmrand zu fixieren/schwebend zu machen, damit sie auch beim Scrollen sichtbar bleibt?
Kontext: Die Community ist in unserer mobilen App eingebettet (Webview).
Vielen Dank @cristo für diesen großartigen Vorschlag, der jetzt als Einstellung enthalten ist:
Vielen Dank @denvergeeks! Der Button ist jetzt “sticky”.
Aber, wie Sie im angehängten Video sehen können, bringt mich der Button nicht an dieselbe Stelle im Scroll-Verlauf auf der Startseite zurück.
Ja, weil es eine Home-Schaltfläche und keine Zurück-Schaltfläche ist!
Mein Fehler! Ich dachte, es sei ein Zurück-Button wegen des Pfeils.
@denvergeeks danke für die Klarstellung! Kennen Sie zufällig eine Komponente, die einen Zurück-Button bietet?
Nein, mir ist kein bestehender TC bekannt, der eine richtige Zurück-Schaltfläche hat (oder beinhaltet). Es könnte durchaus etwas existieren, das eine solche beinhaltet.
Aber ich erkenne den Nutzen einer Zurück-Schaltfläche in der Website-Navigation an, daher werde ich eine separate TC ausarbeiten, die diese bereitstellt.
Vielleicht könnten Sie nachsehen, ob es ein bestehendes Thema oder eine Themenkomponente gibt, die zufällig eine solche beinhaltet. Das zu finden könnte meinen Prozess beschleunigen.
Großartig! Ich werde recherchieren und Ihnen meine Ergebnisse mitteilen.
Danke!
@denvergeeks Ich habe ein Thema gefunden, das nützlich sein könnte:
Ich habe noch kein bestehendes Theme oder eine Komponente gefunden, die eine Zurück-Schaltfläche enthält.
Leider habe ich dasselbe Problem auf einem iPhone 16 Pro Max.
Ja, ich kann bestätigen, dass es nach einem Update aufgetreten ist. Ich habe dieses Problem auf meinem Android-Handy.
Danke @Aaron_Walsh und @cristo fürs Melden! Bitte aktualisiert jetzt und lasst mich eure Ergebnisse wissen!
Ich kann das Problem auf der Android-Seite bestätigen. Es wurde nun behoben und entfernt.
Auf meinem iPhone behoben!
@denvergeeks Großartig! Die Zurück-Schaltfläche funktioniert unter Android. Vielen Dank!
Mir ist aufgefallen, dass es keine Möglichkeit gibt, zu entscheiden, wo die Breadcrumbs platziert werden, was großartig wäre. Ich verwende zum Beispiel die Kategoriebanner und möchte, dass die Breadcrumbs darüber liegen.
Sie gehen etwas verloren, wenn sie darunter liegen.
Gibt es eine Möglichkeit, das zu ändern?
Danke
Mir ist gerade etwas aufgefallen, das behoben werden könnte (oder zumindest die Möglichkeit, es ein- und auszuschalten). Ich glaube nicht, dass der letzte / dort sein muss.
Es wäre also nur Home / General Discussion statt Home / General Discussion /
EDIT:
Ich habe das gerade mit CSS gemacht, aber ich glaube, es könnte der Standard sein. Falls jemand das möchte:
/* Trennzeichen (::after Inhalt) vom letzten Breadcrumb-Element entfernen */
.breadcrumbs li:last-child::after {
content: none;
}
Dies ist eine kleine Anpassung, aber sie sieht für mich besser aus. Erhöhen Sie den unteren Rand auf 1rem, um ihm mehr Platz zum “Atmen” zu geben, aber es zentriert ihn auch, wenn ein Banner vorhanden ist (falls wir bei dieser Position auf der Seite bleiben müssen). Vergleichen Sie mein vorheriges Bild (die Standardeinstellung von 0,5rem) mit der Verwendung von 1rem:
Endergebnis nach allen von mir vorgenommenen CSS-Anpassungen:
CSS:
/* Breadcrumbs - Hintergrund entfernen und unteren Rand erhöhen */
.breadcrumbs {
background-color: transparent !important;
margin-bottom: 1rem;
}
/* Breadcrumbs - Rückwärtspfeil vom Home-Link ausblenden */
.breadcrumbs__title .d-icon {
display: none;
}
/* Breadcrumbs - Trennzeichen (::after Inhalt) vom letzten Breadcrumb-Element entfernen */
.breadcrumbs li:last-child::after {
content: none;
}
Hallo, ich habe eine Warnung in meinem Forum wegen bevorstehender Änderungen im Discourse-Kern:
[Admin-Hinweis] Eines Ihrer Themes oder Plugins muss aktualisiert werden, um bevorstehende Änderungen im Discourse-Kern zu unterstützen. (id:discourse.script-tag-discourse-plugin) Problem identifiziert: „Breadcrumb Links“.
Ich verwende Discourse Cloud, kann ich das lösen oder muss ich auf das Plugin-Update warten?
@manuel Auf GitHub ist mir aufgefallen, dass Sie zu dieser Komponente beigetragen haben. Ich hoffe, es ist in Ordnung, Sie hier zu erwähnen?
Ich bin sicher, dass mehr Leute diese gleiche Nachricht sehen:
[Admin Notice] Theme 'Breadcrumb Links' contains code which needs updating. (id:discourse.script-tag-discourse-plugin) (learn more)
Und der Learn More-Link leitet weiter zu:
Gibt es eine Chance, dass die Komponente aktualisiert wird?
Danke!
Ich habe gerade einen PR zur Behebung dieses Problems geöffnet, ich hoffe, die Mitwirkenden können ihn überprüfen und zusammenführen
Vielen Dank für das Teilen! Es funktioniert ohne die Warnmeldung.
Ich habe ein weiteres Problem, das ich hier erwähnt habe:
Für dieses Problem habe ich ChatGPT gefragt und es sagte (da ich kein Entwickler bin):
Das Problem liegt wahrscheinlich darin, wie Sie die topicId aus der URL extrahieren:
const topicId = url.split('/')[2];
Wenn Ihre URL komplexere Muster enthält (wie Titel mit Leerzeichen, Sonderzeichen oder nicht standardmäßige Slugs), wird dieser einfache Split nicht zuverlässig die richtige Topic-ID ermitteln.
/t/3ple-2015-2019-title/12345 haben die numerische Topic-ID am Ende, aber Ihr Code geht davon aus, dass die Topic-ID immer das 3. Segment ist./t/${topicId}.json), da Sie möglicherweise eine ungültige Topic-ID oder einen ungültigen Slug senden, was falsche oder Standard-Kategorieinformationen (wie “General”) zurückgibt.Verwenden Sie eine zuverlässigere Methode, um die Topic-ID aus der URL zu extrahieren:
Discourse-Topic-URLs sehen oft so aus: /t/{slug}/{id}, z. B.:
/t/3ple-2015-2019-title/12345
Hier ist 12345 die Topic-ID.
const topicId = url.split('/')[2];
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1]; // letztes Segment, das voraussichtlich die numerische ID ist
topicId eine Zahl ist:if (!/^\\d+$/.test(topicId)) {
console.error("Ungültige Topic-ID aus URL extrahiert:", topicId);
return; // Ausführung stoppen
}
updateBreadcrumbs wie folgt:if (url.includes('/t/')) {
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1];
if (!/^\\d+$/.test(topicId)) {
console.error("Ungültige Topic-ID aus URL extrahiert:", topicId);
return;
}
// Fahren Sie dann mit Ihren AJAX-Aufrufen mit topicId fort
}
Auf diese Weise erhalten Sie immer die numerische Topic-ID, unabhängig von komplexen oder mit Leerzeichen versehenen Titeln in der URL, und beheben so die Kategorie- und Pfadsuche für Breadcrumbs.
Könnten Sie das beheben?
Vielen Dank im Voraus 