Zusätzlich zu allen Standard-Hugo-Shortcodes fügt Blowfish einige zusätzliche für erweiterte Funktionalität hinzu.

Alert

#

alert gibt seinen Inhalt als stilisierte Nachrichtenbox innerhalb Ihres Artikels aus. Es ist nützlich, um auf wichtige Informationen aufmerksam zu machen, die der Leser nicht übersehen sollte.

Die Eingabe erfolgt in Markdown, sodass Sie sie nach Belieben formatieren können.

Beispiel 1: Keine Parameter

{{< alert >}}
**Warnung!** Diese Aktion ist destruktiv!
{{< /alert >}}

Beispiel 2: Unbenannter Parameter

{{< alert "twitter" >}}
Vergiss nicht, mir auf [Twitter](https://twitter.com/nunocoracao) zu folgen.
{{< /alert >}}

Beispiel 3: Benannte Parameter

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
Dies ist ein Fehler!
{{< /alert >}}

Admonition

#

Admonitions ermöglichen es Ihnen, auffällige Hinweisboxen in Ihren Inhalt einzufügen.

Admonitions dienen einem ähnlichen Zweck wie der Alert-Shortcode, werden jedoch über Hugo-Render-Hooks implementiert. Der Hauptunterschied liegt in der Syntax: Admonitions verwenden Markdown-Syntax, was sie portabler über verschiedene Plattformen macht, während Shortcodes Hugo-spezifisch sind. Die Syntax ähnelt GitHub-Alerts:

> [!NOTE]
> Eine Admonition vom Typ Note.

> [!TIP]+ Benutzerdefinierter Titel
> Eine einklappbare Admonition mit benutzerdefiniertem Titel.

Das Alert-Zeichen (+ oder -) ist optional, um zu steuern, ob die Admonition eingeklappt ist oder nicht. Beachten Sie, dass das Alert-Zeichen nur mit Obsidian kompatibel ist.

Article

#

Article bettet einen einzelnen Artikel in eine Markdown-Datei ein. Der link zur Datei sollte der .RelPermalink der einzubettenden Datei sein. Beachten Sie, dass der Shortcode nichts anzeigt, wenn er auf seine übergeordnete Seite verweist. Hinweis: Wenn Sie Ihre Website in einem Unterordner wie Blowfish ausführen (z.B. /blowfish/), fügen Sie diesen Pfad bitte in den Link ein.

Beispiel:

{{< article link="/docs/welcome/" showSummary=true compactSummary=true >}}

Welcome to Blowfish

3 min

New Docs

Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.

Badge

#

badge gibt eine stilisierte Badge-Komponente aus, die für die Anzeige von Metadaten nützlich ist.

Beispiel:

{{< badge >}}
Neuer Artikel!
{{< /badge >}}

Button

#

button gibt eine stilisierte Button-Komponente aus, die verwendet werden kann, um eine primäre Aktion hervorzuheben. Es hat drei optionale Variablen href, target und rel, die verwendet werden können, um die URL, das Ziel und die Beziehung des Links anzugeben.

Beispiel:

{{< button href="#button" target="_self" >}}
Handlungsaufforderung
{{< /button >}}

Carousel

#

carousel wird verwendet, um mehrere Bilder auf eine interaktive und visuell ansprechende Weise zu präsentieren. Dies ermöglicht es dem Benutzer, durch mehrere Bilder zu gleiten, während nur der vertikale Platz eines einzelnen Bildes beansprucht wird. Alle Bilder werden mit der vollen Breite der übergeordneten Komponente und dem von Ihnen festgelegten Seitenverhältnis angezeigt, mit einem Standard von 16:9.

Beispiel 1: 16:9 Seitenverhältnis und ausführliche Bilderliste

{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}

Previous Next

Beispiel 2: 21:9 Seitenverhältnis und Regex-Bilderliste

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}

Previous Next

Chart

#

chart verwendet die Chart.js-Bibliothek, um Diagramme in Artikel mit einfach strukturierten Daten einzubetten. Es unterstützt eine Reihe von verschiedenen Diagrammstilen und alles kann innerhalb des Shortcodes konfiguriert werden. Geben Sie einfach die Diagrammparameter zwischen den Shortcode-Tags an und Chart.js erledigt den Rest.

Für Details zur Syntax und unterstützten Diagrammtypen siehe die offizielle Chart.js-Dokumentation.

