← Zurück zum Überblick

Integrationsmodus im Detail konfigurieren

Standalone oder eingebettet — Schritt für Schritt beide Modi verstehen, URLs richtig angeben und das Ergebnis visuell prüfen

Auf dieser Seite

01Standalone-Modus Schritt für Schritt 02Eingebetteter Modus Schritt für Schritt 03URLs und Links richtig angeben 04Wie Header und Footer aussehen 05Häufige Fragen

01

Standalone-Modus Schritt für Schritt

Im Standalone-Modus sind die generierten HTML-Dateien komplett eigenständig. Kein Server, kein Build-Tool, kein Framework. Du öffnest eine Datei im Browser — und der Kurs läuft. Das macht diesen Modus ideal für schnelles Teilen, Offline-Nutzung und unkomplizierte Weitergabe.

So funktioniert die Nutzung:

📥

Download

→

📂

Entpacken

→

🌐

Im Browser öffnen

→

🧭

Navigieren

Was bedeutet das konkret?

✅

Kein Footer

Standalone-Dateien haben keinen Footer. Kein Impressum, kein Datenschutz-Link, kein Copyright-Hinweis. Die Seite endet nach dem letzten Inhaltsmodul.

✅

Keine externen Links

Kein GitHub-Icon, kein Docs-Link, keine Verweise auf externe Seiten. Alle Links sind relativ und verweisen nur auf andere Dateien im gleichen Ordner.

✅

Relative Pfade

Alle internen Verlinkungen nutzen relative Pfade (../l1/datei.html). Dadurch funktioniert die Navigation, egal wo der Ordner liegt.

✅

Komplett offline

Google Fonts werden über den Link geladen, aber alle Inhalte und die Navigation funktionieren auch ohne Internetverbindung. Die Schrift fällt dann auf System-Fonts zurück.

Ideal für: Teilen per E-Mail oder Slack, Ablage auf USB-Stick, Offline-Schulungen, interne Workshops ohne WLAN, schnelle Reviews im Flugzeug. Immer dann, wenn die Dateien für sich alleine stehen sollen.

✏️ Kurz getestet

Du möchtest den Kurs auf der GitHub Pages-Seite deines Unternehmens veröffentlichen. Welchen Modus wählst du?

Standalone — GitHub Pages braucht keine externen Links

Eingebettet — die Dateien werden Teil einer Website

Beide — der Skill erstellt automatisch zwei Versionen

02

Eingebetteter Modus Schritt für Schritt

Im eingebetteten Modus werden die HTML-Dateien Teil einer Website. Der Skill baut einen Header mit externen Links und einen Footer mit rechtlichen Angaben ein. Alle externen Links öffnen in einem neuen Tab mit target="_blank" rel="noopener".

Was der eingebettete Modus hinzufügt:

1

Header bekommt externe Links

In der Navigationsleiste erscheinen Links zum GitHub-Repository und ggf. zur Dokumentation. Ein GitHub-Icon verlinkt direkt zum Repo.

2

Footer wird generiert

Am Ende jeder Seite erscheint ein Footer mit Impressum-Link (Pflicht), optional Datenschutz-Link und optional ein Copyright-Hinweis.

3

Externe Links öffnen im neuen Tab

Alle Verweise auf externe Seiten (GitHub, Impressum, Datenschutz) nutzen target="_blank" rel="noopener", damit der Kurs nicht verlassen wird.

4

Interne Navigation bleibt relativ

Die Verlinkung zwischen den Kursseiten funktioniert weiterhin mit relativen Pfaden. Nur die zusätzlichen Links sind absolut.

Wofür ist das gedacht? GitHub Pages, Netlify, Vercel, firmeneigene Dokumentationsportale, internes Wiki — überall dort, wo die Kursdateien in einen größeren Website-Kontext eingebettet werden und ein einheitliches Erscheinungsbild brauchen.

03

URLs und Links richtig angeben

Wenn du den eingebetteten Modus wählst, fragt der Skill nach URLs. Hier sind die Regeln — was du angeben musst, was optional ist und wie die URLs aussehen sollten.

