Zum Inhalt springen
StarterGuide.dev

HTML-Snippets

Snippets sind wiederverwendbare Code-Schnipsel, die du beliebig oft dynamisch einbinden kannst.

Code, den du wiederverwenden möchtest, legst du als HTML-Datei im Verzeichnis src/snippets/ ab und bindest diesen dann über <include src="snippet.html"></include> ein, wobei snippet.html der Name deiner Datei ist.

Snippet erstellen

Damit du den Header bei einer Änderung nicht auf allein Unterseiten kopieren und einfügen musst, könntest du den Code in einem Snippet ablegen und dann auf allen Seiten einbinden.

  1. Erstelle eine neue Datei header.html im Verzeichnis src/snippets/ und füge den folgenden Code ein:

    src/snippets/header.html
    <header>
      <div>Meine Website</div>
    

      <nav>
        <a href="/">Start</a>
        <a href="/about">Über mich</a>
        <a href="/contact">Kontakt</a>
      </nav>
    </header>

  2. Öffne nun die Startseite index.html und alle Unterseiten, entferne dort den Header und ersetze ihn mit dem Snippet:

    src/index.html
    <body>
      <header>
        <div>Meine Website</div>
    

        <nav>
          <a href="/">Start</a>
          <a href="/about">Über mich</a>
          <a href="/contact">Kontakt</a>
        </nav>
      </header>
      <include src="header.html"></include>
    

      <h1>Startseite</h1>
    

      <p>Willkommen auf meiner Website.</p>
    </body>

    Das Starterkit wird nun den Inhalt der Datei header.html dynamisch an dieser Stelle einfügen. Wenn du Änderungen am Header vornimmst, werden sie auf allen Seiten übernommen.

Flexibler mit Parametern

Du kannst einem Snippet auch Parameter über das locals-Attribut übergeben, um sie noch flexibler zu gestalten. Das sieht so aus:

src/index.html
<include src="header.html" locals='{"title": "Meine Website"}'></include>

locals erwartet ein JSON-Datenobjekt in geschweiften Klammern {}, das Key- und Value-Paare (Schlüssel und Werte) enthält. In unserem Beispiel ist der Schlüssel title und der Wert Meine Website.

Den Schlüssel gibst du im Template mit zwei geschweiften Klammern an, der dann später automatisch mit dem Wert ersetzt wird:

src/snippets/header.html
<header>
  <div>{{ title }}</div>


  <nav>
    <a href="/">Start</a>
    <a href="/about">Über mich</a>
    <a href="/contact">Kontakt</a>
  </nav>
</header>

Praktische Beispiele

Du kannst Snippets auch mehrere Parameter übergeben. Das zeigt ich dir anhand von zwei Beispielen.

Das eine Beispiel ist eine klassische Karte, die du auf mehreren Unterseiten einbinden kannst, ohne das gesamte HTML kopieren zu müssen. Titel, Text und Icon übergibst du als Parameter individuell pro Seite.

Das andere Beispiel ist ein Header, dem du den Titel, sowie die aktuelle Seite als Parameter übergibst. So kannst du im CSS die aktive Seite hervorheben.

Um eine Karte zu erstellen, die du beliebig oft wiederverwenden kannst, erstellst du ein Snippet card.html:

src/snippets/card.html
<div class="card">
  <h2>{{ icon }} {{ title }}</h2>


  <p>{{ text }}</p>
</div>

In deinem Template bindest du die Karte dann so ein:

src/index.html
  <include src="card.html" locals='{
    "title": "Meine Karte",
    "text": "Das ist ein Text",
    "icon": "🚀"
  }'></include>

Auf den anderen Seiten tauschst du dann einfach die Werte aus.