¶ 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. https://daucity.de/daucity/seitenlabel.png
Kleiner Film, der zeigt, was in Gruppen gesetzt werden muss, dass 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
Was auch eine Möglichkeit st,
folgenden Code in Administration -> Theme -> Code injection -> CSS
eintragen
.contents img {
display: block;
margin: 0 auto;
}
¶ css für nur eine Seite
anpassen.
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; /* Abstand zwischen Bild und Text anpassen */
}
/* Text unterhalb des Bildes positionieren: */
.contents img {
display: block;
margin: 0 auto;
}
.contents p {
text-align: center; /* Optional: Zentriert den Text unter dem Bild */
margin-top: 10px; /* Abstand zwischen Bild und Text anpassen */
}
/* Text über oder unter dem Bild zentrieren: */
.contents img {
display: block;
margin: 0 auto;
}
Das kbd etwas pimpen
kbd {
display: inline-block;
margin: 0 0.1em;
padding: 0.1em 0.6em;
color: #ffffff; /* Weißer Text für besseren Kontrast */
text-shadow: 0 1px 0 #000; /* Ein leichter schwarzer Schatten für bessere Lesbarkeit */
background-color: #004d00 !important; /* Dunkelgrüner Hintergrund */
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
}
¶ Markdown
¶ interne links und Anker
## Markdown {#sprungmarke-ohne-leerzeichen-alles-klein}
Der Anker sollte auf eine bereits vorhandene Level 2 Überschrift gesetzt werden
Der Anker hat geschweifte Klammern "{}"
hier
etwas
Abstand
damit
man
die
Wirkung
erkennt
Wenn
etwas
weiter
unten
also
dorthin
verwiesen
werden
soll, dann
einfach mit einem link
[einem link](#sprungmarke-ohne-leerzeichen-alles-klein)
Quelltext mit Syntax Hilighting
Es handelt sich um 3 Backticks oder auch ~~~ mit anschliessenden Syntax Schlüsselwort
Die 3 ~ bevorzuge ich, weil sie beim Tippen mehr auffallen, die backticks sehen dem punkt und geraden Ticks zu ähnlich
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
Beispiel 2
cat fping.sh
fping -aAnqs -g 192.168.100.0/24 -r 1|tee netz-übersicht.txt
¶ 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 Anzshl der <br> an die Mege 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 style="clear:both;"></div>
Dieser Text ist jetzt immer unter dem Foto.
Selbstredend funktioniert es auch mit
{.align-right}
und
{.align-center}
Also schöne Sache
Update, eine bessere Methode, um Bilder zu positionieren bietet wiki.js
von Hause aus, komischerweise aber beim Bilderupload...
Ein gar nicht extra erwähntes Diagramm Tool: mermaid
Geht einfach so.
italic ist im kbd tag möglich
¶ Ein paar UTF8 Symbole Smilies Buttons etc.
:fire: :robot:
Ergibt
https://www.webfx.com/tools/emoji-cheat-sheet/
Man kann aber einfach UTF8 Code benutzen.
〰 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
¶ Keyboard Symbole
| 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> |
Noch mehr icons
https://emojis.wiki
¶ Export von Wikijs Markdown zu mediawiki
pandoc --from gfm --to mediawiki
funktioniert fast perfekt.
Achtung: die Option "eingebetteter Code" mit Back-tics `` 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 STRG-A STRG-C, lokal gespeichert.
pandoc --from gfm --to mediawiki --output gfm.md wikijs.md
Mit folgenden 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
Da ich das nun mal öfter brauche, habe ich mir ein kleines Script geschrieben, das etwas fehlertoleranter ist.
¶ convertwiki.sh
#!/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
# Überprüfen, ob xclip installiert ist
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."
ps: Online geht es auch: https://pandoc.org/try/
¶ Javascript in wikijs integrieren.
Siehe meine Seite disk-medium-error
Und 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. D.h. scheinbar will das Klicken auf einen Button einfach nicht klappen.
- Scheinbar geht es aber, wenn man
document.getElementById('berechnenButton').addEventListener('click', berechneBlocknummer);
im Script benutzt.
Nein, stimmt nicht, wenn nämlich die Seite bearbeitet wird, tritt der Sanitize Effekt wieder ein. Also Sanitize muß derzeit verhindert werden. Vielleicht wird das in einem späteren Release ausgespart.