Shortcodes

Shortcodes sind eine Erweiterung von Hugo mit denen komplexe HTML-Befehle über einen einfachen Befehl aufgerufen werden (ähnlich einem Makro in C). Shortcodes haben folgende Notation: 

{% shortcode-name [parameter1] ... [parameter n] %}
Bitte beachten
Shortcodes werden in diesem Dokument mit einer geschweiften Klammer {% shortcode %} dargestellt, da sie ja sonst vom Interpreter übersetzt würden und nicht darstellbar wären. In Ihrem Markdown-Dokument müssen Sie aber immer zwei geschweifte Klammern hintereinander verwenden. Ein Beispiel können Sie in der Datei content/index.md sehen.

Raumaufteilung

Hintergrund
Damit das Template den zur Verfügung stehenden Raum auf verschiedenen Bildschirmgrössen sinnvoll aufteilen kann, müssen Sie die grobe Raumaufteilung vorgeben. Dies passiert durch die Definition von Zeilen und Spalten.

Es wird immer zuerst die Zeile (Row) definiert und innerhalb dieser dann die Spalten (Col). Das Template unterstützt derzeit bis zu drei Spalten vertikal nebeneinander. Dies sollte für die meisten Bildschirmgrössen ausreichend sein.

Wenn die vorhandene Bildschirmbreite für zwei oder mehrere nebeneinander liegende Spalten nicht mehr ausreicht (z.B. auf einem Handy) wird der Inhalt der Spalten einer Zeile untereinander angeordnet (von links nach rechts). Sie können dies ganz einfach ausprobieren, indem Sie die Breite Ihres Browserfensters verkleinern. 
{% row %}
{% col 1 %}
    Einspaltig, Zeile über die ganze Breite
{% /col %}
{% /row %}

