O problema aqui é uma limitação de espaço e não uma limitação técnica.
como observado aqui
Imagine sua experiência como usuário; se você abrir um menu em um site, ele se parece com isto.
Você ficaria sobrecarregado, para dizer o mínimo. Especialmente porque esse menu não tem uma função de pesquisa para ajudar a filtrar os resultados.
Então, vamos tentar encontrar o meio-termo entre o que você quer fazer e o que os usuários querem experimentar. Como fazemos isso? Mostramos um número limitado de grupos de tags e indicamos que há mais para ver. Então, algo assim:
Então, como você faz isso?
Aqui está o 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" }, [
"Tags ",
moreCount ? `(${moreCount} mais)...` : ""
]),
content
]),
api.h("hr")
]);
});
}
} catch (error) {
console.error("Há um problema no componente do tema de tags do menu hambúrguer");
console.error(error);
}
})
.catch(console.error);
</script>
Isso vai na aba header do seu tema. Você pode alterar
const MAX_TAGS_TO_SHOW = 20;
no topo para o número de tags que deseja mostrar.
Depois, tudo o que você precisa adicionar é um pouco de CSS para estilizar os links. Aqui está algo básico para começar.
.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);
}
}
}
}
Note que o JavaScript acima respeitará o estilo de tag definido nas configurações do seu site. Além disso, se o seu site depende muito de tags, provavelmente você não precisa ter as categorias visíveis nesse menu. Ocultá-las ajudaria a reduzir a confusão do usuário.
Também, se você adicionar uma seção expandida de tags, então esse link se torna redundante.
Então, vamos escondê-los com algo assim.
.panel-body {
.category-links,
.categories-separator,
.widget-link[href="/tags"] {
display: none;
}
}
Finalmente, como observado aqui:
Esses dados não são passados para o cliente por padrão, a menos que você visite /tags, então o código acima adiciona uma solicitação adicional na página inicial (executa apenas uma vez por visita). O Discourse tenta manter as coisas muito simples, então, a menos que os dados sejam necessários, eles não serão carregados por padrão.
Não vejo isso sendo adicionado ao núcleo do Discourse tão cedo. Portanto, uma solicitação extra é praticamente sua única opção aqui, a menos que você queira escrever um plugin que seja executado no servidor.