Beispiel:

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomate', 'Blaubeere', 'Banane', 'Limette', 'Orange'],
  datasets: [{
    label: '# der Stimmen',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}

Weitere Chart.js-Beispiele finden Sie auf der Seite Diagramm-Beispiele.

Code Importer

#

Dieser Shortcode ermöglicht das einfache Importieren von Code aus externen Quellen, ohne kopieren und einfügen zu müssen.

Beispiel:

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}

{{ $url := .Get "url" }}
{{ with resources.GetRemote (urls.Parse $url) }}
  {{ .Content | markdownify }}
{{ else }}
  {{ warnf "mdimporter shortcode: unable to fetch %q: %s" $url .Position }}
{{ end }}

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" >}}

enableRobotsTXT = true
summaryLength = 0

buildDrafts = false
buildFuture = false

enableEmoji = true

Codeberg Card

#

codeberg ermöglicht es Ihnen, schnell ein Codeberg-Repository über die Codeberg-API zu verlinken und dabei Echtzeit-Updates zu Statistiken wie Stars und Forks bereitzustellen.

Beispiel 1:

{{< codeberg repo="forgejo/forgejo" >}}

Figure

#

Blowfish enthält einen figure-Shortcode zum Hinzufügen von Bildern zu Inhalten. Der Shortcode ersetzt die grundlegende Hugo-Funktionalität, um zusätzliche Leistungsvorteile zu bieten.

Wenn ein bereitgestelltes Bild eine Seitenressource ist, wird es mit Hugo Pipes optimiert und skaliert, um Bilder bereitzustellen, die für verschiedene Geräteauflösungen geeignet sind. Wenn ein statisches Asset oder eine URL zu einem externen Bild angegeben wird, wird es unverändert ohne Bildverarbeitung durch Hugo eingefügt.

Der figure-Shortcode akzeptiert sechs Parameter:

Blowfish unterstützt auch die automatische Konvertierung von Bildern, die mit Standard-Markdown-Syntax eingefügt werden. Verwenden Sie einfach das folgende Format und das Theme erledigt den Rest:

![Alt-Text](image.jpg "Bildunterschrift")

Beispiel:

{{< figure
    src="abstract.jpg"
    alt="Abstraktes lila Kunstwerk"
    caption="Foto von [Jr Korpa](https://unsplash.com/@jrkorpa) auf [Unsplash](https://unsplash.com/)"
    >}}

<!-- ODER -->

![Abstraktes lila Kunstwerk](abstract.jpg "Foto von [Jr Korpa](https://unsplash.com/@jrkorpa) auf [Unsplash](https://unsplash.com/)")

Forgejo Card

#

forgejo ermöglicht es Ihnen, schnell ein Forgejo-Repository über die Forgejo-API zu verlinken und dabei Echtzeit-Updates zu Statistiken wie Stars und Forks bereitzustellen.

Beispiel 1:

{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}

Gallery

#

gallery ermöglicht es Ihnen, mehrere Bilder auf einmal in einer responsiven Weise mit vielfältigeren und interessanteren Layouts zu präsentieren.

Um Bilder zur Galerie hinzuzufügen, verwenden Sie img-Tags für jedes Bild und fügen Sie class="grid-wXX" hinzu, damit die Galerie die Spaltenbreite für jedes Bild identifizieren kann. Die standardmäßig verfügbaren Breiten beginnen bei 10% und gehen bis zu 100% in 5%-Schritten. Um beispielsweise die Breite auf 65% zu setzen, setzen Sie die Klasse auf grid-w65. Zusätzlich sind auch Breiten für 33% und 66% verfügbar, um Galerien mit 3 Spalten zu erstellen. Sie können auch Tailwinds responsive Indikatoren nutzen, um ein responsives Raster zu haben.

Beispiel 1: Normale Galerie

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}

Beispiel 2: Responsive Galerie

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{< /gallery >}}

Gist

#

Der gist-Shortcode ermöglicht es Ihnen, ein GitHub Gist direkt in Ihren Inhalt einzubetten, indem Sie den Gist-Benutzer, die ID und optional eine bestimmte Datei angeben.

Beispiel 1: Gesamtes Gist einbetten

{{< gist "octocat" "6cad326836d38bd3a7ae" >}}

Beispiel 2: Bestimmte Datei aus Gist einbetten

{{< gist "rauchg" "2052694" "README.md" >}}

Gitea Card

#

gitea ermöglicht es Ihnen, schnell ein Gitea-Repository über die Gitea-API zu verlinken und dabei Echtzeit-Updates zu Statistiken wie Stars und Forks bereitzustellen.