{% row %}
{% col 2 %}
    Zweispaltig (Spalte 1), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 2 %}
    Zweispaltig (Spalte 2), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 2 %}
    Zweispaltig (Spalte 1), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 2 %}
    Zweispaltig (Spalte 2), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 3 %}
    Dreispaltig (Spalte 1), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 3 %}
    Dreispaltig (Spalte 2), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 3 %}
    Dreispaltig (Spalte 3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 3 %}
    Dreispaltig (Spalte 1), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 3 %}
    Dreispaltig (Spalte 2), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 3 %}
    Dreispaltig (Spalte 3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 3 %}
    Dreispaltig (Spalte 1), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 3 %}
    Dreispaltig (Spalte 2), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 3 %}
    Dreispaltig (Spalte 3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 2-3 %}
    Zweispaltig asymetrisch (Spalte 1 Breite 2/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 1-3 %}
    Zweispaltig asymetrisch (Spalte 2 Breite 1/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 2-3 %}
    Zweispaltig asymetrisch (Spalte 1 Breite 2/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 1-3 %}
    Zweispaltig asymetrisch (Spalte 2 Breite 1/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 2-3 %}
    Zweispaltig asymetrisch (Spalte 1 Breite 1/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 1-3 %}
    Zweispaltig asymetrisch (Spalte 2 Breite 2/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

{% row %}
{% col 2-3 %}
    Zweispaltig asymetrisch (Spalte 1 Breite 1/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% col 1-3 %}
    Zweispaltig asymetrisch (Spalte 2 Breite 2/3), Spalten werden je nach Bildschirmgrösse nebeneinander oder untereinander dargestellt
{% /col %}
{% /row %}

Boxen

Gelbe Box
{% panel type="yellow" heading="Gelbe Box" %}
    Dies ist der Inhalt der gelben Box
{% /panel %}
Grüne Box
{% panel type="green" heading="Grüne Box" %}
    Dies ist der Inhalt der grünen Box
{% /panel %}
Rote Box
{% panel type="red" heading="Rote Box" %}
    Dies ist der Inhalt der roten Box
{% /panel %}
Primary Box
{% panel type="primary" heading="Primary Box" %}
    Dies ist der Inhalt der primary Box
{% /panel %}
Info Box
{% panel type="info" heading="Info Box" %}
    Dies ist der Inhalt der Info Box
{% /panel %}
Warning Box
{% panel type="warning" heading="Warning Box" %}
    Dies ist der Inhalt der Warning Box
{% /panel %}

Wells

{% well %}
    Dies ist der Inhalt des Wells
{% /well %}

{% well %}
    Dies ist der Inhalt des Wells
{% /well %}

{% well %}
    Dies ist der Inhalt des Wells
{% /well %}

Tabellen

So sieht es aus
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Max column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
HTML-Code
<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th></th>
                <th>
                    Extra small devices
                    <small>Phones (<768px)</small>
                </th>
                <th>
                    Small devices
                    <small>Tablets (≥768px)</small>
                </th>
                <th>
                    Medium devices
                    <small>Desktops (≥992px)</small>
                </th>
                <th>
                    Large devices
                    <small>Desktops (≥1200px)</small>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Grid behavior</th>
                <td>Horizontal at all times</td>
                <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
            </tr>
            <tr>
                <th>Max container width</th>
                <td>None (auto)</td>
                <td>750px</td>
                <td>970px</td>
                <td>1170px</td>
            </tr>
            <tr>
                <th>Class prefix</th>
                <td>
                    <code>.col-xs-</code>
                </td>
                <td>
                    <code>.col-sm-</code>
                </td>
                <td>
                    <code>.col-md-</code>
                </td>
                <td>
                    <code>.col-lg-</code>
                </td>
            </tr>
            <tr>
                <th># of columns</th>
                <td colspan="4">12</td>
            </tr>
            <tr>
                <th>Max column width</th>
                <td class="text-muted">Auto</td>
                <td>60px</td>
                <td>78px</td>
                <td>95px</td>
            </tr>
            <tr>
                <th>Gutter width</th>
                <td colspan="4">30px (15px on each side of a column)</td>
            </tr>
            <tr>
                <th>Nestable</th>
                <td colspan="4">Yes</td>
            </tr>
            <tr>
                <th>Offsets</th>
                <td colspan="4">Yes</td>
            </tr>
            <tr>
                <th>Column ordering</th>
                <td colspan="4">Yes</td>
            </tr>
        </tbody>
    </table>
</div>

Tab-Pane

So sieht es aus
Arten
Erscheinungsformen
Computerviren
HTML-Code
<ul class="nav nav-tabs">
    <li class="active"><a href="#arten" data-toggle="tab">Arten</a></li>
    <li><a href="#erscheinungsformen" data-toggle="tab">Erscheinungsformen</a></li>
    <li><a href="#computerviren" data-toggle="tab">Computerviren</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="arten"> 
        Arten
    </div>
    <div class="tab-pane fade in" id="erscheinungsformen">
        Erscheinungsformen
    </div>
    <div class="tab-pane fade in" id="computerviren">
        Computerviren
    </div>
</div>

Akkordion

So sieht es aus

Schlüsselmanagement

  • Standard legt kein Schlüsselmanagement fest
  • „Out-of-Band“ Schlüsselverteilung erforderlich
  • Schlüssellängen
  • Aber selbst mit ausreichend langen Schlüsseln wäre WEP nicht sicher

Verschlüsselung

  • RC4 ist Stromchiffre, d.h. der selbe Schlüssel sollte nie wiederholt werden
  • Wiederverwendung des Keystream (bei gleichem IV)

Traffic Injection

  • Known-Plaintext Angriff: Mallet kennt M und C: C = RC4(IV,KBSS) ⊕ (M,CRC(M))
  • Damit kann Mallet den Key Stream berechnen: RC4(IV,KBSS) = C ⊕ (M, CRC(M))
Shortcode
{% accordion name="accordion" %}

{% accordion-item parent="accordion" name="sm" title="Schlüsselmanagement" %}
* Standard legt kein Schlüsselmanagement fest
* „Out-of-Band“ Schlüsselverteilung erforderlich
* Schlüssellängen
* Aber selbst mit ausreichend langen Schlüsseln wäre WEP nicht sicher
{% /accordion-item %}

{% accordion-item parent="accordion" name="vs" title="Verschlüsselung" %}
* RC4 ist Stromchiffre, d.h. der selbe Schlüssel sollte nie wiederholt werden
* Wiederverwendung des Keystream (bei gleichem IV)
{% /accordion-item %}

{% accordion-item parent="accordion" name="ti" title="Traffic Injection" %}
* Known-Plaintext Angriff: Mallet kennt M und C: C = RC4(IV,KBSS) ⊕ (M,CRC(M))
* Damit kann Mallet den Key Stream berechnen: RC4(IV,KBSS) = C ⊕ (M, CRC(M))
{% /accordion-item %}

{% /accordion %}

Bilder

Einbinden von Bildern (in diesem Beispiel in einer Box)
{% panel type="green" heading="Das Hugo-Framework" %}
    {% img "framework.png" %}
{% /panel %}
Wo werden Bilder gespeichert?
Bitte legen Sie alle Bilder im Ordner ▸ /static/images ab.
Das Hugo-Framework
Einbinden von Bildern mit einer Lightbox
{% img name="beachcomber-mauritius.jpg" lightbox="true" %}
Wenn Sie ein Bild mit Lightbox einbinden, kann es der Nutzer durch anklicken vergrössern.
Wo werden Bilder gespeichert?
Bitte legen Sie alle Bilder im Ordner ▸ /static/images ab.

Videos

Einbinden von Youtube Videos
{% youtube src="LTDaET-JweU" %}


Einbinden von lokalen Videos (mp4)
{% video src="small.mp4" %}
Wo werden Videos gespeichert?
Bitte legen Sie alle Videos im Ordner ▸ /static/videos ab.

Zitate

Zitat
{% zitat zitat="Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt." person="Albert Einstein" %}
So sieht es aus
Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Albert Einstein

Syntax-Highlighting

Systemvoraussetzungen
Sie können das Syntax-Highlightning nutzen, um Beispielcode oder Eingabebefehle hervorzuheben und sauber zu formatieren. Dazu muss die Erweiterung Pygments installiert werden.
  1. Installieren Sie Python
  2. Installieren Sie Pygments 
    $ pip install Pygments
  3. Machen Sie das Programm “pygmentize” in Ihrem Pfad verfügbar, so dass Hugo es finden kann
  4. Die verfügbaren Lexer und Styles können Sie unter Pygments einsehen
HTML-Code
{< highlight HTML "style=friendly" >}

<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Data.Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>

{< /highlight >}
So sieht es aus
  
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Data.Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
Java-Code
{< highlight Bash "style=fruity" >}

BufferedWriter out = null;
try {
    out = new BufferedWriter(new FileWriter(”filename”, true));
    out.write(”aString”);
} catch (IOException e) {
    // error processing code
} finally {
    if (out != null) {
        out.close();
    }
}
    
{< /highlight >}
So sieht es aus
  
BufferedWriter out = null;
try {
    out = new BufferedWriter(new FileWriter(”filename”, true));
    out.write(”aString”);
} catch (IOException e) {
    // error processing code
} finally {
    if (out != null) {
        out.close();
    }
}