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:

Noch mehr Icons: https://emojis.wiki

Keyboard-Symbole

italic ist im kbd Tag möglich.

Mermaid Diagramme

Ein gar nicht extra erwähntes Diagramm-Tool: mermaid – geht einfach so:

graph TD
    P("USB Platte")==>N[Noch nie für backup verwendet];
    P==>B;
    N==>L[Als LUKS DEVICE initialisieren];
    B[Bereits für backup vorbereitet] ==>D[diskmount.sh starten];
    L==>D;
    D-->backup2usb;
    backup2usb -->D;
    style P fill:#666,stroke:#f66,stroke-width:2px,color:#fff
    style backup2usb fill:#666,stroke-width:2px,color:#fff

Drucken

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.