Text+ Portal-Commons

Benutzung von Shortcodes in Hugo

Shortcodes sind eine Möglichkeit in Markdown-Seiten komplexere Bausteine einzubauen ohne direkt HTML schreiben zu müssen. Ein Shortcode wird mit einem tag {{<tag>}} bzw {{</tag>}} eingeleitet bzw. abgeschlossen und hat meist Parameter sowie einen Text der zwischen den öffnenden und schließenden Tags steht. Das ganze sieht dann zum Beispiel im Markdown so aus:

{{<tag param1="value1" param2="value2">}}Text{{</tag>}}

Falls ein Shortcode keinen weiteren Text anzeigt, wie zum Beispiel bei der Einbindung eines Bildes ohne Caption, so sollte er direkt im öffnenden Tag auch wieder geschlossen werden.

{{<tag param1="value1" param2="value2"/>}}

Verfügbare Shortcodes

Folgende Shortcodes sind schon verfügbar:

Button

• Tag: button
• Beschreibung: Zeigt einen Button mit dem übergebenen Text und Ziel (URL) an
• Parameter:
  • url: String, Ziel-Link des Buttons
  • is_primary: true/false, Zeigt Button in Primärfarbe (rot) an; optional, default: false

Beispiel: Auf die Landing Page!

Button in Button Row

• Tag: button-row
• Beschreibung: Einbindung mehrerer Buttons in einer Reihe
• Parameter:
  • align: Anordnung der Buttons am Start, Ende, etc; erlaubte Werte: “start”, “end”, “center”, “between”, “around”
    • Hintergrundwissen: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Beispiel:

Lead Text

• Tag: lead-text
• Beschreibung: Zeigt den Text als Lead-Text (größere Schrift) an
• Parameter: -

Beispiel:

Accordion und Accordion-Item

• Tags: accordion und accordion-item
• Beschreibung: Zeigt den Inhalt in einem Accordion an. Ein accordion-item legt dabei ein ausklappbares Element an.
• Parameter:
  • accordion: -
  • accordion-item:
    • title: Titel der auf dem ausklappbaren Element angezeigt werden soll

Beispiel:

Team und Team-Member

• Tags: team und team-member
• Beschreibung: Zeigt eine Gallerie von Personen an (z.B. in Governance/Committees)
• Parameter:
  • team:
    • name: Name des Teams/der Gruppe
    • theme: white/gray; Hintergrundfarbe der Gallerie; default: gray
  • team-member:
    • img: Pfad zur Bilddatei
    • url: Link für ggf. weitere Informationen zur Person
    • role: Rolle/Position in Text+
    • institution: Institution der die Person angehört

Beispiel:

Raw HTML

• Tag: rawhtml
• Beschreibung: Es kann direkt einfaches HTML in Hugo injiziert werden. Cf. https://anaulin.org/blog/hugo-raw-html-shortcode/
• Parameter:
  • src: Source; Pfad zu einer HTML-Datei (optional)

Beispiel:

Standout

• Tag: standout
• Beschreibung: Stellt den verschachtelten Shortcode in breiterem Layout dar
• Parameter:
  • name: setzt die Überschrift des Standouts (optional)
  • theme: setzt das “Theme” des Standouts (optional, mögliche Werte: “white”, “gray”)
  • col_width: setzt die Spaltenbreite des Standouts (optional, mögliche Werte 1-12; 12 entspricht dabei 12/12, also der vollen Bildschirmbreite, andere Werte entsprechend x/12)

Beispiel:

Call to Action

• Tag: call-to-action
• Beschreibung: Zeigt Inhalt in einer rot umrandeten Box an (Call-to-Action)
• Parameter:
  • title: Titel des Call-to-Action

Beispiel:

Image-Shortcodes

• Tag: image
• Beschreibung: Einbindung eines Bildes mit Text und Lizenz/Copyright. Eingebundene Bilder werden automatisch auf eine Breite von 1296px runterskaliert, sollten sie größer sein. Wenn das Bild per Lightbox (s.u.) eingebunden wird, wird es nach einem Klick in Original-Auflösung in einer Lightbox sichtbar.
• Parameter:
  • img: Pfad zur Bilddatei
  • license: Lizenztext, der angezeigt werden soll; optional
  • alt: Alternativtext, der angezeigt werden soll, falls das Bild nicht geladen werden kann; optional, default auf Beschreibung/Text
  • context: ’lightbox’ öffnet das Bild in einer isolierten Lightbox. ‘gallery’ öffnet das Bild in einer verbundenen Lightbox, d.h. alle ‘image’-shortcodes auf einer Seite mit diesem Wert werden in einer zusammenhängenden Lightbox dargestellt (s.a. ‘gallery’).

Beispiel:

Lightbox

Beispiel:

