El problema aquí es una limitación de espacio y no una limitación técnica.
como se indica aquí
Imagina tu experiencia como usuario; si abres un menú en un sitio web, se ve así.
Te sentirías abrumado, por decir lo menos. Especialmente porque ese menú no tiene una función de búsqueda para ayudarte a reducir los resultados.
Así que, intentemos encontrar un punto medio entre lo que quieres hacer y lo que los usuarios quieren experimentar. ¿Cómo lo hacemos? Mostramos un número limitado de grupos de etiquetas e indicamos que hay más para ver. Entonces, algo como esto:
Entonces, ¿cómo se hace eso?
Aquí está el código:
<script type="text/discourse-plugin" version="0.8">
const MAX_TAGS_TO_SHOW = 20;
const Category = require("discourse/models/category").default;
const siteSettings = api.container.lookup("site-settings:main");
const tagStyle = siteSettings.tag_style;
const getNumberOfTags = (tags, categoryTagsGroups) => {
let count = 0;
count = tags.length;
for (const categoryTagsGroup of categoryTagsGroups) {
count = count + categoryTagsGroup.tags.length;
}
return count;
};
fetch("/tags.json")
.then(response => response.json())
.then(data => {
try {
const tags = data.tags;
const hasCategoryTagGroups = data.extras?.categories;
if (hasCategoryTagGroups) {
const categoryTagsGroups = data.extras.categories;
let moreCount = getNumberOfTags(tags, categoryTagsGroups);
let visibleCount = 0;
const content = [];
for (const categoryTagsGroup of categoryTagsGroups) {
const category = Category.findById(categoryTagsGroup.id);
const name = category.name;
const childTags = categoryTagsGroup.tags;
const childTagNodes = [];
childTags.forEach((tag, index) => {
if (visibleCount <= MAX_TAGS_TO_SHOW) {
childTagNodes.push(
api.h(
"li.tag-link-item",
api.h(
`a.discourse-tag.tag-link.${tagStyle}`,
{ href: `/tag/${tag.text}` },
tag.text
)
)
);
moreCount--;
visibleCount++;
}
});
if (childTagNodes.length) {
content.push([
api.h("li.heading", api.h("span", name)),
childTagNodes
]);
}
}
api.decorateWidget("menu-links:after", helper => {
if (helper.attrs.name !== "general-links") return;
return api.h("div.clearfix", [
api.h("ul.tag-links", [
api.h("a.categories-link", { href: "/tags" }, [
"Etiquetas ",
moreCount ? `(${moreCount} más)...` : ""
]),
content
]),
api.h("hr")
]);
});
}
} catch (error) {
console.error("Hay un problema en el componente del tema de etiquetas de menú hamburguesa");
console.error(error);
}
})
.catch(console.error);
</script>
Esto va en la pestaña header de tu tema. Puedes cambiar
const MAX_TAGS_TO_SHOW = 20;
en la parte superior por el número de etiquetas que deseas mostrar.
Luego, todo lo que necesitas agregar es un poco de CSS para dar estilo a los enlaces. Aquí hay algo básico para comenzar.
.tag-links {
.heading {
padding: 0.25em 0.5em;
}
.tag-link-item {
background-color: transparent;
display: inline-flex;
align-items: center;
padding: 0.25em 0.5em;
width: 50%;
box-sizing: border-box;
.tag-link {
display: inline-flex;
width: 100%;
&:hover {
color: var(--primary);
}
}
}
}
Ten en cuenta que el JavaScript anterior respetará el estilo de etiqueta establecido en la configuración de tu sitio. Además, si tu sitio depende mucho de las etiquetas, probablemente no necesites tener las categorías visibles en ese menú. Ocultarlas ayudaría a reducir la confusión del usuario.
Además, si agregas una sección de etiquetas expandida, entonces este enlace se vuelve redundante.
Así que, ocultémoslos con algo como esto.
.panel-body {
.category-links,
.categories-separator,
.widget-link[href="/tags"] {
display: none;
}
}
Finalmente, como se indica aquí:
Estos datos no se pasan al cliente de forma predeterminada a menos que visites /tags, por lo que el código anterior agrega una solicitud adicional en la página de inicio (se ejecuta solo una vez por visita). Discourse intenta mantener las cosas muy simples, por lo que, a menos que los datos sean necesarios, no los cargará de forma predeterminada.
No veo que esto se agregue al núcleo de Discourse en un futuro cercano. Por lo tanto, una solicitud adicional es prácticamente tu única opción aquí a menos que quieras escribir un plugin que se ejecute en el servidor.
