¶ Wiki.js Tipps
¶ Seiteneigenschaften
Über die Seiteneigenschaften kann man auch z.B. den Status, Veröffentlicht oder nicht einstellen.
Der Trick ist, dass man auf Label "Seite" klicken muss.
Dann kommt man in das Fenster.
Kleiner Film, der zeigt, was in Gruppen gesetzt werden muss, damit der User nicht veröffentlichte Seiten ansehen kann.
Wird hoffentlich intuitiver wenn die 3.0 Version erscheint.
bildschirmaufzeichnung_vom_2023-06-27_20-51-48.webm
¶ CSS global und seitenweise
Was auch eine Möglichkeit ist, folgenden Code in Administration -> Theme -> Code injection -> CSS eintragen:
.contents img {
display: block;
margin: 0 auto;
}
¶ CSS für nur eine Seite
Im Fenster "Seite" kann man im rechten Reiter auch CSS ergänzen.
Beispiele:
/* Text rechts neben dem Bild positionieren: */
.contents img {
float: left;
margin-right: 20px;
}
/* Text unterhalb des Bildes positionieren: */
.contents img {
display: block;
margin: 0 auto;
}
.contents p {
text-align: center;
margin-top: 10px;
}
Das kbd etwas pimpen:
kbd {
display: inline-block;
margin: 0 0.1em;
padding: 0.1em 0.6em;
color: #ffffff;
text-shadow: 0 1px 0 #000;
background-color: #004d00 !important;
border: 1px solid #999999;
border-radius: 3px;
box-shadow: 0 1px 0 rgb(12 13 14 / 25%), 0 0 0 2px #fff inset;
white-space: nowrap;
}
Das sieht dann so aus: Backspace
Wenn CSS in der Seite einfach nicht will, dann mit !important und generellen Tags probieren.
Z.B. bei Tabellen:
th {
background-color: #dedeee!important
}
¶ Bild links, Text daneben
Das folgende CSS in die Seite unter Style reinpacken:
.contents img.align-left {
float: left;
margin: 5px 20px 10px 0;
max-width: 40%;
}
.contents p {
text-align: justify;
}
Und wenn der weitere Text unter das Bild soll, obwohl noch Platz ist, direkt im Markdown:
<div style="clear: both;"></div>
¶ Images
In meinem Blog mit serendipity ist es ganz einfach den beschreibenden Text zum Bild rechts oder links floaten zu lassen.
Das geht mit etwas Fummelei auch im Markdown des wiki.js.
Beispiel Bild links, Beschreibung rechts:
Hier wurde der Screenshot mit
{.align-left}
<br>
<br> Die Anzahl der <br> an die Menge des Textes anpassen
<br>
ergänzt. Dadurch beginnt die Beschreibung in etwa in der Mitte vom Bild.
Wichtig ist aber noch der folgende Code, damit das Floating beendet wird:
<div style="clear:both;"></div>
Dieser Text ist jetzt immer unter dem Foto. Selbstredend funktioniert es auch mit:
{.align-right}
und
{.align-center}
Update: Eine bessere Methode, um Bilder zu positionieren bietet wiki.js von Hause aus, komischerweise aber beim Bilderupload...
¶ Markdown
Quelltext mit Syntax-Highlighting
Es handelt sich um 3 Backticks oder auch ~~~ mit anschließendem Syntax-Schlüsselwort.
Die 3
~bevorzuge ich, weil sie beim Tippen mehr auffallen – die Backticks sehen dem Punkt und geraden Ticks zu ähnlich.
Unterstützte Sprachen u.a.: bash, C, C++, JavaScript, Java, HTML, Python, SQL, XML, YAML
#!/bin/bash
# Kommentar
for running_vm in $running; do
if [[ "$running_vm" == *"$vm_name"* ]]; then
original_name="$running_vm"
break
fi
done
¶ Anker und interne Links
Wiki.js bietet zwei Methoden, um Anker zu setzen:
Methode 1 – Automatisch (ohne Doppelpunkt am Ende):
Überschriften (H1, H2, H3) werden automatisch als Anker verwendet. Der Anker-Name entspricht der Überschrift in Kleinbuchstaben, Leerzeichen werden durch - ersetzt.
Beispiel: Die Überschrift # Mein Abschnitt ergibt den Anker #mein-abschnitt.
Hinweis: Endet eine Überschrift mit einem Doppelpunkt (
:), funktioniert der automatische Anker nicht. In diesem Fall Doppelpunkt weglassen oder Methode 2 verwenden.
Methode 2 – Manuell mit Custom-ID:
## Meine Überschrift {#sprungmarke-ohne-leerzeichen-alles-klein}
Der Anker hat geschweifte Klammern
{}und sollte auf eine bereits vorhandene Überschrift gesetzt werden.
Link zum Anker setzen:
[Linktext](#sprungmarke-ohne-leerzeichen-alles-klein)
¶ Ein paar UTF-8 Symbole, Smilies, Buttons etc.
:fire: :robot: :skull:
Ergibt: 
Referenz: https://www.webfx.com/tools/emoji-cheat-sheet/
Man kann aber einfach UTF-8 direkt benutzen:
| Symbol | Beschreibung |
|---|---|
| 〰 | Wellen-Strich |
| 👎 | Daumen runter |
| 👍 | Daumen hoch |
| ✅ | Häkchen-Button |
| ❎ | Grüne Kreuzmarkierung |
| ❌ | Rote Kreuzmarkierung |
| ‼️ | Doppeltes Ausrufezeichen |
| ❗ | Ausrufezeichen |
| ❓ | Fragezeichen |
| ✔️ | Richtig |
| ⚠️ | Warnung |
| 🟡 | Gelber Kreis |
| 🟢 | Grüner Kreis |
| 🔴 | Roter Kreis |
Noch mehr Icons: https://emojis.wiki
¶ Keyboard-Symbole
italic ist im kbd Tag möglich.
| Symbol | Beschreibung | HTML Code |
|---|---|---|
| ⇧ | Shift | <kbd>⇧</kbd> |
| ⌫ | Delete | <kbd>⌫</kbd> |
| ⏏ | Enter | <kbd>⏏</kbd> |
| Alt | Option/Alt | <kbd>^Alt^</kbd> |
| Ctrl | Control (Ctrl) | <kbd>^Ctrl^</kbd> |
| ⇤ | Tab | <kbd>⇤</kbd> |
| ESC | Esc | <kbd>^ESC^</kbd> |
| ← | Left Arrow | <kbd>←</kbd> |
| ↑ | Up Arrow | <kbd>↑</kbd> |
| → | Right Arrow | <kbd>→</kbd> |
| ↓ | Down Arrow | <kbd>↓</kbd> |
| ␣ | Space | <kbd>␣</kbd> |
| F1 | F1 | <kbd>F1</kbd> |
| F2 | F2 | <kbd>F2</kbd> |
| F3 | F3 | <kbd>F3</kbd> |
| F4 | F4 | <kbd>F4</kbd> |
| F5 | F5 | <kbd>F5</kbd> |
| F6 | F6 | <kbd>F6</kbd> |
| F7 | F7 | <kbd>F7</kbd> |
| F8 | F8 | <kbd>F8</kbd> |
| F9 | F9 | <kbd>F9</kbd> |
| F10 | F10 | <kbd>F10</kbd> |
| F11 | F11 | <kbd>F11</kbd> |
| F12 | F12 | <kbd>F12</kbd> |
¶ Mermaid Diagramme
Ein gar nicht extra erwähntes Diagramm-Tool: mermaid – geht einfach so:
Seiten-Formfeed provozieren für den Druck.
In dem betreffenden Wiki-Beitrag an der gewünschten Stelle den HTML-Code eintragen:
<div style="break-before: page;"></div>
Das hat keinen Einfluss auf die Wiki-Seite, sondern nur fürs Drucken.
Drucken kann man in wiki.js in der Ansicht ganz rechts unten.
Damit bekommt man eine Vorschau und kann dann im Dialog die Optionen einstellen. Im unteren Bereich kann beidseitiger Druck eingestellt werden (dazu muss man nach unten scrollen) 
¶ Export von Wiki.js Markdown zu MediaWiki
pandoc --from gfm --to mediawiki funktioniert fast perfekt.
Achtung: Die Option "eingebetteter Code" mit Backticks `` wird im MediaWiki nicht so schön umgesetzt und muss nachbearbeitet werden.
Mein Tipp: Darauf verzichten, wenn man zu MediaWiki exportieren will.
wikijs.md ist der Markdown-Source aus dem Editor mit Ctrl+A, Ctrl+C, lokal gespeichert.
pandoc --from gfm --to mediawiki --output gfm.md wikijs.md
Mit folgendem Einzeiler den Output ins Clipboard verfrachten:
xclip -selection clipboard < gfm.md
Die Arbeitsersparnis ist enorm!
¶ Weitere Möglichkeit
wget https://daucity.de/de/docker/gitlab
cat gitlab | pandoc -f html -t mediawiki -o mediawiki-from_html.md
cat mediawiki-from_html.md | xclip -selection clipboard
Mit cat datei | xsel --clipboard geht es auch.
¶ convertwiki.sh
Da ich das nun mal öfter brauche, habe ich mir ein kleines Script geschrieben, das etwas fehlertoleranter ist:
#!/bin/bash
# convertwiki.sh
# bed@zockertown.de
# (c) GPL 3
# $Revision: 1.4 $
# Nimmt als ersten Parameter die Quelle aus wikijs entgegen
# und schreibt es im mediawiki format in das clipboard
if ! command -v pandoc &> /dev/null
then
echo "Pandoc ist nicht installiert. Bitte installieren Sie Pandoc, um dieses Skript zu verwenden."
exit 1
fi
if ! command -v xclip &> /dev/null
then
echo "xclip ist nicht installiert. Bitte installieren Sie xclip, um dieses Skript zu verwenden."
exit 1
fi
if [ $# -ne 1 ]
then
echo "Usage:"
echo "$0 wikijs-Source-Seite"
exit
fi
pandoc --from gfm --to mediawiki --output mediawiki.wiki "$1"
xclip -selection clipboard < mediawiki.wiki
echo "Fertig."
echo "Die konvertierte Seite ist jetzt im Clipboard und als mediawiki.wiki gespeichert."
Online geht es auch: https://pandoc.org/try/
¶ Javascript in Wiki.js integrieren
Siehe meine Seite disk-medium-error.
Damit auch z.B. onClick() funktioniert:
Sanitize HTML muss ausgeschaltet werden, sonst wird z.B. onClick() zwar im Editor angezeigt, aber im Quelltext der Seite ausgefiltert.
Scheinbar geht es aber, wenn man document.getElementById('berechnenButton').addEventListener('click', berechneBlocknummer); im Script benutzt.
Nein, stimmt nicht – wenn die Seite bearbeitet wird, tritt der Sanitize-Effekt wieder ein. Also Sanitize muss derzeit verhindert werden. Vielleicht wird das in einem späteren Release ausgespart.