¡Muy útil, muchas gracias!
He intentado usar este código pero no parece funcionar.
Puedo ver el breadcrumbsContainer y su fondo blanco, pero no genera las migas de pan dentro de él.
Lo he probado como un componente y directamente como parte del tema en “CSS/HTML personalizado”.
¿Alguna idea de lo que podría estar haciendo mal?
Sí @DogBite, la solución es agregar las etiquetas Script al principio y al final de header.html…
Al principio:
<script type="text/discourse-plugin" version="0.8">
Al final:
<script>
Así…
<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 me gusta
Aquí he implementado un componente temático de migas de pan (como enlaces) muy simple (donde la página de inicio no muestra migas de pan)… ¡se aceptan PRs!
Además (y esto es importante), actualmente solo funciona correctamente con Categorías; ¡no maneja Subcategorías!
Así se ve en una página de lista de categorías…
Así se ve en una página de tema…
3 Me gusta
1 me gusta
Investigando un poco más, se añadió un componente de migas de pan a Discourse a principios de este año: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. Actualmente solo se muestra en páginas seleccionadas de Administración.
Así que hice un componente de prueba para mostrar las migas de pan: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. La plantilla actual es:
<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>
Ahora hice una rama que usa el nuevo componente dbreadcrumbs: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. Eso haría la plantilla más concisa y, supongo, proporcionaría una mejor consistencia y accesibilidad:
<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>
Sin embargo, al usar DBreadcrumbsItem, el orden de la categoría padre y la subcategoría se mezclan en el componente renderizado. La categoría actual se inserta primero:
Me pregunto si se debe a ese comportamiento, indicado en el mensaje del commit?
- DBreadcrumbsItem - El componente que registra un LinkTo
para la ruta de las migas de pan. La ruta de las migas de pan
se mostrará según el orden en que se rendericen estos elementos en la página.