Dokumentation

Inhaltsverzeichnis

• Shortcodes
• Kundenlogo einbinden
• Blogbeitrag erstellen

Shortcodes

Was sind Shortcodes?

Shortcodes können im Markdown eingefügt werden um komplexere Elemente einzubetten.

Hugo bietet eine Reihe von Standard-Shortcodes, z.B. für das Einbetten von Videos:

https://gohugo.io/content-management/shortcodes

button

Ein konfigurierbarer Link als Button. Es kann bei Bedarf auch ein Icon (Font Awesome) eingefügt werden.

Code

{{< button label="Puzzle ITC" href="https://www.puzzle.ch" >}}
{{< button label="Puzzle ITC" href="https://www.puzzle.ch" icon="fas fa-heart" >}}

Vorschau

call_to_action

Ein speziell hervorgehobener Inhalt.

Code

{{< call_to_action >}}
hier normaler Text mit [Links](https://www.wearecube.ch)
{{</ call_to_action >}}

Vorschau

column & columns

Für Mehrspaltige Inhalte einzufügen.

Code

{{< columns >}}
{{< column >}}
Spalte eins
{{</ column >}}
{{< column >}}
Spalte zwei
{{</ column >}}
{{</ columns >}}

Vorschau

angebot_menu

Das Menü mit unseren Dienstleistungen.

Code

{{< angebot_menu >}}

Vorschau

image_figure

Ein Bild mit einer Bildunterschrift einfügen.

Code

{{< image_figure src="https://via.placeholder.com/2000x200" alt="Alternativtext" caption="Das ist nur ein Platzhalterbild" >}}

Vorschau

mail_link

Mail Links können von Robotern gesammelt werden und es kann sein dass man so auf einer Spam Liste landet. Um für Roboter nicht lesbare (werden mit Javascript generiert) Mail Links einzufügen, kann folgender Shortcode verwendet werden.

Code

{{< mail_link who="hello" domain="wearecube.ch" >}}

Vorschau

slider & images

Mehrere Bilder in einer Slideshow darstellen.

Code

{{< slider >}}
  {{< slider_image src="https://via.placeholder.com/1000x400/DDAADD" caption="Ein erstes Bild" >}}
  {{< slider_image src="https://via.placeholder.com/1000x400/AADDAA" caption="Ein zweites Bild" >}}
  {{< slider_image src="https://via.placeholder.com/1000x400/AAAADD" caption="Ein drittes Bild" >}}
{{< /slider >}}

Vorschau

video

Ein Video in der Seite integrieren.

Code

{{< video src="demo.mp4" controls="false" autoplay="true" loop="true" muted="true" >}}

Vorschau

Kundenlogo einbinden

1. Im Gitlab Repo unter content/kunden eine neue Markdown Datei neuerKunde.md erstellen.
2. Im neu erstellten neuerKunde.md kann folgendes angegeben werden:

link: https://link-zur-neuem-kunden.ch/
image: neuerKunde.png

3. Das Logo neuerKunde.png kann im gleichen Ordner abgelegt werden. Die empfohlene Grösse ist 240x180.

Blogbeitrag erstellen

1. Gitlab Repo öffnen / Editor öffnen

• https://gitlab.puzzle.ch/wac/wac-website-hugo
• auf “Web IDE” klicken

2. “Create new File”

• Unter “content” bei “blog” auf das Menu Icon klicken und “New file” auswählen

3. Name festlegen

Als Pfad das Datum und den Titel mit “-” getrennt eingeben gefolgt von /index.md

4. Blogpost schreiben

Dazu wird das Markdown Format verwendet. Siehe https://www.markdownguide.org/cheat-sheet

Oberhalb vom Inhalt werden die Einstellungen vom Blogpost festgelegt, siehe als Beispiel:

---
author: Julian
date: 2022-04-01 08:00:00+00:00
title: Der Titel meines Posts
heroImage: hero.png
url: /blog/ein-neuer-blogpost
---

## Überschrift h2

Hier wird ganz normaler Inhalt als Markdown erfasst.

Damit der Avatar richtig ausgewählt wird, bitte einen der folgenden Autoren auswählen:

• Annemarie
• Berti
• Flavio
• Josh
• Juergen
• Julian
• Mayra
• Phippu

5. Hero-Bild (oder andere Bilder) hochladen

Im Beispiel oben wurde als Hero-Bild hero.png angegeben. Bilder können generell im gleichen Ordner hochgeladen werden. Dazu einfach im Ordner links auf das Menu-Icon drücken und dann “Upload file” auswählen. Die optimalen Abmessungen für das Hero-Bild sind übrigens 1000px x 250px.

6. Die hochgeladenen Bilder sind dann im Ordner ersichtlich

Bilder können im Inhalt mit ![Eine schöne Sonnenblume](sunflower.png) eingefügt werden.

7. Änderungen abspeichern

Um die Änderungen zu speichern muss “commited” werden.

• Links unten auf den “Commit…” Button drücken
• Wichtig: “Commit to Develop Branch” wählen

Die Änderungen werden dann automatisch (dauert ca. 5 Minuten) auf https://test.wearecube.ch deployt. Dort kann der Blogbeitrag angeschaut werden.

8. Auf dem Live System veröffentlichen

Um den Inhalt auf dem Live System zu veröffentlichen muss ein Merge Request auf den prod Branch erstellt werden:

• https://gitlab.puzzle.ch/wac/wac-website-hugo/-/merge_requests/new?merge_request%5Bsource_project_id%5D=2373&merge_request%5Bsource_branch%5D=develop&merge_request%5Btarget_project_id%5D=2373&merge_request%5Btarget_branch%5D=prod
• Nach dem Erstellen muss dieser Merge Request gemergt werden (optimalerweise schaut sich das jemand anderes an).
• Nach dem mergen werden die Änderungen automatisch (wieder ca. 5 Minuten) auf https://www.wearecube.ch deployt.