Beispiel 1:

{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}

GitHub Card

#

github ermöglicht es Ihnen, schnell ein GitHub-Repository zu verlinken und dabei Statistiken wie die Anzahl der Stars und Forks in Echtzeit anzuzeigen und zu aktualisieren.

Beispiel 1:

{{< github repo="nunocoracao/blowfish" showThumbnail=true >}}

nunocoracao/blowfish

Personal Website & Blog Theme for Hugo

HTML

2423

628

GitLab Card

#

gitlab ermöglicht es Ihnen, schnell ein GitLab-Projekt (GitLabs Bezeichnung für Repository) zu verlinken. Es zeigt Echtzeit-Statistiken wie die Anzahl der Stars und Forks an. Im Gegensatz zu github kann es nicht die Hauptprogrammiersprache eines Projekts anzeigen. Schließlich kann eine benutzerdefinierte GitLab-Instanz-URL angegeben werden, solange der Endpunkt api/v4/projects/ verfügbar ist, was diesen Shortcode mit den meisten selbstgehosteten/Enterprise-Deployments kompatibel macht.

Beispiel 1:

{{< gitlab projectID="278964" >}}

Hugging Face Card

#

huggingface ermöglicht es Ihnen, schnell ein Hugging Face-Modell oder -Dataset zu verlinken und dabei Echtzeit-Informationen wie die Anzahl der Likes und Downloads sowie Typ und Beschreibung anzuzeigen.

Hinweis: Verwenden Sie entweder den Parameter model oder dataset, nicht beide.

Beispiel 1 (Modell):

{{< huggingface model="google-bert/bert-base-uncased" >}}

Beispiel 2 (Dataset):

{{< huggingface dataset="stanfordnlp/imdb" >}}

Icon

#

icon gibt ein SVG-Symbol aus und nimmt den Symbolnamen als einzigen Parameter. Das Symbol wird skaliert, um der aktuellen Textgröße zu entsprechen.

Beispiel:

{{< icon "github" >}}

Ausgabe:

Symbole werden mit Hugo-Pipelines gefüllt, was sie sehr flexibel macht. Blowfish enthält eine Reihe von integrierten Symbolen für soziale Netzwerke, Links und andere Zwecke. Auf der Seite Symbol-Beispiele finden Sie eine vollständige Liste der unterstützten Symbole.

Benutzerdefinierte Symbole können hinzugefügt werden, indem Sie Ihre eigenen Symbol-Assets im Verzeichnis assets/icons/ Ihres Projekts bereitstellen. Das Symbol kann dann im Shortcode mit dem SVG-Dateinamen ohne die Erweiterung .svg referenziert werden.

Symbole können auch in Partials verwendet werden, indem Sie das Icon-Partial aufrufen.

KaTeX

#

Der katex-Shortcode kann verwendet werden, um mathematische Ausdrücke zum Artikelinhalt hinzuzufügen, indem das KaTeX-Paket verwendet wird. Für die verfügbare Syntax siehe die Online-Referenz der unterstützten TeX-Funktionen.

Um mathematische Ausdrücke in einen Artikel einzufügen, platzieren Sie den Shortcode einfach irgendwo im Inhalt. Er muss nur einmal pro Artikel eingefügt werden und KaTeX rendert automatisch jedes Markup auf dieser Seite. Sowohl Inline- als auch Block-Notation werden unterstützt.

Inline-Notation kann durch Einschließen des Ausdrucks in \( und \) Trennzeichen erzeugt werden. Alternativ kann Block-Notation mit $$ Trennzeichen erzeugt werden.

Beispiel:

{{< katex >}}
\(f(a,b,c) = (a^2+b^2+c^2)^3\)

\(f(a,b,c) = (a^2+b^2+c^2)^3\)

Weitere Beispiele finden Sie auf der Seite Mathematische Notation-Beispiele.

Keyword

#

Die keyword-Komponente kann verwendet werden, um bestimmte wichtige Wörter oder Phrasen visuell hervorzuheben, z.B. berufliche Fähigkeiten usw. Der keywordList-Shortcode kann verwendet werden, um mehrere keyword-Elemente zu gruppieren. Jedes Element kann die folgenden Eigenschaften haben.

Die Eingabe erfolgt in Markdown, sodass Sie sie nach Belieben formatieren können.

Beispiel 1:

{{< keyword >}} *Super* Fähigkeit {{< /keyword >}}

Beispiel 2:

{{< keywordList >}}
{{< keyword icon="github" >}} Lorem ipsum dolor. {{< /keyword >}}
{{< keyword icon="code" >}} **Wichtige** Fähigkeit {{< /keyword >}}
{{< /keywordList >}}

{{< keyword >}} *Eigenständige* Fähigkeit {{< /keyword >}}

Lead

#

lead wird verwendet, um den Anfang eines Artikels hervorzuheben. Es kann verwendet werden, um eine Einleitung zu gestalten oder um auf eine wichtige Information aufmerksam zu machen. Wickeln Sie einfach jeden Markdown-Inhalt in den lead-Shortcode ein.

Beispiel:

{{< lead >}}
Wenn das Leben dir Zitronen gibt, mach Limonade daraus.
{{< /lead >}}

List

#

List zeigt eine Liste der neuesten Artikel an. Dieser Shortcode erfordert einen Grenzwert, um die Liste zu beschränken. Zusätzlich unterstützt er ein where und einen value, um Artikel nach ihren Parametern zu filtern. Beachten Sie, dass dieser Shortcode seine übergeordnete Seite nicht anzeigt, sie aber für den Grenzwert zählt.

Beispiel #1:

{{< list limit=2 >}}

Neue Beiträge

n9o.xyz ↗ ↖

Persönliche Seite Theme Author

Willkommen bei Blowfish

3 min

Neu Dokumentation

Beispiel #2:

{{< list title="Beispiele" cardView=true limit=6 where="Type" value="sample" >}}

Samples

LTR/RTL

#

ltr und rtl ermöglichen es Ihnen, Ihre Inhalte zu mischen. Viele Benutzer von RTL-Sprachen möchten Teile des Inhalts in LTR einfügen. Mit diesem Shortcode können Sie das tun, und durch die Verwendung von % als äußerstes Trennzeichen im Shortcode Hugo-Shortcodes wird jeder Markdown darin normal gerendert.

Beispiel:

- Dies ist eine Markdown-Liste.
- Standardmäßig LTR-Richtung
{{% rtl %}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{% /rtl %}}

• Dies ist eine Markdown-Liste.
• Standardmäßig LTR-Richtung

Markdown Importer

#

Dieser Shortcode ermöglicht es Ihnen, Markdown-Dateien aus externen Quellen zu importieren. Dies ist nützlich, um Inhalte aus anderen Repositories oder Websites einzubinden, ohne den Inhalt kopieren und einfügen zu müssen.

Beispiel:

{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}

Hi there 👋

#

🧠 Principal PM @ Docker (AI, agents, infra) · Creator of Blowfish · Ex-founder · Mentor & advisor

• 🚀 Personal blog - n9o.xyz

• 🐡 Creator and maintainer of Blowfish @ Blowfish page

• 🐳 Principal Product Manager @ Docker - working on cagent

• 📚 mentoring @ mentorcruise

Mermaid

#

mermaid ermöglicht es Ihnen, detaillierte Diagramme und Visualisierungen mit Text zu zeichnen. Es verwendet Mermaid im Hintergrund und unterstützt eine große Vielfalt an Diagrammen, Charts und anderen Ausgabeformaten.

Schreiben Sie einfach Ihre Mermaid-Syntax innerhalb des mermaid-Shortcodes und lassen Sie das Plugin den Rest erledigen.

Für Details zur Syntax und unterstützten Diagrammtypen siehe die offizielle Mermaid-Dokumentation.

Beispiel:

{{< mermaid >}}
graph LR;
A[Zitronen]-->B[Limonade];
B-->C[Gewinn]
{{< /mermaid >}}

graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]

Weitere Mermaid-Beispiele finden Sie auf der Seite Diagramme und Flussdiagramme-Beispiele.

Swatches

#

swatches gibt eine Reihe von bis zu drei verschiedenen Farben aus, um Farbelelemente wie eine Farbpalette zu präsentieren. Dieser Shortcode nimmt die HEX-Codes jeder Farbe und erstellt die visuellen Elemente für jede.

Beispiel

{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}

Ausgabe

Tabs

#

Der tabs-Shortcode wird häufig verwendet, um verschiedene Varianten eines bestimmten Schritts zu präsentieren. Zum Beispiel kann er verwendet werden, um zu zeigen, wie VS Code auf verschiedenen Plattformen installiert wird.

Beispiel

