An dieser Stelle sollen Lösungen für technische Fragen und Hilfestellungen für den Einstieg in Hugo gegeben werden.
Über Shortcodes lassen sich in Hugo Templates für komplexere Abschnitte definieren, die nicht einfach mit HTML oder Markdown darstellbar sind. Oder sie stellen sicher, das für einen bestimmten Aspekt immer dieselbe Darstellung gewählt wird.
{{<hightlight>}}
für Codebeispiele
Für die Darstellung von Code-Beispielen wird der von Hugo bereitgestellte Shortcode {{<hightlight>}}
verwendet.
Die Konfiguration ist in der Hugo-Dokumentation beschrieben.
Der erste Parameter enthält die Sprache (z.B. Java, XML, ...) für die die Code-Formatierung vorgenommen werden soll.
Zeilennummen können durch die Parameter linenos=table
und linenostart
eingeblendet werden.
Mit dem Parameter hl_lines
lassen sich einzelne Zeilen hervorheben.
{{< highlight xml "linenos=table, linenostart=11, hl_lines=1 6" >}}
<category ID="article">
<label xml:lang="de" text="Artikel / Aufsatz"/>
<label xml:lang="en" text="Article / Chapter"/>
<label xml:lang="it" text="Articolo / Saggio"/>
<label xml:lang="x-mapping" text="marcgt:article diniPublType:article"/>
</category>
{{< /highlight >}}
|
|
{{<ref>}}
für Links auf interne Seiten <span>Hier geht es zum <a href="{{< ref /blog >}}">Blog</a>.</span>
Hier geht es zum Blog.
{{<relURL>}}
für relative URLsDieser Shortcode erlaubt Zugriff auf die Hugo Funktion relURL, um relative Links in die Webseite einbetten zu können. Das ist dann relevant, wenn die Webseite nicht als Root sondern unter einer URL mit Subpfad betrieben wird.
Relative Adresse dieser Seite:
<strong>{{<relURL "documentation/developer/dev_docs/dev_docs_howtos/" >}}</strong>
Relative Adresse dieser Seite: /documentation/developer/dev_docs/dev_docs_howtos/
{{<mcr-version>}}
für MyCoRe-LTS-Angaben
Dieser Shortcode sollte verwendet werden, wenn im Fließtext auf MyCoRe-LTS-Tags referenziert wird.
Mehre Versionsstände können mit Komma (,
) getrennt werden.
Das Feature <strong>XY</strong> wurde mit MyCoRe {{<mcr-version "2015.06" >}} eingeführt
und in MyCoRe {{< mcr-version "2016.06,2017.06" >}} verwendet.
Das Feature XY wurde mit MyCoRe 2015.06 eingeführt und in MyCoRe 2016.06 2017.06 verwendet.
{{<mcr-figure>}}
für Bilder und Grafiken
Dieser Shortcode sollte zum einheitlichen Einbetten von Bilder und Grafiken verwendet werden.
Theoretisch kann die Grafik auch als HTML-Code bzw. SVG-XML bestehen.
In Kombination mit dem {{<hightlight>}}
-Shortcode können auch Codebeispiele
mit Bildunterschriften versehen werden.
Folgende Parameter können verwendet werden:
src | URL der Bilddatei / Grafik |
class | CSS-Klasse |
alt | alternativer Text, wenn das Bild nicht geladen werden kann |
width | Breite |
height | Höhe |
label | Fußzeile: Typ der Darstellung |
caption | Bildbeschreibung |
attr | Angaben zum Urheber |
{{< mcr-figure src="http://localhost:1313/images/site/download/mycore_logo_powered_175x55_weiss.jpg"
class="border border-primary text-center"
label="Logo" caption="powered by MyCoRe" attr="Die MyCoRe-Community" />}}
{{< mcr-figure class="border border-secondary" label="SVG-Grafik"
caption=""Kugel in orange"" attr="Die MyCoRe-Community" >}}
<div class="text-center">
<svg height="50" width="50">
<circle cx="25" cy="25" r="20" stroke="black" stroke-width="2" fill="orange" >
</svg>
</div>
{{< /mcr-figure >}}
{{< mcr-figure label="Konfiguration" caption="<code>mycore.properties</code>">}}
{{< highlight text "linenos=table" >}}
# setzt die Standardimplementierung, welche dadurch in der API-URL weggelassen werden kann
MCR.IIIFImage.Default=Iview
{{< /highlight >}}
{{< /mcr-figure >}}
|
|
Konfiguration: mycore.properties
{{<mcr-table>}}
für Markdown-TabellenDieser Shortcode kann verwendet werden, um Markdown-generierte Tabellen mit class und style Attributen anzureichern. Damit lässt sich u.a. das Tabellen-Layout von Bootstrap nachnutzen.
Folgende Parameter können verwendet werden:
id | id Attribut |
class | CSS Klasse |
style | CSS Style Attribut |
col-styles | Style-Attribute (mit | getrennt), die im <colgroup> -Header der Tabelle gesetzt werden. |
{{<mcr-table id="tab_fruits" class="table table-sm table-bordered" style="width:50%"
col-styles="width:70%;background-color:lightblue;|width:30%" >}}
| Fruit | Color |
|--------------|--------|
|Apple | red |
|Banana | yellow |
{{</mcr-table>}}
Fruit | Color |
---|---|
Apple | red |
Banana | yellow |
{{<mcr-comment>}}
für Kommentare in der DokumentationDieser Shortcode kann für Kommentare im Quellcode der Dokumentation verwendet werden. Der Inhalt wird beim Rendern der HTML-Seite ignoriert. So lassen sich beispielsweise einzelne Dokumentationsabschnitte vorübergehend aus der HTML-Seite ausblenden, oder Anmerkungen hinzufügen.
{{<mcr-comment >}}
RS: Das ist ein interner Kommentar.
{{</mcr-comment >}}
<br />
) oder durch Einfügen
von zwei Leerzeichen (␣␣
) am Zeilenende erstellt werden.