Gallery

• Tags: gallery und image
• Beschreibung: Ordnet die Bilder in einer Reihe an und öffnet sie in einer Lightbox. Es sollten nicht mehr als drei Bilder pro gallery-shortcode verwendet werden.
• Parameter:
  • gallery: -
  • image:
    • img: Pfad zur Bilddatei
    • license: Lizenztext, der angezeigt werden soll; optional
    • context: Der Wert muss gallery sein

Beispiel:

Carousel

• Tags: gallery und image
• Beschreibung: Ordnet die Bilder in einer Reihe an und öffnet sie in einer Lightbox. Es sollten nicht mehr als drei Bilder pro gallery-shortcode verwendet werden.
• Parameter:
  • gallery: -
  • image:
    • img: Pfad zur Bilddatei
    • license: Lizenztext, der angezeigt werden soll; optional
    • context: Der Wert muss gallery sein

Beispiel:

Previous Next

Cards

• Tags: cards und card
• Beschreibung: Teilt die Hauptspalte in Kacheln. Es können bis zu drei Kacheln pro cards-shortcode verwendet werden. Kann ggf. mit standout kombiniert werden, um mehr Platz zu schaffen.
• Parameter:
  • width: small oder full oder nichts davon, dann wird “medium” angezeigt
  • image: Pfad zum Bild
  • title: angezeigter Text
  • url: Link
  • download: Download-Link

Beispiel:

Seasonal Schools

Unsere einwöchigen, einmal jährlich stattfindenden Intensivkurse laden dazu ein, tief in die Welt des Forschungsdatenmanagements einzutauchen

Lehr- und Lernmaterialien

Videos, Folien oder Selbstlerneinheiten: Wir bauen einen stetig wachsenden Fundus hilfreicher Materialien zum Datenmanagement auf. Viel Spaß beim Stöbern!

Lehr- und Lernmaterialien

Videos, Folien oder Selbstlerneinheiten: Wir bauen einen stetig wachsenden Fundus hilfreicher Materialien zum Datenmanagement auf. Viel Spaß beim Stöbern!

Seasonal Schools

Unsere einwöchigen, einmal jährlich stattfindenden Intensivkurse laden dazu ein, tief in die Welt des Forschungsdatenmanagements einzutauchen

Horizontal Line

• Tag: horizontal-line
• Beschreibung: Zeigt eine horizontale Linie an
• Parameter: -

Beispiel:

Liste der Text+ Zentren

• Tag: competence-center-list
• Beschreibung: Zeigt die Liste der Text+ Zentren an. In der Liste werden Seiten mit dem Typ competence-center aufgelistet.
• Parameter: -

Beispiel:

Institution und Institution-List

• Tags: institution-list und institution
• Beschreibung: Bindet die angegebenen Institutionen in der Liste der beteiligten und anstragstellenden Institutionen ein. Gleichzeitig wird aus den angegeben Logos eine Logo-Collage gebaut und weiter unten angezeigt.
• Parameter:
  • institution-list: -
  • institution:
    • url: Link der bei Klick auf das Logo/den Text geöffnet werden soll
    • img: Pfad zur Logo-Datei, die in Logo-Collage angezeigt werden soll

Beispiel:

Abgewandelte Shortcodes von Hugo

Einige der in der Hugo-Dokumentation aufgelisteten Shortcodes sind im Text+-Portal in abgewandelter Form verfügbar

YouTube

Der Youtube-Shortcode von Hugo wurde für Text+ um ein Consent-Banner erweitert das angezeigt wird bevor Daten zu/von Youtube übertragen werden. Der Shortcode erlaubt eine Videounterschrift des eingebundenen Videos. Das führt dazu, dass er zwingend geschlossen werden muss (abschließendes / im öffnenden Tag, sofern kein schließender Tag da ist)

• Tag: youtube
• Beschreibung: Bindet das Youtube-Video mit der passenden ID und ggf. einer Videounterschrift ein
• Parameter:
  • id: ID des Videos, normalerweise der Teil einer YT-URL direkt hinter dem watch?v=
  • title: Titel des eingebundenen Videos, sinnvoll für Accessibility-Zwecke
• Anwendungsbeispiel (ohne Caption):

Beispiel: Ohne Caption

Mit Caption

• Anwendungsbeispiel (mit Caption)

Twitter

Der Twitter-Shortcode von Hugo wurde für Text+ um ein Consent-Banner erweitert das angezeigt wird bevor Daten zu/von Twitter übertragen werden.

• Tag: tweet
• Beschreibung: Bindet den Tweet mit dem passenden User und der ID ein
• Parameter:
  • user: User der den Tweet verfasst hat
  • id: ID des Tweets, normalerweise der Teil einer Tweet-URL direkt hinter dem /

Beispiel: