Muchas gracias @manuel. He actualizado este componente con tu código (y he añadido algunos fragmentos de código más) para habilitar funcionalidades adicionales:
¡Hola! ¡Este componente es genial!
Solo hay un detalle que quizás sepas cómo arreglar.
El botón de retroceso desaparece al desplazarse hacia abajo (por favor, vea el video adjunto)… ¿es posible fijar/mantener el botón de retroceso en la parte superior de la pantalla para que permanezca visible incluso al desplazarse?
Contexto: la comunidad está incrustada (webview) en nuestra aplicación móvil.
Gracias @cristo por esa gran sugerencia que ahora se incluye como una configuración:
¡Gracias @denvergeeks! El botón ahora es fijo.
Pero, como puedes ver en el video adjunto, el botón no me devuelve al mismo punto en el desplazamiento en la pantalla de inicio.
¡Sí, porque es un botón de Inicio, no un botón Atrás!
¡Mi error! Pensé que era un botón de retroceso por la flecha.
@denvergeeks ¡gracias por aclarar! ¿Conoces algún componente que ofrezca un botón de retroceso?
No, no soy consciente de ningún TC existente que tenga (o incluya) un botón Atrás adecuado. Podría haber algo existente que lo incluya.
Pero reconozco la utilidad de tener un botón Atrás dentro de la navegación del sitio, así que crearé un TC separado que lo proporcione.
Quizás podrías buscar si existe algún tema o componente de tema existente que lo incluya. Encontrarlo podría acelerar mi proceso.
¡Genial! Investigaré y te haré saber mis hallazgos.
¡Gracias!
@denvergeeks Encontré un tema que podría ser útil:
Todavía no he encontrado ningún tema o componente existente que incluya un botón de retroceso.
Desafortunadamente, tengo el mismo problema en un iPhone 16 Pro Max.
Sí, puedo confirmar que apareció después de una actualización. Tengo este problema en mi teléfono Android.
¡Gracias @Aaron_Walsh y @cristo por informar! ¡Actualicen ahora y háganme saber sus resultados!
Confirmo el problema en el lado de Android. Ya se ha corregido y eliminado.
¡Arreglado en mi iPhone!
@denvergeeks ¡Impresionante! El botón de retroceso funciona en Android.
¡Muchas gracias!
Noté que no hay forma de decidir dónde van las migas de pan, lo cual sería genial. Por ejemplo, estoy usando los banners de categoría y me gustaría que las migas de pan estuvieran encima de ellos.
Se pierde un poco cuando está debajo.
¿Hay alguna posibilidad de cambiar esto?
Gracias
Acabo de notar algo que podría arreglarse (o al menos tener la opción de activarlo o desactivarlo). No creo que la última / deba estar ahí.
Así que sería solo Inicio / Discusión General en lugar de Inicio / Discusión General /
EDITAR:
Acabo de usar CSS para hacer eso, pero creo que podría ser el predeterminado. En caso de que alguien lo quiera:
/* Eliminar separador (contenido ::after) del último elemento de miga de pan */
.breadcrumbs li:last-child::after {
content: none;
}
Este es un pequeño ajuste, pero me parece que se ve mejor. Aumenta el margin-bottom a 1rem para darle más espacio para “respirar”, pero también lo centra cuando hay un banner (si tenemos que mantener esa posición en la página). Mira mi imagen anterior (el 0.5rem predeterminado) en comparación con el uso de 1rem:
Resultado final después de todos los ajustes CSS que hice:
CSS:
/* migas de pan - eliminar fondo y aumentar margin-bottom */
.breadcrumbs {
background-color: transparent !important;
margin-bottom: 1rem;
}
/* migas de pan - ocultar flecha hacia atrás del enlace Inicio */
.breadcrumbs__title .d-icon {
display: none;
}
/* migas de pan - eliminar separador (contenido ::after) del último elemento de miga de pan */
.breadcrumbs li:last-child::after {
content: none;
}
Hola, tengo una advertencia en mi foro debido a los próximos cambios en el núcleo de Discourse:
[Aviso de administrador] Uno de sus temas o plugins necesita ser actualizado para soportar los próximos cambios en el núcleo de Discourse. (id:discourse.script-tag-discourse-plugin) Problema identificado: “Breadcrumb Links”.
Estoy usando Discourse cloud, ¿puedo solucionar esto o tengo que esperar la actualización del plugin?
@manuel En GitHub noté que eres uno de los colaboradores de este componente, así que espero que esté bien mencionarte aquí.
Estoy seguro de que más personas están viendo este mismo mensaje:
[Aviso de administrador] El tema 'Breadcrumb Links' contiene código que necesita ser actualizado. (id:discourse.script-tag-discourse-plugin) (más información)
Y el Más información redirige a:
¿Hay alguna posibilidad de que el componente se actualice?
¡Gracias!
Acabo de abrir una PR solucionando este problema. Espero que los colaboradores puedan revisarla y fusionarla.
¡Gracias por compartir esto! Está funcionando sin el mensaje de advertencia.
Tengo otro problema que mencioné aquí:
Para ese problema, le pregunté a ChatGPT y me dijo (ya que no soy desarrollador):
El problema probablemente se deba a cómo extraes el topicId de la URL:
const topicId = url.split('/')[2];
Si tu URL contiene patrones más complejos (como títulos con espacios, caracteres especiales o slugs no estándar), esta simple división no obtendrá de manera confiable el ID de tema correcto.
/t/3ple-2015-2019-title/12345 tienen el ID de tema numérico al final, pero tu código asume que el ID de tema siempre es el tercer segmento./t/${topicId}.json) porque puedes estar enviando un ID de tema o slug inválido, devolviendo información de categoría incorrecta o predeterminada (como “General”).Utiliza una forma más confiable de extraer el ID de tema de la URL:
Las URLs de temas de Discourse a menudo se ven como /t/{slug}/{id}, por ejemplo:
/t/3ple-2015-2019-title/12345
Aquí, 12345 es el ID del tema.
const topicId = url.split('/')[2];
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1]; // último segmento, se espera que sea el id numérico
topicId sea un número:if (!/^\\d+$/.test(topicId)) {
console.error("ID de tema inválido extraído de la URL:", topicId);
return; // detiene la ejecución
}
updateBreadcrumbs de esta manera:if (url.includes('/t/')) {
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1];
if (!/^\\d+$/.test(topicId)) {
console.error("ID de tema inválido extraído de la URL:", topicId);
return;
}
// Luego continúa tus llamadas AJAX con topicId
}
De esta manera, siempre obtienes el ID de tema numérico independientemente de títulos complejos o con espacios en la URL, corrigiendo la búsqueda de la categoría y la ruta de las migas de pan.
¿Podrías arreglar eso?
Gracias de antemano 