Bessere Navigation für (strukturierte) Tags

[ncaming215 (nate c.)]

Hallo zusammen,

ich versuche, dafür zu sorgen, dass Tags in der Navigation strukturierter sichtbar werden – besonders für diejenigen von uns, die auf Eltern > Kinder angewiesen sind. Wir haben etwas mehr als 40 Tags, daher ist eine strukturierte Navigation für Tags (und hier meine kleine Plattformpredigt: sie werden von so vielen Foren viel zu wenig genutzt, obwohl Discourse darin glänzt!) ziemlich wichtig.

Da es unsinnig wäre, mehrere Menüs über die native Discourse-Navigation zu legen, ist mein Vorschlag (ich denke?) nicht allzu dramatisch. Ich habe das hier grob als Idee skizziert …

Wenn so etwas existiert, habe ich es nicht finden können. @Johanis Komponente kommt dem am nächsten, ist aber leider nicht strukturiert.

Ich würde mich über jedes Feedback freuen, auch wenn es heißt: „Das ergibt keinen Sinn" oder „Es hat mir 10 Sekunden gekostet, das auf GitHub zu finden, du Neueinsteiger."

Danke!

[IAmGav (Gavin Perch)]

Angesichts der Anzahl an parent > child-Tags, die einige Seiten haben können, werden nicht alle dort Platz finden.

Zum Beispiel: Schau dir die Tags von Meta an.

https://meta.discourse.org/tags

[ncaming215 (nate c.)]

Ich kann dem zustimmen – ich würde argumentieren, dass das Beispiel von [tip-toeing] meta nicht der beste Weg ist, Tags zu verwenden – wobei es ohnehin keine offensichtliche Best Practice für Tags gibt. Aber selbst als bloße Option für diejenigen unter uns, die einen kontrollierten Wortschatz bei Tags haben und sich stark auf Tags verlassen (viel mehr als auf Kategorien), könnte das nützlich sein. Mein Beispiel war rein genau das … ich vermute, andere haben vielleicht eine bessere Idee!

[manuel (Manuel Kostka)]

Warum nicht einfach die Tags-Seite verwenden? Sie könnten den Link zu dieser Seite auf verschiedene Weise hervorheben. Die Seite selbst unterstützt standardmäßig eine Strukturierung nach Gruppen.

Anschließend können Sie benutzerdefinierte Stile hinzufügen, entweder für die Tags:

Oder gestalten Sie das Layout der gesamten Seite, um eine spezifischere Darstellung zu erzielen.

[ncaming215 (nate c.)]

@manuel

Warum nicht einfach die Tag-Seite verwenden? Du könntest den Link zu dieser Seite auf verschiedene Weise hervorheben. Die Seite selbst unterstützt standardmäßig eine Strukturierung nach Gruppen.

Anschließend könntest du benutzerdefinierte Stile hinzufügen, entweder für die Tags:

Oder das Layout der gesamten Seite anpassen, um eine spezifischere Darstellung zu erhalten.

Ja, ich liebe die Tag-Seite – und die Flexibilität der Tag-Seite. Sie ist großartig. Aber die Tag-Seite ist nicht überall vorhanden, während ein Menü eine dynamische, allgegenwärtige Navigation bieten würde, genau wie bei Kategorien.

