He buscado sobre este tema pero no encuentro ninguna solución que funcione.
¿Cómo agrego un simple breadcrumb básico que muestre categorías y subcategorías?
Por ejemplo:
Inicio / Charlas Técnicas / WordPress
Quiero agregarlo justo debajo de la Navegación Superior.
¿No es eso una especie de miga de pan? ¿Qué preguntas, más específicamente? ¿Tienes alguna maqueta, quizás?
Esto es probablemente lo que @asugar tenía en mente.
Hola @asugar. 
¿Podrías explicar un poco más a qué te refieres? Nosotros llamamos a la ayuda de navegación de categorías y etiquetas “breadcrumbs” (migas de pan); @Canapin las resalta en su captura de pantalla.
Normalmente mencionaría mostrar una captura de pantalla y marcar cuándo te gustaría que estuvieran, y luego trabajaríamos a partir de ahí, pero primero tengo otra observación:
Creo que si añadieras eso a cada página, esencialmente mostrarías múltiples menús de navegación idénticos, y muy cerca unos de otros.
Como alternativa, ¿hay algo que podamos hacer con la navegación de breadcrumbs existente para que funcione en tu sitio? 
También vale la pena aclarar el significado de “breadcrumbs” (migas de pan). He estado en numerosas conversaciones donde dos partes querían decir cosas diferentes:
@asugar, ¿a qué tipo de breadcrumbs te refieres?
No debería adivinar qué espera obtener @asugar, pero quizás similar a todas las demás páginas web — y WordPress usa principalmente: un navigational breadcrumb (migas de pan de navegación) construido usando categorías.
Pero Discourse solo tiene una construcción de dos niveles de profundidad, por lo que solo puede ser inicio - categoría - subcategoría (claro, también podría haber un número de página, pero eso es inútil y supongo que casi imposible de construir).
Por lo tanto, un breadcrumb (migas de pan) no aporta nada más que ocupar espacio.
Hola a todos. @Jag
Es posible, lo que todos intentaban decir es que puede haber una solución alternativa diferente a lo que estás pidiendo, y se preguntaban si te interesaría. Dicho esto, es posible pero no de forma nativa. Tendrías que diseñar o crear algo personalizado para ello. Ejemplos, donde se ha creado algo similar, son:
Enlaces de navegación superior personalizados - tema - Discourse Meta y Enlaces de encabezado personalizados - tema - Discourse Meta
Eso es navegación/menú y ya lo tengo. Las migas de pan no son navegación/menú. Quiero migas de pan.
Entiendo, por eso usé la palabra “similar”, son similares en el sentido de que la implementación o el desarrollo es similar, no exactamente lo mismo o parecido, sino similar o debería decir comparable.
Lo compartí o mencioné que eran similares porque sentí que podría ser útil ver que algo técnicamente similar es posible en Discourse.
Dado que se ha establecido que esto actualmente no es posible en Discourse sin algo personalizado, es posible que necesites crear un tema de Marketplace para ello.
Esa es una ruta de navegación típica que se encuentra en cualquier software de foro, la anterior es de vBulletin. De esto es de lo que estaba hablando.
El menú es efectivamente una ruta de navegación (ya que muestra la categoría y subcategoría, en las páginas de categoría y subcategoría), así que creo que podrías cambiarlo de usar menús desplegables a usar hipervínculos simples a la categoría o subcategoría actual. Apuesto a que cualquiera que sepa escribir un plugin podría hacer eso.
En la parte superior de las páginas de temas, cuando te desplazas hacia abajo, ya se muestra la categoría y subcategoría (y etiquetas), así que tal vez ya estés contento con eso. Me imagino que un autor de plugins podría moverlos a una parte diferente de la pantalla por ti.
Si pagas por esto y lo dejas disponible gratuitamente, podría usarlo…
Ojalá ya existiera un plugin, ¿alguien lo conoce?
¿Alguien ha podido resolver el problema de mostrar las migas de pan clásicas en la página?
Puede que no sea la mejor manera de hacerlo, pero esto nos funcionó:
header.html o plugin separado:
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Función auxiliar para restablecer el contenedor de migas de pan
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// Si está en la página de inicio
if (url === '/') {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="TU INICIO">
<i class="home">INICIO</i>
</a>
</li>
<li class="breadcrumb-item active">
Comunidad
</li>
`);
} else {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="TU INICIO">
<i class="home">INICIO</i>
</a>
</li>
<li class="breadcrumb-item">
<a href="/">Comunidad</a>
</li>
`);
}
};
resetBreadcrumbs();
if (url.includes('/c/')) {
// Si está en una página de categoría
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 al obtener los detalles de la categoría", error);
}
});
} else if (url.includes('/t/')) {
// Si está en una página de tema
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;
// Ahora, obtenga el nombre de la categoría usando el ID de la categoría
$.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 al obtener los detalles de la categoría para el tema", error);
}
});
}
},
error: function(error) {
console.error("Error al obtener los detalles del tema", 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('SVG DE INICIO');;
background-repeat: no-repeat;
height: 24px;
width: 32px;
top: -20px;
visibility: visible;
}
&:hover {
&::before {
background-image: url('SVG DE INICIO EN HOVER');;
}
}
}
a {
text-decoration: none;
color: #006BB4;
&:hover {
text-decoration: underline;
color: #0056b3;
}
}
&.active {
color: #6c757d;
}
}
}
En nuestra plantilla after_header.html:
<div id="breadcrumbsContainer"></div>
Para aquellos que quieran ver cómo se ve:
(HOME se reemplazará por un SVG por defecto, modifiqué el CSS)
Algunas partes de la ruta de navegación se generan lentamente después de una consulta ajax.
Además, cuando abrimos un tema, el contenido no se desplaza hacia arriba por defecto.
Muy bien. Espero que después de algunas actualizaciones entre en el núcleo.
¡Me encantaría tener esto!
¿Hay alguna opción para esto o necesito involucrar a programadores?
Si quieres un componente fiable, necesita el trabajo del desarrollador.
No recomendaría usar el que se comparte en este tema.
¡Gracias por tu respuesta!
Contrataré a un desarrollador para que me ayude con esto, pero ¿podrías decirme cuáles son los principales problemas con ese código?
¡Muchas gracias!
No soy un desarrollador y si alguien conoce los componentes de Discourse mejor que yo, eso aportaría mejores respuestas que las mías
Veo 2 puntos principales:
Las llamadas AJAX para devolver datos están muy, muy poco optimizadas. Estoy bastante seguro de que puedes hacer un componente así sin hacer ninguna solicitud de este tipo. Hacen que todo sea lento y que el breadcrumb se rellene con retraso.
El componente casi no utiliza la API JS de Discourse, que probablemente puede devolver los datos que necesitamos y decorar/insertar una plantilla de la manera correcta en lugar de inyectar manualmente código HTML en el DOM.
