¶ Introduction
Hier entsteht ein kleines Tutorial für die Benutzung des Wikis.
Ich werde hier so paar Basics des Wikis einfügen, aber auch tiefere Themen wie Custom CSS oder Custom Skripte erklären bzw. zeigen. Gerne könnt ihr gerne dies erweitern, falls ihr Bereiche umständlich fandet.
Rechts sollte ein Inhaltsverzeichnis sein, dort könnt ihr dann zu den jeweiligen Themen springen.
¶ Basics
Das Interface sehr ihr, wenn ihr auf diesem Wiki seit. Hier aber nochmal als Screenshot:
¶ Globales
| Global Navigation | Das dauerhafte Navigations Menu. Wird auf jeder Seite angezeigt, meistens die wichtigen Seiten angezeigt |
| Globale Suche | Schnelle Suche von Seiten (keine Personen wie im alten Wiki) |
| "Create New Page" | Button um eine neue Seite zu erstellen |
| User Menu | User-spezifische Buttons wie: Profil, Admin, Logout |
¶ Pro Seite
| "Page Actions" | Liste aller Aktionen die auf der aktuellen Seite ausgeführt werden können: Editieren, Move, Löschen etc. |
| Breadcrumbs | Kompletter Pfad zur aktuellen Seite. Stellt die Ordnerstruktur da. |
| "Table of Contents" | Aktuelle Sektionen der Seite. Basierend auf den "Header" Tags der Seite |
| Page Tags | Tags, die der aktuellen Seite zugeordnet sind |
| Author | Anzeige des letzten Authors und der letzten Modifizierung der Seite |
| Social links | Teil- / Druck Links der Seite |
| Edit Page / Page Aktionen | Schnellaktionsmenü zum editieren oder verändern der aktuellen Seite |
¶ Neue Seite erstellen
Um eine neue Seite zu erstellen, klick auf den New Page-Button. Folgendes Dialogfenster kommt:
- Wähl die gewollte Sprache aus
- Den vollen Pfad der zuerstellenden Seite eingeben.
- Der Pfad sollte keine Leerzeichen(lieber -), keine Punkte und nur URL-safe Buchstaben enthalten
- KEIN extra / einfügen
- Man muss keine Ordner erstellen. Gib den vollen Pfad ein und Subordner werden automatisch erstellt.
Als Beispiel: Füruniverse/planets/earthwird automatisch ein universe und ein planets Subordner erstellt.
- Drück "Select" um weiter zu kommen.
¶ Editor auswählen
Wenn eine neue Seite erstellt wird, muss einer der folgenden Editor ausgewählt werden.
¶ Seiten Metadaten
Nachdem ein Editor ausgewählt wurde, müssen folgende Seiten Metadaten festgelegt werden:
Titel wäre wichtig, Beschreibung und Tags sind optional.
Zum Schluss auf OK klicken und die Seite kann editiert werden.
¶ Speichern
Die Seite ist jedoch noch nicht öffentlich. Erst wenn auf den Create-Button (oben rechts) geklickt wird, wird die Seite gespeichert und gerendert.
¶ Ordner Strukturen und Tags
Wiki.js hat keine "normale" Ordner-Struktur. Man muss keine Ordner erstellen, um neue Seiten zu erstellen. Wie oben beschrieben, gibt man den kompletten Pfad an und Wiki.js erstellt die Subordner für einen.
Die "normale" Ordner-Struktur ist jedoch immernoch verfügbar, jedoch nur, wenn Seiten erstellt oder bewegt werden.
¶ Tags
Tags sind dafür da, um Seiten zu kategorisieren und einfacherer ähnliche Seiten zu finden.
Es können mehrer Tags zu einer Seite hinzugefügt werden.
Beispiel:
Eine Seite über "Montreal", könnte die folgenden Tags haben cities, canada, north-america. Wenn jetzt nach canada oder cities gesucht wird, wird die Montreal-Seite angezeigt.
¶ Seiten-Management
¶ Erstellung einer Seite
Es gibt mehrere Wege eine Seite zu erstellen:
- Mit dem New Page Knopf
- Wenn ein Link zu einer bisher nicht-existierenden Seite geklickt wird
- Manuelles austippen des Pfades in die Adresszeile des Browsers
¶ Seite bearbeiten
Um eine Seite zu bearbeiten, muss lediglich der Stift Button unten rechts gedrückt werden. Außerdem kann über das Seitenmenü, oben rechts, der Edit-Modus gestartet werden.
¶ Namen-Restriktionen
Alle Einzelcharakter-Pfade sind reserviert für die Pfade von Wiki.js
| "a": Admin Bereich |
| "c": Kommentare |
| "e": Seiten Editor |
| "f": Asset Manager |
| "h": Seiten History |
| "i": Suchen nach Seiten anhand der ID |
| "p": User Profil |
| "s": Seiten Quelle |
| "t": Tags |
| "u": Upload Entpoint(API) |
| "w": Personelles Wiki |
| _assets |
| favicon |
| graphql |
| healthz |
| home (reserviert für die mainpage) |
| login |
| logout |
| register |
¶ Die verschiedenen Editoren:
Wenn eine Seite erstellt wird, kann einer der Editoren ausgewählt werden. Manche Leute präferieren Markdown um Content zu schreiben, manche eher den Visuellen Editor.
¶ Liste der Editoren
Reiner Text, gedacht für technische Dokumentationen. Dokumentation
Basic HTML-Editor
Es wird generell nicht empfohlen, diesen Editor für die Erstellung neuer Inhalte zu verwenden. Dieser Editor wird zur Verfügung gestellt, um vorhandene Inhalte aus älteren Systemen zu importieren, die nur in HTML vorliegen.
Ist die "De-factor" Syntax für Dokumentationen (wie zum Beispeil auf Github). Wiki.js unterstützt die volle CommonMark Spezifikation und hat dazu Features wie "Github Flavored Markdown Addons"
Der visuelle Editor ist perfekt für "non-technical" Users, welche es lieber mögen, direkt visuelle Representation zu haben, von dem was sie schreiben. Basiert auf der CKEditor 5 Software. Ich finde es sieht sehr nach einem Schreibprogramm aus.
¶ Konvertieren von einem Editor zu einem anderem:
Man kann den Editor ändern, indem man die "Convert" Aktion ausführt. Diese befindet sich bei "hovern" auf dem Stift beim Blitz oder über die "Page Actions" oben rechts. Dort öffnet sich dann folgendes Menü:
Wähle den favorisierten Editor aus und klicke auf Convert.
Achtung: Manchmal klappt es nicht 100% mit der Formattierung
¶ Custom Dinge:
¶ CSS
Wenn entweder Markdown oder raw-html als Editor ausgewählt wird, können HTML Tags wie <p> oder <img> genutzt werden. Da dies einfach HTML-Tags sind, können die auch eine Style Eigenschaft haben.
Dies geht entweder "Inline": <p style="color:green">test</p> oder über CSS-Klassen, welche über den "Page" Button festgelegt werden können. Dort existiert der "Styles" Tab, in dem standard CSS geschrieben werden kann. Diese müssen dann lediglich über den class Tag des HTML-Elements festgelegt werden.
¶ Javascript
Ähnlich wie beim CSS, kann auch Custom Javascript ausgeführt werden. Dies wird, wie auch CSS, über den Page Button, aber dann "Scripts" festgelegt. Dort kann alles mögliche mithilfe von Javascript gecodet werden. Ein Problem, welches mir persönlich aufkam. Manchmal findet document.getElementById(id) nicht direkt das Objekt. Fix dafür ist ein Reload der Seite
Code für diesen Button:
<script>
document.addEventListener("DOMContentLoaded", function() {
const btn = document.getElementById("countButton");
let count = 0;
btn.textContent = count;
btn.addEventListener("click", function() {
count++;
btn.textContent = count;
});
});
</script>