Shortcodes

Shortcodes sind benutzerdefinierte Vorlagen die im Verzeichnis: <themename>/layout/shortcodes hinterlegt werden. Die dazu benötigten Compact Style Sheets können als Sass-Dateien abgespeichert werden in: <themename/assets/sass/shortcodes/. Einige der folgenden Shortcodes stammen aus dem Thema docport .

Vorabinfo zum Trennzeichen %

Shortcodes werden aufgerufen in der Form mit {{< shortcodename >}} oder mit {{% shortcodename %}}. Das Trennzeichen % teilt Gohugo mit, dass der gerenderte Shortcode weiter verarbeitet wird. Sie können dann Teil des generierten Inhaltsverzeichnisses, der Fussnoten usw. sein. Das Trennzeichen < > teilt Gohugo mit, dass der gerenderte Shortcode keiner weiteren Verarbeitung bedarf.

Am Beispiel des Shortcodes dummy.html wird die Funktionsweise der Trennzeichen demonstriert.

 {{- .Inner -}}

Beispiel mit Trennzeichen %

 {{%dummy%}}
	Der __Inhalt__ mit dem `Trennzeichen %` wird ___nochmal___ `gerendet`.
 {{%/dummy%}}
   

Der Inhalt mit dem Trennzeichen % wird nochmal gerendet.

Beispiel mit Trennzeichen <

 {{<dummy>}}
	Der __Inhalt__ mit dem `Trennzeichen >` wird nicht ___nochmal___ `gerendet`. 
 {{</dummy>}}
   

Die Funktion markdownify

Mit der Funktion markdownify wird der Inhalt mit Trennzeichen < doch gerendert.

 {{- .Inner | markdownify -}}

Der Inhalt mit dem Trennzeichen < und der Funktion markdonify wird doch gerendet.

Verhalten vor Version 0.55

In einigen Shortcodes wie z.B. Notice und Tabs findet man folgende Codezeile:

   
 {{ $_hugo_config := `{ "version": 1 }` }}
   

Die Funktionsweise des Trennzeichen % beim Aufruf von Shortcodes der Form {{% shortcodename %}} wurde ab der Gohugo Version 0.55 geändert. Mit der o.g. Codezeile wird das alte Verhalten vor Version 0.55 generiert. Mittlerweile hat dieser Eintrag keine Auswirkung mehr und kann deshalb entfallen.

Menu.html

Das Shortcode menu.html verdeutlicht Menus im Textfluss, indem es in einer anderen Farbe und in einem anderen Stil dargestellt wird. Als Trennzeichen zwischen den einzelnen Menupunkten wird ein Schrägstrich (Slash) / verwendet. Standardmäßig wird der Prefix Menu: verwendet. Optional kann ein anderer Prefix vorangestellt werden.

 {{<menu "Datei/Einstellungen/...">}}			-> im Text erscheint: «Menu: Datei → Einstellungen»
 {{<menu "Datei/Einstellungen/..." "prefix:">}}		-> im Text erscheint: «prefix: Datei → Einstellungen»

Code.html

Die in Gohugo vorbereiteten Chroma-Syntaxhighlights können in einer eigenen Shortcodedatei ./layouts/shortcodes/code.html ergänzt und das weitere Aussehen definiert werden.

 {{<code lang="required" file="optional" title="optional" options="optional" >}}

	[content]
	
 {{</code>}}

Optionen

Folgende Optionen stehen für Code.html zur Verfügung:

Beispielanwendung insbesondere mit options für das Hervorheben von Zeilen.

 # Standardanwendung
 {{<code lang="c++">}}
 {{<code lang="c++" title="Text im Banner">}}
	
 # Options
 {{<code lang="c++" options="linenos=table,linenostart=12,hl_lines=3 6 9-15">}}
 {{<code lang="c++" options="linenos=false,linenostart=12,hl_lines=1 5 8 12-15">}}

 # Beispiel mit Integration einer Datei 	
 {{<code lang="c++" file="./path/to/file.cpp" title="filename">}}
 {{<code lang="c++" file="./path/to/file.cpp" title="Irgendein Titel">}}
 {{<code lang="c++" file="./path/to/file.cpp" options="linenos=table,linenostart=12,hl_lines=3 6 9-15">}}
 {{<code lang="c++" file="./path/to/file.cpp" options="hl_lines=1 5 6 7,linenostart=1,linenos=table" >}} 
 {{<code lang="cpp" file="/static/include_files/main.cpp" options="linenos=true" >}}

Weitere Hinweise

Um Shortcode-Anweisung in Syntaxhighlight’s zu deaktivieren und stattdessen anzuzeigen, verwende die Zeichen: /* … */

Mit dem verbesserten Shortcode {{<code>}} können nunmehr ganze Dateien eingelesen und mit einem entsprechenden Syntaxhighlight gerendert werden. Im Weiteren ist es kein Problem Backticks als Syntaxhighlight anzuzeigen.

  
```bash
	[content]
```

Anwendungsbeispiele

Beispiel C++ File included

 {{<code lang="cpp" file="/static/include_files/main.cpp" options="linenos=true" title="Beispiel C++ File included">}}

 {{</code>}}

Ergebnis:

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

#include <iostream>
#include <iomanip>
#include <ctime>
#include <chrono>

using namespace std;