Ich vermute, dass es einige von uns gibt, die sich ähnlich wie ich viel stärker auf Tags als auf Kategorien verlassen. Das mag kontraintuitiv erscheinen, macht aber in bestimmten Kontexten Sinn. Selbst das im Beitrag Tags verwendete Auto-Beispiel würde von etwas Ähnlichem profitieren. Wenn es beispielsweise für Auto-Enthusiasten ist, könnten sie es bevorzugen, zwischen Tags („Ford vs Ferrari") zu wechseln, anstatt zwischen Kategorien.

Andererseits seid ihr vielleicht noch nicht soweit. Aber eure Kinder werden es lieben.

[manuel (Manuel Kostka)]

Ich würde mich freuen, wenn du eine dynamischere Lösung findest! Aber ich vermute, das würde eine erhebliche Menge an Programmierung erfordern, wenn du etwas willst, das du nicht manuell warten musst. Bis dahin würde ich einfach den Link zur Tag-Seite noch auffälliger gestalten

Ein weiterer Aspekt, der Tags meiner Erfahrung nach viel benutzerfreundlicher macht, sind korrekte Tag-Banner. Ich habe eine einfache Komponente als Ergänzung zur Tag-Banner-Komponente entwickelt, mit der du Beschreibungen zu Tags hinzufügen kannst: https://github.com/nolosb/discourse-tag-banners-descriptions

[JonathanShaw]

Eine etwas andere Richtung: Ich habe die Tag-Darstellung in Themen und in Themenlisten so angepasst, dass sie die Hierarchie wie ein Breadcrumb anzeigt: „Eltern > Kind" statt „Kind, Eltern".

Meine Lösung war etwas spezifisch für die Website und eher eine Workaround-Lösung, aber das Endergebnis gefällt mir.

Das größte Hindernis für das, was ich getan habe, und für das, was du tun möchtest, ist, dass Discourse die Tag-Gruppen nicht vorlädt, sodass sie nicht verfügbar sind, wenn man sie benötigt, ohne eine API-Anfrage zu stellen. Ich denke, das sollte so gehandhabt werden wie bei der Kategorie-Struktur, die vorab geladen wird.

[Johani (Joe)]

Das Problem liegt hier in einer Platzbegrenzung und nicht in einer technischen Einschränkung.

@ncaming215

Wir haben etwas mehr als 40 Tags

wie hier erwähnt

@IAmGav

bei der Menge an parent > child-Tags, die einige Sites haben können, passen nicht alle dort hinein

Stellen Sie sich Ihre Erfahrung als Benutzer vor: Wenn Sie auf einer Website ein Menü öffnen, sieht es so aus.

Sie wären, gelinde gesagt, überwältigt. Besonders da dieses Menü keine Suchfunktion hat, um die Ergebnisse einzugrenzen.

Lassen Sie uns also versuchen, einen Mittelweg zwischen dem, was Sie tun möchten, und dem, was Benutzer erleben wollen, zu finden. Wie machen wir das? Wir zeigen eine begrenzte Anzahl von Tag-Gruppen an und geben an, dass es weitere gibt, die man ansehen kann. Also etwas wie das:

Wie geht man das an?

Hier ist der Code:

<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} weitere)...` : ""
              ]),
              content
            ]),
            api.h("hr")
          ]);
        });
      }
    } catch (error) {
      console.error("Es gibt ein Problem mit der Hamburger-Tags-Theme-Komponente");
      console.error(error);
    }
  })
  .catch(console.error);

</script>

Dieser Code gehört in den Reiter header Ihres Themes. Sie können

const MAX_TAGS_TO_SHOW = 20;

oben in die Anzahl der Tags ändern, die Sie anzeigen möchten.

Dann müssen Sie nur noch ein wenig CSS hinzufügen, um die Links zu gestalten. Hier ist etwas Einfaches, um Ihnen den Einstieg zu erleichtern.

.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);
      }
    }
  }
}

Beachten Sie, dass das obige JavaScript den in Ihren Site-Einstellungen festgelegten Tag-Stil berücksichtigt. Wenn Ihre Site stark auf Tags angewiesen ist, müssen Sie die Kategorien in diesem Menü wahrscheinlich nicht sichtbar machen. Das Ausblenden würde helfen, Verwirrung bei den Benutzern zu vermeiden.

Wenn Sie zudem einen erweiterten Tag-Bereich hinzufügen, wird dieser Link überflüssig.

Lassen Sie uns diese also mit etwas wie diesem ausblenden.

.panel-body {
  .category-links,
  .categories-separator,
  .widget-link[href="/tags"] {
    display: none;
  }
}

Schließlich, wie hier erwähnt:

@JonathanShaw

Das größte Hindernis für das, was ich getan habe, und für das, was Sie tun wollen, ist, dass Discourse die Tag-Gruppen nicht vorlädt, sodass sie nicht verfügbar sind, wenn Sie sie benötigen, ohne eine API-Anfrage zu stellen

Diese Daten werden dem Client standardmäßig nicht übergeben, es sei denn, Sie besuchen /tags. Daher fügt der obige Code eine zusätzliche Anfrage auf der Startseite hinzu (wird nur einmal pro Besuch ausgeführt). Discourse versucht, die Dinge sehr einfach zu halten, daher wird es Daten standardmäßig nicht laden, es sei denn, sie sind notwendig.

Ich sehe nicht, dass dies in absehbarer Zeit in den Discourse-Kern aufgenommen wird. Eine zusätzliche Anfrage ist also praktisch Ihre einzige Wahl, es sei denn, Sie möchten ein Plugin schreiben, das auf dem Server läuft.

[ncaming215 (nate c.)]

Danke, Joe, das ist fantastisch!

Ein paar kurze Anmerkungen … Ich habe gesehen, dass deine ursprüngliche Antwort nach Tag-Gruppen (statt nach Unter-Tag) abgerufen wurde. Gibt es dafür einen bestimmten Grund? Ich konnte die Unter-Tags nicht zum Vorschein bringen, hatte aber mit deiner ersten Antwort, die die Tag-Gruppe verwendet, Erfolg.

Das einzige Problem ist, dass die Tags für nicht angemeldete Benutzer nicht sichtbar sind. Ich nehme an, das liegt an der API? Gibt es einen Umweg?

Ansonsten ist das ein Segen – ich kann mir gut vorstellen, dass andere diesen Code nutzen werden. Vielen Dank!

[Johani (Joe)]

Ich habe eine Theme-Komponente erstellt, die dies etwas erleichtern sollte. Sie können wählen zwischen

1. verschachtelten Tag-Gruppen
2. verschachtelten erlaubten Kategori-Tags
3. flachen Top-Tags

Weitere Details hier:

Discourse hamburger tags

This is a theme component that will allow you to add tags to the hamburger menu easily. The component comes with three display options. Samples: Nested tag groups [nested tag groups] Nested allowed category tags [nested allowed category tags] Flat top tags (across the site) [flat top tags] Settings: The component comes with seven settings. [theme settings] The hamburger_menu_tags_mode allows you to set the view mode you prefer. top tags: shows a flat list of the top tags used o…

[ncaming215 (nate c.)]

@Johani

Ich habe eine Theme-Komponente erstellt, die dies etwas erleichtern sollte. Du kannst wählen zwischen:

1. verschachtelten Tag-Gruppen
2. verschachtelten erlaubten Kategorietags
3. flachen Haupttags

Weitere Details findest du hier:
Discourse hamburger tags

Ich schlage Joe als Schutzpatron von Discourse vor.

[IAmGav (Gavin Perch)]

hahaha, ich war gerade dabei, auch einen für meinen Schulungskurs zu erstellen.

Verdammt.

Trotzdem danke.