Snippets🔖

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

Beispiel🔖

Beispiel 1: Block🔖

Hier ist ein einfaches Beispiel eines Snippets für einen geschützen Bereich mit demselben Passwort.

Das Snippet ist platziert in templates/password.md.hbs:

:::protect{id="1" password="hyperbook" description="The password is the name of this project."}
 
{{{ content }}}
 
:::
 
{{#if hint}}
 
:::alert{info}
 
Hyperbook is the password.
 
:::
 
{{/if}}

Diesen Markdown-Block musst du in deinem Hyperbook platzieren.

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

Das ist das Ergebnis:

Example 2: 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 3: 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" "// ..."}}}

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