long fibonacci(unsigned n)
{
    if (n < 2) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

int main()
{
    cout << "Hello world!" << endl;

    auto start = std::chrono::steady_clock::now();
    std::cout << "f(40) = " << fibonacci(40) << '\n';
    auto end = std::chrono::steady_clock::now();
    std::chrono::duration<double> elapsed_seconds = end-start;
    std::cout << "elapsed time: " << elapsed_seconds.count() << "s\n\n\n";

    std::chrono::steady_clock::time_point startxx = std::chrono::steady_clock::now();
    std::cout << "f(40) = " << fibonacci(40) << '\n';
    std::chrono::steady_clock::time_point endxx = std::chrono::steady_clock::now();
    std::cout << "elapsed time: "
              << std::chrono::duration_cast<std::chrono::microseconds>(endxx - startxx).count()
              << "\n";

    return 0;
}

Beispiel Sass File included

 {{<code lang="sass" file="/themes/mab-3.0/assets/sass/main.sass" options="linenos=true" title="Beispiel Sass">}}

 {{</code>}}

Ergebnis:

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

// SCSS Files
@import "fontslocal"
@import "fontslocal_source_sans"
@import "colors"
@import "variables"
@import "base"
@import "content_flex"
@import "image"
@import "mytable"
@import "nav"
@import "blockquote"
@import "code_backticks"
@import "codestyle"
@import "include"
@import "footnotes"
@import "sort-by-flex"
@import "scalebox"
@import "listen"
@import "shortcodes/alert"
@import "shortcodes/columns"
@import "shortcodes/notice"
@import "shortcodes/tabs"
@import "shortcodes/panel"
@import "shortcodes/expand"
@import "shortcodes/gallary"
@import "shortcodes/formular"
@import "span"
@import "link"

// SASS Files
@import "headlines"
@import "header_menu"
@import "rest"

Beispiel Shortcode Html File included

 {{<code lang="go-html-template" file="/themes/mab-3.0/layouts/_default/baseof.html" options="linenos=true" title="Beispiel _default/baseof.html">}}

 {{</code>}}

Ergebnis:

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<!DOCTYPE html>
<html lang="de">

	{{- partial "head.html" . -}}

<body>

	<!-- Kopfzeile -->
	{{- partial "header.html" . -}}

	<main>

		{{- "\n\n<!-- Begin div class=contentxx-->\n" | safeHTML -}}
		<div class="contentxx">

			{{- block "main" . -}}
			{{- end -}}

			{{- partial "sidebar_left.html"  . -}}
			{{- partial "sidebar_right.html" . -}}

		</div>
		{{- "\n<!-- Ende div class=contentxx-->\n\n" | safeHTML -}}

	</main>

	{{- partial "footer.html" . -}}

</body>

</html>

CSV-Datei mit viewcsv.html anzeigen

Eine CSV-Datei kann mittels Shortcodes in einer Tabelle dargestellt werden.

 
 {{< viewcsv url="required" sep="optional" caption="optional" class="optional" >}}

Folgende Optionen stehen für viewcsv.html zur Verfügung:

Anwendungsbeispiel

 
 {{< viewcsv url="csv/SalesJan2009.csv" caption="SalesJan2009.csv" >}}
 {{< viewcsv url="csv/Baupreisindex.csv" sep=";" >}}

Ergebnis:

Weitere Beispiele für Tabellen in gohugo bei zwbetz.com .

Expand Text

Zusammenklappbare Abschnitte mit {{<expand>}} erstellen (engl. collapsible).

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

{{ $_hugo_config := `{ "version": 1 }` }}
{{ $zufall := partial "random" . }}
{{- $.Scratch.Set "ExpandID" "expand." -}}
{{- $.Scratch.Add "ExpandID" ( replaceRE "\\s" "" $zufall ) -}}
<div class="expand-div">
	<input id="{{ $.Scratch.Get "ExpandID" }}" class="expand-input" type="checkbox">
	<label for="{{ $.Scratch.Get "ExpandID" }}" class="expand-label {{with .Get "align"}}{{.}}{{else}}left{{end}}">{{with .Get "title"}}{{.}}{{else}}ohne Titel{{end}}</label>
	<div class="expand-div-content">
	   <div class="expand-div-inner">
		{{ .InnerDeindent | safeHTML | markdownify  }}
	    </div>
	</div>
</div>
{{- "<!-- Ende expand-div: " | safeHTML -}}{{ $.Scratch.Get "ExpandID" }}{{- " -->\n" | safeHTML -}}

 
 {{<expand title="Expand Shortcode Sample">}}
 In einer Expansionsvorlage können insoweit alle markdowntypischen Elemente verwendet werden.  
 ...
 ...
 ...
 {{</expand>}}

50
51
52
53

 #!/bin/bash
 ###### CONFIG
 ACCEPTED_HOSTS="/root/.hag_accepted.conf"
 BE_VERBOSE=false

Hinweis: Die Höhe der Expansionsvorlage ist begrenzt auf: max-height: 1000em;
Siehe in der entsprechenden Stylesheetsdatei.

Columns

Die Vorlage {{<columns>}} zeigt Inhalte spaltenweise nebeneinander an. Die Spaltenüberschriften werden mit einem Doppelkreuz # eingeleitet.

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!-- https://github.com/alex-shpak/hugo-book/blob/master/layouts/shortcodes/columns.html -->

{{/* Aufruf

{{<columns class="Option">}}
{{<columns class="Option ttest">}} mit Farbfüllung für Test's

*/}}

{{- $column_class := .Get "class" }}
<div class="columns {{ $column_class }}">
  {{ range split .Inner "<--->" }}
  <div class="column {{ $column_class }}">
	<div class="Innen {{ $column_class }}">
	    {{ . | markdownify }}
	</div>
  </div>
  {{ end }}
</div>

 
 {{<columns class="Option1 Option2">}} 
 ## Title Left
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. 

 <---> <!-- magic separator, between columns -->

 ### Title Mid 
 Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. 

 <---> <!-- magic separator, between columns -->

 #### Title Right
 Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 {{</columns>}}

Ergebnis:

Styles Option

Folgende Optionen für {{<columns>}} stehen zur Verfügung:

Eine symetrische Darstellung ergibt sich mit der Option class="center" wenn nur zwei Spalten benötigt werden und eine Spalte eine Tabelle enthält und die andere Spalte ein Bild.

Panel

Ein Panel ist eine Tafel (oder Board) mit dem Informationen besonders hervorgehoben werden (Farbe, Überschrift, Fußraum).

 
 <div class="card ">
  {{- with .Get "header" -}}
  <div class="card-header {{with $.Get "theme" }}{{.}}{{else}}primary{{end}}">
    {{- htmlUnescape . | markdownify -}}
  </div>
  {{- end -}}
  <div class="card-body">
    <p class="card-text">{{- .Inner -}}</p>
  </div>
  {{- with .Get "footer" -}}
  <div class="card-footer text-muted">
    {{- htmlUnescape . | markdownify -}}
  </div>
  {{- end -}}
 </div>

 
 {{<panel theme="success" header="Überschrift" footer="Fußraum">}}
 Text Text Text text.
 {{</panel>}}

 {{<panel>}}this is a simple panel{{</panel>}}

Ergebnis:

Hinweis Blockquotes

Ein Panel kann mit Blockquotes eingerückt werden.

Panel-Themes

Tabs - Registrierkarten

Mithilfe von Registrierkarten {{<tabs>}} können Inhalte organisiert werden. Z.B. HelloWorld-Anweisung für verschiedene Sprachen.

 
 {{<tabs>}}
 {{<tab "PHP">}} 
 Text Text Text Text 

	Codeblock 1 mit Backticks einschließen

 {{</tab>}}
 {{<tab "Golang">}} 
 Text Text Text Text 

	Codeblock 2 mit Backticks einschließen

 {{</tab>}}
 {{</tabs>}}

Ergebnis:

Beschreibung Text Text Text Text 

50
51
52

	<?php 
	Print "Hello, World!";
	?>

50
51
52
53
54

	package main
	import "fmt"
	func main() {
	    fmt.Println("hello world")
	}	

Hinweis: Die Schrift der Beschreibung wird kleiner wenn vier Leerzeichen vorangestellt werden.

Alert - Warnung

Die benutzerdefinierte Vorlage {{% alert %}} wird verwendet, um kurze Informationen hervorzuheben. Der Text kann auch mit dem Schriftstil **FETT** besonders betont werden.

 <div class="alert{{- " " -}}
 {{- if .IsNamedParams -}}{{- with .Get "theme" -}}{{.}}{{- else -}}info{{- end -}}
 {{- else -}}
	{{- with .Get 0 -}}{{.}}{{- else -}}info{{- end -}}
 {{- end -}} " role="alert">
 {{- .Inner | safeHTML | markdownify  -}}
 </div>

 
 {{% alert %}}**this** is a simple alert{{% /alert %}}
 {{% alert primary %}}**this** is a primary{{% /alert %}}
 {{% alert theme="info" %}}**this** is a text with theme "info"{{% /alert %}}
 {{% alert theme="success" %}}**Yeahhh !** is a text with theme "success"{{% /alert %}}
 {{% alert theme="warning" %}}**Be carefull** is a text{{% /alert %}}
 {{% alert danger %}}**Beware !** is a text{{% /alert %}}
 {{% alert dark %}}**Dark !** is a dark{{% /alert %}}
 {{% alert light %}}**oooh !** is a light{{% /alert %}}
 {{% alert secondary %}} **Wait** is a secondary{{% /alert %}}

Ergebnis:

Hinweis: Mit Blockquotes kann ein alert eingerückt werden.

Notice

Notizen sind ähnlich wie Alert-Vorlagen eine Möglichkeit Informationen, in diesem Fall umfangreicher, darzustellen.

 
 {{% notice $color $label %}}
 Text Text Text
 \   <-- neuer Absatz -->
 Text Text Text
 {{% /notice %}}

Example

Beispiele für Notice-Vorlagen.

Colors

Farbgestaltung in Notice-Vorlagen.

Labels (Etiketten)

Notizen mit einem Etikett (Label) versehen.

Stichworte (tags)

• dev
• gohugo
• shortcodes