{{< tabs >}}

    {{< tab label="Windows" >}}
    Installation mit Chocolatey:

    ```pwsh
    choco install vscode.install
    ```

    oder Installation mit WinGet

    ```pwsh
    winget install -e --id Microsoft.VisualStudioCode
    ```
    {{< /tab >}}

    {{< tab label="macOS" >}}
    ```bash
    brew install --cask visual-studio-code
    ```
    {{< /tab >}}

    {{< tab label="Linux" >}}
    Siehe [Dokumentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
    {{< /tab >}}

{{< /tabs >}}

Ausgabe

choco install vscode.install

winget install -e --id Microsoft.VisualStudioCode

brew install --cask visual-studio-code

Timeline

#

Die timeline erstellt eine visuelle Zeitleiste, die für verschiedene Anwendungsfälle verwendet werden kann, z.B. berufliche Erfahrung, Projektmeilensteine usw. Der timeline-Shortcode basiert auf dem timelineItem-Unter-Shortcode, um jedes Element innerhalb der Hauptzeitleiste zu definieren. Jedes Element kann die folgenden Eigenschaften haben.

Beispiel:

{{< timeline >}}

{{< timelineItem icon="github" header="Überschrift" badge="Badge-Test" subheader="Unterüberschrift" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
{{< /timelineItem >}}


{{< timelineItem icon="code" header="Eine weitere großartige Überschrift" badge="Datum - heute" subheader="Großartige Unterüberschrift" >}}
Mit HTML-Code
<ul>
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ul>
{{< /timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="FANTASTISCH" >}}
Mit anderen Shortcodes
{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
{{< /timelineItem >}}

{{< timelineItem icon="code" header="Eine weitere großartige Überschrift">}}
{{< github repo="nunocoracao/blowfish" >}}
{{< /timelineItem >}}

{{< /timeline >}}

1. header

   badge test

   subheader

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
2. Another Awesome Header

   date - present

   Awesome Subheader

   Mit HTML-Code

   • Kaffee
   • Tee
   • Milch
3. Shortcodes

   AWESOME

   Mit anderen Shortcodes

   
4. Another Awesome Header

   

   nunocoracao/blowfish

   Personal Website & Blog Theme for Hugo

   HTML

   2423

   628

TypeIt

#

TypeIt ist das vielseitigste JavaScript-Tool zur Erstellung von Schreibmaschineneffekten auf dem Planeten. Mit einer einfachen Konfiguration können Sie einzelne oder mehrere Strings eingeben, die Zeilen umbrechen, sich gegenseitig löschen und ersetzen, und es kann sogar Strings mit komplexem HTML verarbeiten.

Blowfish implementiert eine Teilmenge der TypeIt-Funktionen mit einem Shortcode. Schreiben Sie Ihren Text innerhalb des typeit-Shortcodes und verwenden Sie die folgenden Parameter, um das gewünschte Verhalten zu konfigurieren.

Beispiel 1:

{{< typeit >}}
Lorem ipsum dolor sit amet
{{< /typeit >}}

Beispiel 2:

{{< typeit
  tag=h1
  lifeLike=true
>}}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
{{< /typeit >}}

Beispiel 3:

{{< typeit
  tag=h3
  speed=50
  breakLines=false
  loop=true
>}}
"Ehrlich gesagt, meine Liebe, das ist mir egal." Vom Winde verweht (1939)
"Ich werde ihm ein Angebot machen, das er nicht ablehnen kann." Der Pate (1972)
"Toto, ich habe das Gefühl, wir sind nicht mehr in Kansas." Der Zauberer von Oz (1939)
{{< /typeit >}}

Youtube Lite

#

Eine Verknüpfung zum Einbetten von YouTube-Videos mit der lite-youtube-embed-Bibliothek. Diese Bibliothek ist eine leichtgewichtige Alternative zu den Standard-YouTube-Einbettungen und wurde für Geschwindigkeit und Effizienz entwickelt.

Beispiel 1:

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools Demo" >}}

Beispiel 2:

Sie können alle Player-Parameter von YouTube für die Variable params verwenden, wie unten gezeigt:

Dieses Video startet nach 130 Sekunden (2m10)

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools Demo" params="start=130" >}}

Dieses Video hat keine UI-Steuerelemente, startet bei 130 Sekunden und stoppt 10 Sekunden später.

Um mehrere Optionen wie unten gezeigt zu verketten, müssen Sie das Zeichen & zwischen ihnen hinzufügen.

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools Demo" params="start=130&end=10&controls=0" >}}

Weitere Informationen finden Sie im youtubeLite GitHub-Repo und auf der YouTube-Seite für Player-Parameter.