09Portfolio
Topic icons — Themen-Icons für NodeBB-Foren
Ein Plugin für NodeBB 4, mit dem der Autor ein Icon für sein Thema wählt: Frage, Anleitung, Problem, Ankündigung und weitere. Dadurch ist die Themenliste im wirelab-Forum auf einen Blick lesbar, am Computer wie am Smartphone.
In Zahlen
- Eingebaute Icons
- 8
- Maximale Icon-Größe (KB)
- 256
- Automatisierte Tests
- 39
Aufgabe
In der Themenliste eines Forums sieht alles ähnlich aus: Titel, Avatar des Autors und ein paar Zahlen. Die Frage eines Einsteigers, eine Anleitung und eine Ankündigung lassen sich ohne Lesen der Titel kaum unterscheiden. NodeBB erlaubt zwar, einem Thema ein Vorschaubild hinzuzufügen, doch dann lädt jeder ein eigenes Bild hoch, die Liste wird schnell uneinheitlich, und der Administrator hat keine Kontrolle darüber.
Vorgehen
Die Icons stammen aus einer Bibliothek, die der Administrator pflegt: Er lädt sie hoch, benennt sie, legt die Reihenfolge fest und bestimmt, in welchen Kategorien sie verfügbar sind. Zum Start sind acht Icons eingebaut. Beim Anlegen eines Themas klickt der Autor neben dem Titel auf „Icon wählen“, wählt ein Icon aus dem Raster und sieht sofort, wie das Thema in der Liste aussehen wird. Der Administrator legt fest, wer Icons wählen darf (alle, eine Gruppe oder nur Moderatoren), und jede Kategorie kann ein Standard-Icon haben. Der Server prüft jede Auswahl erneut, auch bei Themen, die auf Freigabe warten, sodass sich weder ein Icon außerhalb der Kategorie setzen noch eines in einem fremden Thema ändern lässt. Nutzer laden keine eigenen Dateien hoch, und Dateien des Administrators werden auf Typ, Inhalt und Größe geprüft. Das Plugin legt keine eigenen Tabellen an, funktioniert mit jeder von NodeBB unterstützten Datenbank, und die Themenliste braucht keine zusätzlichen Datenbankabfragen.
Ergebnis
Version 1.0.0 runs on forum.wirelab.pl with the wirelab theme, where the icon takes the avatar’s place in the topic list and the author’s avatar becomes a small badge in the corner. With the Harmony theme the icon sits in front of the title. The plugin is translated into Polish and English, and 39 automated tests check, among other things, icon choice, file uploads and caching. The code is open source under the MIT licence, on npm and GitHub as nodebb-plugin-topic-icons. Next on the list are markers on the icon for pinned, locked and solved topics.
So funktioniert es
01
Auswahl beim Verfassen
Die Schaltfläche „Icon wählen“ neben dem Titel öffnet ein Raster der in der gewählten Kategorie verfügbaren Icons, mit Vorschau der Themenzeile. Sie funktioniert per Tastatur, die Wahl bleibt im Entwurf erhalten, und das Icon lässt sich später durch Bearbeiten des ersten Beitrags ändern.
02
Eine Bibliothek unter Kontrolle des Administrators
Der Administrator lädt Icons in den Formaten PNG, WebP und SVG hoch, benennt sie um und ordnet sie neu, weist sie Kategorien zu, deaktiviert oder löscht sie. Jede Kategorie und das ganze Forum können ein Standard-Icon haben. Ein gelöschtes Icon verschwindet samt Datei aus den Themen, die es verwendet haben.
03
Berechtigungen werden auf dem Server geprüft
Das Icon muss existieren, aktiviert und in der jeweiligen Kategorie verfügbar sein, und der Autor muss es wählen dürfen. Ändern kann es nur der Autor des Themas oder ein Moderator. Ein Thema, das in eine Kategorie verschoben wird, in der sein Icon nicht verfügbar ist, erhält das Standard-Icon der neuen Kategorie.
04
Auf Computer und Smartphone
Das Icon steht neben dem Titel in der Themenliste und im Themenkopf, und der Auswahldialog füllt auf dem Smartphone den ganzen Bildschirm. Der Name des Icons wird in der Sprache des Lesenden zur Bildbeschreibung, sodass auch Screenreader wissen, was es bedeutet.
05
Code und Installation
Das Plugin ist quelloffen unter der MIT-Lizenz. Code und Meldungen: github.com/nairdaweb/nodebb-plugin-topic-icons. npm-Paket: npmjs.com/package/nodebb-plugin-topic-icons. Im Einsatz sehen Sie es im Forum forum.wirelab.pl.