🔗

GitHub-URL

Muss die Repository-Root sein. Wird im Header als Icon-Link angezeigt.

Pflicht

✅ https://github.com/user/repo

❌ github.com/user/repo

⚖️

Impressum-URL

Volle URL inklusive https://. Erscheint als Link im Footer.

Pflicht

✅ https://example.com/impressum

❌ /impressum

🛡️

Datenschutz-URL

Ebenfalls volle URL. Weglassen, wenn nicht benötigt — der Footer wird dann ohne diesen Link generiert.

Optional

✅ https://example.com/privacy

©️

Copyright-Text

Freier Textstring. Keine URL — einfach der Text, der im Footer stehen soll.

Optional

📋 Checkliste vor dem Start (eingebetteter Modus)

☑️ GitHub-URL bereitgelegt? Muss die Repository-Root sein (z.B. https://github.com/org/repo)

☑️ Impressum-URL vorhanden? Volle URL mit https:// am Anfang

⬜ Datenschutz-URL? Optional — nur angeben, wenn eine Datenschutzerklärung existiert

Tipp: Wenn du unsicher bist, ob eine URL korrekt ist, öffne sie im Browser. Wenn die Seite lädt, ist die URL richtig. Relative Pfade wie /impressum oder Pfade ohne Protokoll wie example.com funktionieren nicht.

04

Wie Header und Footer aussehen

Damit du vor der Generierung weißt, was dich erwartet: Hier sind visuelle Mockups beider Modi. So sehen Header und Footer in den fertigen Dateien aus.

Standalone-Modus — Navigation

Kurstitel 🇬🇧

Kursinhalt — Module, Text, Visualisierungen ...

Kein Footer. Seite endet nach dem letzten Modul.

Eingebetteter Modus — Navigation + Footer

Kurstitel GitHub 🇬🇧

Kursinhalt — Module, Text, Visualisierungen ...

Header mit GitHub-Link. Footer mit Impressum, Datenschutz, GitHub und Copyright.

Element	Standalone	Eingebettet
Header-Titel	Kurstitel + Dots + Sprachschalter	Kurstitel + Dots + GitHub-Link + Sprachschalter
GitHub-Icon	—	Verlinkt zum Repository (neuer Tab)
Footer	—	Impressum + optional Datenschutz + optional Copyright
Externe Links	Keine	Alle mit target="_blank" rel="noopener"

05

Häufige Fragen

Die wichtigsten Fragen zum Integrationsmodus — kurz und direkt beantwortet.

Kann ich später von Standalone auf Eingebettet wechseln? ›

Nicht ohne Neugenerierung. Der Modus bestimmt, ob Header und Footer in den HTML-Code geschrieben werden. Ein nachträglicher Wechsel würde bedeuten, dass der Skill den Kurs komplett neu erzeugen muss. Am einfachsten: Den Skill erneut starten und diesmal den anderen Modus wählen.

Kann ich Impressum angeben, aber Datenschutz weglassen? ›

Ja. Die Datenschutz-URL ist optional. Wenn du sie nicht angibst, erscheint im Footer nur der Impressum-Link (und ggf. Copyright). Der Skill fragt danach, aber du kannst das Feld einfach überspringen.

Funktionieren externe Links offline? ›

Nein. Externe Links (GitHub, Impressum, Datenschutz) benötigen eine Internetverbindung. Die interne Navigation zwischen den Kursseiten funktioniert aber vollständig offline, da sie relative Pfade nutzt. Im Standalone-Modus gibt es keine externen Links, daher ist dort alles offline verfügbar.

Kann ich den Footer nachträglich anpassen? ›

Der Skill generiert den Footer automatisch basierend auf deinen URLs. Du kannst das HTML danach aber manuell bearbeiten — es sind einfache <footer>-Elemente. Such im Code nach class="footer" und ändere die Links oder Texte nach Bedarf.

Navigation

← Zurück zur Übersicht