i4Werkzeug Demo

• Dateien (z.B. PDF-Folien) sollen über NFS bereitgestellt werden, da diese häufig mit Skriptunterstützung generiert und platziert werden — ein händischer Upload in der WordPress-Adminweboberfläche soll verhindert werden. Zusätzlich müssen häufiger Listen mit Verweise auf solche Dateien angepasst werden, diese sollen ebenfalls via NFS eingebunden werden können
• Lehrveranstaltungswebseiten eines Semesters sollen persistent bleiben, d.h. auch nach dem Ablauf des Semesters noch abrufbar sein. Es wird jedes neue Semester eine Kopie der Seiten erstellt, die Verlinkungen sollen dabei automatisch angepasst werden
• Unter Umständen müssen ganze Verzeichnisbäume integriert werden, beispielsweise via Doxygen generierte Dokumentationen. Das soll auch automatisch vom NFS gehen, alle HTML Dokumente sollen in die Webseite integriert werden

Übersicht

• i4nav erlaubt die Anpassung der (automatisch generierten) Seitennavigationsleiste
• i4semester zur dynamischen Anzeige des Semesternamens
• i4link genieriert Verweise aus relativen Pfadangaben
• i4univis erlaubt flexibleres Einbetten von UnivIS-Inhalte als das RRZE-Pendant
• i4include erlaubt das einbetten von externen Inhalten
• i4list erstellt eine WordPress-typische Folien oder Aufgabenübersicht aus einer Vorgabe in einem einfachen und übersichtlichen Format
• i4code verhindert die Interpretation von Shortcodes (wie es für diese Demo-Seite gebraucht)
• i4responsivetable ist eine Klasse, welche eine einfache responsive, d.h. mobilfreundliche, Tabellendarstellung anbietet
• i4hidden-text versteckt Inhalte (wie das RRZE-Pendant, zeigt sie jedoch angemeldeten Nutzern (mit einem visuellen Hinweis) an

Navigation

Verwendung

Der Shortcode kann wie folgt verwendet werden:

[i4nav name="fooo" (optionale Attribute)](Optinaler Text)[/i4nav]

Die unterstützten Attribute für diesen Shortcode sind:

• name: String, zugehöriger im Menü angezeigtes Label/Bezeichner
• order: Integer, Bestimmt die Position des Eintrags im Menü. Interagiert passend mit den Einträgen “Reihenfolge” regulärer Seiten und besitzt dieselbe Semantik (kleinere Zahl = frühere Position, negative Zahlen möglich, Standardwert: 0. Einträge gleicher order werden gemäß Auftrittsreihenfolge in der jeweiligen Seite angezeigt).
• href: Linkziel, für externe Links. Wechselseitiger Ausschluss mit anchor.
• anchor: Für seitenlokaler Anker, bestimmt den Wert des id Attributs des generierten Ankers. Wechselseitiger Ausschluss mit href.

Ein gültiger Shortcode besitzt immer ein name Feld sowie entweder einen href oder einen anchor Eintrag. Der optionale Text kann genutzt werden um bei anchor-Einträgen den Ankerkörper zu spezifizieren, etwa:

<h2>[i4nav anchor="aufgaben" name="Aufgaben"]Übungsaufgaben[/i4nav]</h2>

Führt in der gerenderten Seite zu:

<h2><a id="aufgaben">Übungsaufgaben</a></h2>

Einschränkungen

Da i4nav-Shortcodes zum Speicherzeitpunkt einer Seite ausgewertet werden können diese Einträge weder aus inkludierten Dateien übernommen noch durch andere Shortcodes (wie etwa die Funktionalitäten in i4list oder hidden-text) modifiziert oder verborgen werden.

Beispiele

<h2>[i4nav]Übersicht[/i4nav]</h2>
...
<h2>[i4nav anchor="i4nav" name="Seitennavigation"]Navigation[/i4nav]</h2>
...
[i4nav href="https://gitlab.cs.fau.de/i4/infra/wordpress-i4werkzeug/" name="GitLab Repo" order="98"][/i4nav]
[i4nav href=".." name="zur Semesterübersicht" order="98"][/i4nav]
...
<h2>[i4nav anchor="i4semester"]Semesterangaben[/i4nav]</h2>
...
<h2>[i4nav anchor="i4link"]Links[/i4nav]</h2>
...
<h2>[i4nav anchor="i4univis"]UnivIS[/i4nav]</h2>
...
<h2>[i4nav anchor="i4include" name="Einbettung aus dem NFS"]Include[/i4nav]</h2>
...
<h2>[i4nav anchor="i4list" name="Listen (für Folien & Aufgaben)"]List[/i4nav]</h2>
...
<h2 id="i4code">Code</h2>
[i4nav href="#i4code" name="Quelltextangaben"][/i4nav]

Semesterangaben

Verwendung

• delta gibt die Jahre (auch halbe Jahre möglich) an, um vom gegebenen Semester abzuweichen — nützlich um z.B. auf das kommende Semester zu verweisen (durch Angabe von +0.5)
• format gibt an, wie der Semestername ausgegeben werden soll. Mögliche Parameter für das Attribut sind:
  • long für komplett ausgeschrieben (Wintersemester 2021/22)
  • short für die (unverwerfliche) Kurzform (WiSe 2021/22)
  • abbr für die ganz kurze Form (WS21)
  • link für eine klein geschriebene kurze Form (ws21)
  • und, standardmäßig (bei keiner oder ungültiger Angabe): Die Kurzform mit voller Jahreszahl (WS 2021/22)

Beispiele

Links

Verwendung

• course Angabe einer Lehrveranstaltung (Kurzform, welche auch dem Link entspricht, z.B. bs für Betriebssysteme). Es wird nicht geprüft ob die Veranstaltung auch tatsächlich (bereits) existiert.
• semester explizite Angabe des Semesters (z.B. WS21) oder current für das gemäß heutigem Datums laufenden Semesters. Wird dieser Angabe weggelassen, so wird versucht aus der Seitenhierarchie das aktuelle Semester zu bekommen (eine Unterseite vom Lehre / Sommmersemester 2022 verweist automatisch auf Kurse dieses Semester), andernfalls wird auf das aktuelle Semester umgeschwenkt (z.B. bei einer Unterseite von Forschung).
• name gibt den anzuzeigenden Text des Links an. Ohne dieses Attribut wird schlicht der Pfad (oder, falls leer, Link) angezeigt.
• extern ist ein boolsches Attribut, welches, wenn wahr, nicht auf WordPress, sondern auf Dateien im NFS (/proj/i4wp/extern/) verweist und sich somit z.B. für Folien im PDF-Format eignet. Dies ist unkompliziert möglich, da die WordPress-Seiten-Adressen und die Pfade im NFS bei Lehrveranstaltungen identisch sind.
• full ist ein boolsches Attribut, welches, wenn wahr, die volle URL inklusive Protokoll und Domain erstellt.
• raw ist ein boolsches Attribut, welches, wenn wahr, dafür sorgt, dass nicht ein Hyperlink erstellt wird, sondern nur die Zieladresse ausgegeben wird (entsprechend wird in diesem Fall das Attribut name ignoriert).

Beispiele

UnivIS

Verwendung

<univis>
  search thesis advisor="Bernhard Heinloth" status="finished"
  show compact sort=date lang=en codeset=utf8
</univis>

[i4univis search="thesis" advisor="Bernhard Heinloth" status="finished" show="compact" sort="date" lang="en" codeset="utf8"][/i4univis]

• codeset wird bei Fehlen des Attributs automatisch auf utf8 gesetzt.
• sem kann unter Angabe des Wertes auto anhand der Seitenhierarchie automatisch das Semester wählen. Dies ist für die Lehrveranstaltungen (im Zusammenspiel mit dem semesterweisen Kopieren der WordPress-Seiten) nützlich.

Beispiele

<h4>Supervised Theses</h4>
[i4univis search="thesis" department="Lehrstuhl für Informatik 4" show="compact" advisor="Heinloth,Bernhard" sort="date" lang="en"][/i4univis]
<h4>Own Thesis</h4>
[i4univis search="thesis" show="compact" title="Automatic Tailoring of the Multi-Purpose Linux Operating System on Embedded Devices" lang="en"][/i4univis]

Include

Benutzungshinweise

• Eingeblendete Inhalte sind nicht über die WordPress-Suche auffindbar
• WordPress wendet das FAU-TechFak-Template-Stylesheet an, welches nur schwer zu neutralisieren ist — CSS bietet jenseits vom Überschreiben keine geeigneten Möglichkeiten um temporär Regeln zu deaktivieren . Entsprechend sollte nicht gegen, sondern mit den vorgegeben Styles gearbeitet werden, auch um einen einheitlichen Webauftritt zu gewährleisten!
• WordPress führt weiterhin (unabhängig vom Attribut shortcodes) seine Standard-Textersetzungen durch, so wird zum Beispiel ein newline-Zeichen zum einem HTML-br-Element umgewandelt. Entsprechend muss der einzubettende Inhalt etwas angepasst werden
• Komplexe HTML Konstruktionen sollten vermieden werden, da sie meist das responsive Design zerstören. Das trifft allerdings auch auf weniger komplexe Elemente wie Tabellen zu, welche ab einer gewissen Größe besser anders dargestellt werden sollten (z.B. via Accordions.
• Insbesondere die fortgeschrittene Variante mit dynamic ist etwas komplexer und ressourcenhungriger — bitte nur verwenden, wenn die Technik dahinter wirklich verstanden wurde. Andernfalls ist mindestens ein Kuchen fällig!
• Die WordPress Vorschaufunktion ist bei aktiviertem dynamic nicht verfügbar!
• Die erlaubten Dateien sind (anhand ihrer Dateiendung) beschränkt, diese sind in den Konstanten EXT_EMBED sowie EXT_BINARY im Pluginquelltext definiert (und sollten die üblichen relevanten Typen abdecken).
• Der Pfad muss auf eine erlaubte (EXT_EMBED) Datei (nicht Ordner) zeigen!

Verwendung

• course Angabe einer Lehrveranstaltung (Kurzform, welche auch dem Link entspricht, z.B. bs für Betriebssysteme). Es wird nicht geprüft ob die Veranstaltung oder der dazugehörige Pfad auch tatsächlich (bereits) existiert.
• semester explizite Angabe des Semesters (z.B. WS21) oder current für das gemäß heutigem Datums laufenden Semesters. Wird dieser Angabe weggelassen, so wird versucht aus der Seitenhierarchie das aktuelle Semester zu bekommen (eine Unterseite vom Lehre / Sommmersemester 2022 verweist automatisch auf Kurse dieses Semester), andernfalls wird auf das aktuelle Semester umgeschwenkt (z.B. bei einer Unterseite von Forschung).
• dynamic ist ein boolsches Attribut, welches, wenn wahr, dynamisch weitere Inhalte aus dem Arbeitsordner des angegeben Pfads einbetten kann — dies können sowohl weitere HTML-Datei sein (die in die WordPress-Seite eingebettet werden) oder Inhalte wie Bilder. Um dies technisch zu ermöglichen, wird die URL der WordPress-Seite beim Aufruf umgeschrieben, wodurch auch nur maximal ein dynamischer i4include Shortcode pro WordPress-Seite erlaubt ist.
• shortcodes ist ein boolsches Attribut, welches, wenn wahr, die interpretation von Shortcodes im Zieldokument erlaubt. Bitte beachten: Rekursive dynamische i4include Shortcodes sind natürlich nicht erlaubt!
• showerrors ist ein boolsches Attribut, welches, wenn wahr, eine sprechende Fehlermeldung anzeigt. Dies kann für die Fehlersuche bei der Seitenerstellung genutzt werden, ohne den Parameter wird lediglich Einbettung fehlgeschlagen bei einem Fehler angezeigt (die Details werden dann im Webserver geschrieben).
• raw verhindert, dass Leerzeilen (also doppelte Zeilenenden, \n\n) vom WordPress-internen wpautop automatisch zu einem Absatz konvertiert werden (Standard: false, d.h. \n\n wird zu <p>...</p>).

Beispiele

List

[collapsibles]
[i4hidden-text end="2021-10-17"]
[collapse title="1. Vorlesung" name="vl-1"]
Vorlesung am Montag, 18. Oktober 2021

<i>Bitte an 3G Nachweis denken!</i>
[accordion]
[accordion-item title="Organisation" name="vl-1-1"]
<a href="[i4link]vl1a.pdf[/i4link]">Folie zur Organisation</a>
[/accordion-item]
[accordion-item title="Einführung" name="vl-1-2"]
<a href="[i4link]vl1b.pdf[/i4link]">Folie zur Einführung</a>
[/accordion-item]
[/accordion]
[/collapse]
[/i4hidden-text]
[i4hidden-text end="2021-10-24"]
[collapse title="2. Vorlesung" name="vl-2"]
Vorlesung am Montag, 25. Oktober 2021
...
[/collapse]
[/i4hidden-text]
[/collapsibles]

[i4list name="Vorlesung" showdate=true uncover=1]
2021-10-18 1. Vorlesung

*Bitte an 3G Nachweis denken!*

## Organisation
[Folie zur Organisation](vl1a.pdf)

## Einführung
[Folie zur Einführung](vl1b.pdf)


2021-10-25 2. Vorlesung
...
[/i4list]

• name Der Name für die Veranstaltung, wird für internes ID-Feld verwendet.
• showdate ist ein boolsches Attribut, welches, wenn wahr, bei Einträgen mit Datumsnotation zuerst den namen gefolgt von einem lesbaren Datum in der Form Wochentag, Tag. Monat Jahr ausgibt.
• shortcodes ist ein boolsches Attribut, wenn wahr, die frühzeitige Evaluation von Shortcodes (z.B. von i4include) durchführt und das Ergebnis bei der Interpretation der Markupsprache berücksichtigt. Ohne Angabe dieses Attributs werden Shortcodes lediglich im Nachgang ausgewertet.
• uncover blendet, falls angegben, den Eintrag die angegbenen Anzahl an Tagen vor der Veranstaltung ein. So bedeutet uncover=2, dass der Eintrag 2 Tage vor dem angegebenen Datum sichtbar sein soll. Für angemeldete Nutzer ist der Eintrag weiterhin jederzeit sichtbar!
• load steuert, ob die Collapsibles eingeklappt oder ausgeklappt sein sollen. Unterstützte Werte sind none (default, alles eingeklappt), all bzw. open (alles ausgeklappt) und last (die Elemente mit dem aktuellsten, sichtbaren Datum werden ausgeklappt).

[i4list]

# Markdown Codes

[absoluter Link](https://www4.cs.fau.de/Lehre/SS21/V_BST/Evaluation/SS13_bst_v.pdf)
[relativer Link](../bst/evaluation/SS13_bst_v.pdf)

Ich wollte mal __unterstreichen__, dass das ziemlich **fett** und voll *schräg* ist!

---

Einkaufsliste:
 * Eier
 * Schmalz
 * Zucker
 * Salz
 * Milch
 * Mehl
 * Safran

---

 1. Foo
 2. Bar
    Baz
 3. usw

# Videos
Es reicht einfach die URL einzufügen, und schon wird ein Video daraus
https://www.fau.tv/clip/id/36104

[/i4list]

Code

[i4code][i4semester][/i4semester][/i4code]

Responsive Tabellen

1) Header

<table class="i4responsivetable" style="
            --colheader1: 'Kapitel:';
            --colheader2: 'Thema:';
            --colheader3: 'Datum:';
            --colheader4: 'Folien:';
        ">
<thead>
	<tr>
		<th>Kapitel</th>
		<th>Thema</th>
		<th>Datum</th>
		<th>Folien</th>
	</tr>
</thead>
<!-- ... -->
</table>

2) Tabellenkörper

<tbody>
	<tr>
		<td>1</td>
		<td>Organisation</td>
		<td>25.04.​2022</td>
		<td>
			<p><a href="...">1x1</a>, <a href="...">2x2</a>, <a href="...">animiert</a></p>
		</td>
	</tr>
	<tr><!-- ... --></tr>
	<!-- ... -->
</tbody>

3) Optional: Abschnitte

<tr class="part_number">
	<td>3</td>
	<td colspan="3">Abschnitt: Grundlagen</td>
</tr>

Beispiel

Hidden-Text

[i4hidden-text end="2020-01-01"]Aufgeblendet[/i4hidden-text]

[i4hidden-text end="2099-01-01"]Versteckt[/i4hidden-text]