Snippets🔖

Manchmal möchte mal Elemente wiederhole oder ein eigenes Element erstellen, um z.B. weniger schreiben zu müssen. Snippets erlauben genau das.

Du kannst in deinen Snippets auf die Hyperbook-Konfiguration zugreifen, indem du z.B. {{{ hyperbook.name }}} verwendest.

Beispiel🔖

Beispiel 1: Block🔖

Hier ist ein einfaches Beispiel für ein Snippet zur Verwendung eines Protect-Elements mit demselben Passwort und derselben ID in Ihrem Hyperbook. Das Snippet in snippets/password.md.hbs:

:::protect{id="1" password="hyperbook" description="Das Passwort ist der Name dieses Projekts."}
{{{ content }}}
:::
{{#if hint}}
:::alert{info}
Hyperbook ist das Passwort.
:::
{{/if}}

Das Markdown, das Sie in Ihr Hyperbook einfügen müssen:

:::Snippet{#password}
:smiley:
:::

Das Ergebnis:

Beispiel 2: Dynamische Doppelpunkt-Ebenen🔖

Snippets stellen automatisch Variablen für verschiedene Doppelpunkt-Ebenen bereit, um ordnungsgemäße Verschachtelung zu handhaben:

Das Snippet in snippets/alert.md.hbs:

{{{ c1 }}}alert{label="Info" color="#3B82F6"}
{{{ content }}}
{{{ c1 }}}

Verfügbare Doppelpunkt-Ebenen-Variablen:

• c - Gleiche Anzahl von Doppelpunkten wie der Snippet-Block
• c1, c2, c3, c4 - Ein bis vier mehr Doppelpunkte (für tiefere Verschachtelung)
• l1, l2, l3, l4 - Ein bis vier weniger Doppelpunkte (für oberflächlichere Verschachtelung)

Beispielverwendung mit verschiedenen Verschachtelungsebenen:

::::Snippet{#alert}
Dies wird in einem 5-Doppelpunkt-Alert-Block umschlossen.
::::
 
::Snippet{#alert}
Dies wird in einem 3-Doppelpunkt-Alert-Block umschlossen.
::

Ergebnis:

• Erster Fall: :::::alert{...} (4 + 1 = 5 Doppelpunkte mit c1)
• Zweiter Fall: :::alert{...} (2 + 1 = 3 Doppelpunkte mit c1)

Dies gewährleistet ordnungsgemäße Verschachtelung, unabhängig davon, wie tief Ihr Snippet in anderen Markdown-Blöcken verschachtelt ist.

Example 3: Block mit Parameter🔖

Du kannst auch Parameter für deine Snippets definieren, um sie dynamisch zu machen. Zum Beispiel kann man userem Passwort-Snippet den hint-Parameter übergeben. Wenn dieser übergeben wird, dann wird ein Hinweis gezeigt.

:::Snippet{#password hint=true}
 
::qr{value="https://hyperbook.openpatch.org" size="XL"}
 
:::

Example 4: Im Text🔖

{{#times n}}
  :smiley:
{{/times}}

:Snippet{#smiley n=10}

Wir sind zehn Smilies: 😃 😃 😃 😃 😃 😃 😃 😃 😃 😃

Parameter🔖

Du kannst Parameter in deinem Snippet verwenden, indem du geschweifte Klammern benutzt.

{{{p1}}}

Drei geschweifte Klammern geben den rohen Inhalt wieder.

Zwei geschweifte Klammern den HTML-escapten Inhalt.

Inhalt🔖

Wenn dein Snippet über mehrere Zeilen geht, kannst du den content-Parameter benutzen. Siehe Beispiel 1.

Helpers🔖

Du kannst die folgenden Helfer in deinem Snippet verwenden.

if🔖

Verwende if, um Blöcke anhand einer Bedingung anzuzeigen.

{{#if p}}
  content
{{/if}}

unless🔖

Verwende unless, wenn du das gegenteil von if möchtest.

{{#unless hint}}
  content
{{/unless}}

times🔖

Verwende times, wenn du einen Block mehrmals angezeigt haben möchtest.

{{#times 10}}
  Hi
{{/times}}

file🔖

Verwende file, wenn du den Inhalt einer anderen Datei einbinden möchtest.

{{{file "/archives/project-1/main.c"}}}

Du kannst außerdem auch nur ausgewählte Zeilen einbinden.

{{{file "/archives/project-1/main.c" "1,3-4"}}}

Und du kannst definieren, ob ein Ausblendungssymbol gezeigt werden soll.

{{{file "/archives/project-1/main.c" "1,3-4" "// ..."}}}

rfile🔖

rfile funktioniert wie file, aber die Datei wird von der Wurzel eines git-Repository gelesen.

{{{rfile "/path/to/file"}}}

base64🔖

Du kannst auch Mediendateien einbetten.

{{base64 "path/relative/to/root/folder"}}

Dies funktioniert am besten mit dem image Block:

![]({{base64 "path/relative/to/root/folder"}})

concat🔖

{{concat "Hi" " there"}}

Hi there

camelcase🔖

{{camcelcase "This is a test"}}

thisIsATest

pascalcase🔖

{{pascalcase "This is a test"}}

ThisIsATest

dashcase🔖

{{dashcase "This is a test"}}

This-is-a-test

lowercase🔖

{{lowercase "This is a test"}}

this is a test

uppercase🔖

{{lowercase "This is a test"}}

THIS IS A TEST

replace🔖

{{replace "Give me Banana Banana" "Banana" "Apple"}}

Give me Apple Banana

replaceAll🔖

{{replaceAll "Give me Banana Banana" "Banana" "Apple"}}

Give me Apple Apple