Il problema qui è legato a uno spazio limitato e non a una limitazione tecnica.
come notato qui
Immagina la tua esperienza come utente: se apri un menu su un sito web, appare così.
Saresti sopraffatto, per dirla in modo leggero. Soprattutto perché quel menu non ha una funzione di ricerca per aiutarti a restringere i risultati.
Quindi, cerchiamo di trovare un punto di mezzo tra ciò che vuoi fare e ciò che gli utenti vogliono sperimentare. Come facciamo? Mostriamo un numero limitato di gruppi di tag e indichiamo che ce ne sono altri da vedere. Quindi, qualcosa del genere:
Allora, come si fa?
Ecco il codice:
<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" }, [
"Tag ",
moreCount ? `(${moreCount} altri)...` : ""
]),
content
]),
api.h("hr")
]);
});
}
} catch (error) {
console.error("C'è un problema nel componente del tema dei tag a hamburger");
console.error(error);
}
})
.catch(console.error);
</script>
Questo va inserito nella scheda header del tuo tema. Puoi modificare
const MAX_TAGS_TO_SHOW = 20;
in alto con il numero di tag che desideri mostrare.
Poi tutto ciò che devi aggiungere è un po’ di CSS per stilizzare i link. Ecco qualcosa di base per iniziare.
.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);
}
}
}
}
Nota che il JavaScript sopra rispetterà lo stile dei tag impostato nelle impostazioni del tuo sito. Inoltre, se il tuo sito si affida molto ai tag, probabilmente non hai bisogno di avere le categorie visibili in quel menu. Nasconderle aiuterebbe a ridurre la confusione dell’utente.
Inoltre, se aggiungi una sezione tag espansa, allora questo link diventa ridondante.
Quindi, nascondiamoli con qualcosa del genere.
.panel-body {
.category-links,
.categories-separator,
.widget-link[href="/tags"] {
display: none;
}
}
Infine, come notato qui:
Questi dati non vengono passati al client per impostazione predefinita a meno che non si visiti /tags, quindi il codice sopra aggiunge una richiesta aggiuntiva sulla home page (viene eseguita solo una volta per visita). Discourse cerca di mantenere le cose molto semplici, quindi, a meno che i dati non siano necessari, non li caricherà per impostazione predefinita.
Non vedo che questo venga aggiunto al core di Discourse a breve. Quindi una richiesta extra è praticamente l’unica opzione qui, a meno che tu non voglia scrivere un plugin che viene eseguito sul server.
