DevPanicZone Logo DevPanicZone! Cheatsheets.

Navigation Generator v2.2

Automatische Header, Footer, Sidebars, Breadcrumbs und Tutorial-Buttons mit einem Befehl generieren.

Alle Navigationen werden automatisch durch das Script generate-navigation.js erstellt. Ich brauche nur minimale Platzhalter im HTML zu platzieren - das Script füllt den Rest!

Grundgerüst Tutorial
HTML 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <!------------------------------------------------
    ======== DESCRIPTION & KEYWORDS ERSETZEN ========
    ------------------------------------------------->
    <meta name="description" content="----------- DIESER TEXT WIRD ERSETZT --------------">
    <meta name="keywords" content="-------------- DIESER TEXT WIRD ERSETZT --------------">
    <meta name="author" content="DevPanicZone">

    <!------------------------------------------
    ============== TITLE ERSETZEN ==============
    ------------------------------------------->
    <title>HTML Basics | DevPanicZone</title>
    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg">
    <link rel="icon" type="image/png" href="/assets/icons/favicon.png">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/tutorials.css">
    <link rel="stylesheet" href="/assets/css/sidebar.css">
    <link rel="stylesheet" href="/assets/vendor/prism/prism.css">
</head>

<body>
    <!-- Header-Start -->
    <header class="site-header">
        <!-- Main-Nav-Start -->
        <!-- Main-Nav-End -->
    </header>
    <!-- Header-End -->

    <main class="site-main">

        <!-- Hero -->
        <section class="hero tutorial-hero">
            <div class="container">
                <nav class="breadcrumbs"></nav>
                <!----------------------------------------------- 
                ================ HERO BEARBEITEN ================
                ------------------------------------------------>
                <h1 class="hero-title">HERO Title</h1>
                <p class="hero-subtitle">HERO Subtitle.</p>
            </div>
        </section>

        <!-- Floating Button Links (Sidebar) -->
        <button class="sidebar-toggle" id="sidebarToggle" aria-label="Inhaltsverzeichnis öffnen" title="Auf dieser Seite">
            <span class="toggle-icon">☰</span>
        </button>

        <!-- Floating Button Rechts (Tutorial Navigation) -->
        <button class="tutorial-nav-toggle" id="tutorialNavToggle" aria-label="Tutorial Navigation öffnen">
            <span class="toggle-icon">
                <!-- 
                <img src="/assets/icons/library.svg" 
                alt="Library Icon" class="library-icon"/> 
                -->
                <svg class="library-icon" aria-hidden="true">
                    <use href="#dpz-library"></use>
                </svg>
            </span>
        </button>

        <!-- Sidebar Overlay für Mobile -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>

        <!-- Tutorial Layout -->
        <div class="tutorial-layout">

            <!-- Linke Sidebar (Floating Panel) -->
            <aside class="tutorial-sidebar" id="tutorialSidebar" aria-label="Inhaltsverzeichnis">
                <div class="sidebar-header">
                    <h2 class="sidebar-title no-toc">Auf dieser Seite</h3>
                    <button class="sidebar-close" id="sidebarClose" aria-label="Schließen">
                        <span>×</span>
                    </button>
                </div>

                <nav class="sidebar-toc" aria-label="Inhaltsverzeichnis">
                    <ul class="toc-list">
                        <!-- Sidebar-Anchor-Start -->
                        <!-- Sidebar-Anchor-End -->
                    </ul>
                </nav>
            </aside>

            <!-- Rechte Sidebar (Floating Panel) -->
            <aside class="tutorial-related" aria-label="Tutorial-Navigation">
                <div class="sidebar-header">
                    <h3 class="sidebar-title no-toc">Tutorials</h3>
                    <button class="sidebar-close" id="tutorialNavClose" aria-label="Schließen">
                        <span>×</span>
                    </button>
                </div>

                <div class="sidebar-nav">
                    <ul class="sidebar-nav-list"></ul>
                </div>
            </aside>

            <!-- Wrapper .container -->
            <div class="container">

                <!-- Abschnitte in Sections -->
                <section class="tutorials-content">
                    <h2>Abschnittstitel</h2>
                    <p>Inhalt...</p>
                </section>

                <!-- Weitere Sections nach Bedarf -->
                <section class="tutorials-content">
                    <h2>Weiterer Abschnitt</h2>
                    <p>Inhalt...</p>
                </section>

                <!-- Weitere Sections nach Bedarf -->
                <section class="tutorials-content">
                    <h3>Weiterer Abschnitt</h3>
                    <p>Inhalt...</p>
                </section>

                <!-- Weitere Sections nach Bedarf -->
                <section class="tutorials-content">
                    <h4>Weiterer Abschnitt</h4>
                    <p>Inhalt...</p>
                </section>

                <!-- DELETE: Latest Tutorials Section wird automatisch geladen, keine Placeholder -->

                <!-- Prev/Next Navigation -->
                <section class="tutorials-content">
                    <nav class="tutorial-nav"></nav>
                </section>

            </div> <!-- Wrapper .container -->

        </div> <!-- Tutorial Layout -->

    </main>

    <!-- Footer-Start -->
    <footer class="site-footer">
        <!-- Wird automatisch generiert -->
    </footer>
    <!-- Footer-End -->
    
    <script src="/assets/js/code-copy.js" defer></script>
    <script src="/assets/js/sidebar.js" defer></script>
    <script src="/assets/vendor/prism/prism.js" defer></script>

</body>

</html>
Grundgerüst Category
HTML 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <!------------------------------------------------ 
    ========== DESCRIPTION & KEYWORDS ERSETZEN ==========
    ------------------------------------------------->
    <meta name="description" content="-------------- DIESER TEXT WIRD ERSETZT --------------">
    <meta name="keywords" content="-------------- DIESER TEXT WIRD ERSETZT --------------">
    <meta name="author" content="DevPanicZone">
    <!------------------------------------------ 
    ============== TITLE ERSETZEN ==============
    ------------------------------------------->
    <title>Title | DevPanicZone</title>
    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg">
    <link rel="icon" type="image/png" href="/assets/icons/favicon.png">
    <link rel="stylesheet" href="/assets/css/style.css">
</head>

<body>
    <!-- Header-Start -->
    <header class="site-header">
        <!-- Wird automatisch generiert -->
    </header>
    <!-- Header-End -->

    <main class="site-main">

        <!-- Hero -->
        <section class="hero tutorial-hero">
            <div class="container">
                <nav class="breadcrumbs"></nav>
                <h1 class="hero-title">Tutorial-Titel</h1>
                <p class="hero-subtitle">Beschreibung</p>
            </div>
        </section>

        <!-- Wrapper -->
        <div class="container">

            <!-- Intro -->
            <section class="tutorials-content">
                <div>

                    <div class="grid-2col">

                        <div class="grid-2col-bg">
                            <h2>Was dich hier erwartet</h2>
                            <p>Hier ertelle ich meine eigene Dokumentation.</p>
                            <p>Wo setzte ich welche Platzhalter für Automationen, schnelle Copy&Paste Code-Snippets und
                                Grundgerüste, CSS-Details.</p>
                        </div>
                        <div class="grid-2col-bg">
                            <h2>Warum das wichtig ist</h2>
                            <p>Für einen schnelleren Workflow.</p>
                            <p>Nachvollziehbarkeit, auch nach längerer Pause.</p>
                        </div>
                    </div>
                </div>
            </section>            

            <!-- Tutorial Links Section -->
            <section class="tutorials-content">
                <div>
                    <h2>Wähle ein Thema und starte direkt durch</h2>
                    <p class="section-subtitle"></p>

                    <!-- Wichtig: data-category muss mit dem Ordnernamen übereinstimmen -->
                    <!-- Tutorial-Buttons-Start -->
                    <div id="tutorialButtons" class="tutorial-buttons" data-category="documentation">
                        <!-- Wird automatisch generiert -->
                    </div>
                    <!-- Tutorial-Buttons-End -->
                </div>
            </section>

            <!-- Latest Tutorials Section - IMPORTANT: data-category! -->
            <section class="categories">
                <h2>Zuletzt hinzugefügt</h2>
                <div id="categoryLatestTutorials" class="tutorials-grid" data-category="documentation">
                    <!-- Wird per JavaScript aus /assets/data/tutorials.json geladen -->
                    <p class="text-muted">Tutorials werden geladen...</p>
                </div>
            </section>


        </div> <!-- Wrapper .container -->
    </main>

    <!-- Footer-Start -->
    <footer class="site-footer">
        <!-- Wird automatisch generiert -->
    </footer>
    <!-- Footer-End -->

</body>

</html>
Workflow-Übersicht
  • Schritt 1: Tutorial Grundgerüst mit den minimalen Platzhaltern im HTML-Dokument platzieren.
  • Schritt 2: Neue Tutorial-Seite in in der generate-navigation.js unter TUTORIAL_ORDER für die gewünschte Reihenfolge eintragen.
  • Schritt 3: Optional: Custom-Titel in CUSTOM_TITLES definieren.
  • Schritt 4: npm run build ausführen.
  • Schritt 5: Änderungen prüfen und committen.
  • Optional: const CUSTOM_TITLES überschreibt H1 aus HTML für die rechte Sidebar und die Tutorial Buttons auf den Kategorieseiten.
  • Optional: const TOC_CUSTOM_TITLES überschreibt H2/H3 Text für Anzeige in der linken Sidebar.
  • Optional: const CATEGORY_NAMES Hier können neue Kategrorien für das Dropdown in der Main-Navigation eingetragen werden.
Was wird automatisch generiert?
  • Header: Kompletter Header mit Logo, Main-Nav-Dropdown, Theme Toggle, Burger Menu, Search
  • Footer: Kompletter Footer mit Copyright, Links, Scroll-to-Top Button und Scripts
  • Breadcrumbs: Navigationspfad (Home › Kategorie › Aktuelles Tutorial)
  • Prev/Next Navigation: "Vorheriges" und "Nächstes" Tutorial-Links mit Kategorie-Anzeige
  • Sidebar Links (TOC): Inhaltsverzeichnis aus h2/h3 Überschriften
  • Sidebar Rechts: Liste aller Tutorials der aktuellen Kategorie, gruppiert nach Unterkategorie
  • Tutorial-Buttons: Button-Übersicht auf Kategorieseiten
  • "Mehr aus [Kategorie]": Latest Tutorials Section auf Tutorial-Seiten
  • tutorials.json: JSON-Datei mit allen Tutorial-Metadaten für die Cards
Blacklist: Ignorierte Ordner

Bestimmte Ordner werden von allen Navigations-Funktionen ignoriert:

JavaScript 
// Blacklist: Diese Ordner werden ignoriert
const BLACKLIST_FOLDERS = ['noupload', 'node_modules', '.git', 'assets', 'snippet-collection'];

Weitere Ordner können in einfachen 'Anführungszeichen' hinzugefügt werden, immer kommagetrennt.

Warum werden diese Ordner ignoriert?

  • noupload - Test-Dateien, die nicht live gehen sollen
  • node_modules - NPM-Abhängigkeiten
  • .git - Git-Versionskontrolle
  • assets - CSS, JS, Bilder (keine HTML-Inhalte)

Root-Dateien Ausnahmen

Bestimmte Root-Level HTML-Dateien werden vom Script ignoriert:

JavaScript 
const ROOT_FILES_EXCLUDE = [
    'search.html', // Wird automatisch generiert
];

Minimale Platzhalter - das braucht mein HTML

Das Generierungs-Script braucht nur minimale Platzhalter im HTML. Alles zwischen den Markern wird automatisch gefüllt oder ersetzt!

Kommentar-Marker auf einen Blick (gekürzt)
  • <!-- Main-Nav-Start --> / <!-- Main-Nav-End --> - Header Navigation
  • <!-- Sidebar-Anchor-Start --> / <!-- Sidebar-Anchor-End --> - Linke Sidebar TOC
  • <!-- Rechte Sidebar (Floating Panel) --> - Rechte Sidebar
  • <nav class="breadcrumbs"></nav> - Breadcrumbs (wird komplett ersetzt)
  • <nav class="tutorial-nav"> - Prev/Next (wird befüllt)
  • <!-- Footer-Start --> / <!-- Footer-End --> - Footer (wird befüllt)
  • <!-- Tutorial-Buttons-Start --> / <!-- Tutorial-Buttons-End --> - Buttons (nur für Kategorieseiten).
  • Benötigte Scripts: s. Grundgerüst

1. Header (ALLE Seiten)

Der Header wird komplett automatisch generiert - Logo, Main-Nav mit Dropdown, Theme Toggle, Burger Menu, Search. Das Snippet wird direkt nach dem öffnenden <body> eingefügt.

HTML 
<!-- Header-Start -->
<header class="site-header">
    <!-- Wird automatisch generiert -->
</header>
<!-- Header-End -->

Das war's! Alles zwischen <!-- Header-Start --> und <!-- Header-End --> wird vom Script ersetzt.

Detailliertes Tutorial zum Main Nav

Die linke Sidebar zeigt ein Inhaltsverzeichnis aus allen h2 - h3 Überschriften der Seite.

HTML 
<!-- Linke Sidebar (Floating Panel) -->
<aside class="tutorial-sidebar" id="tutorialSidebar" aria-label="Inhaltsverzeichnis">
    <div class="sidebar-header">
        <h2 class="sidebar-title no-toc">Auf dieser Seite</h3>
        <button class="sidebar-close" id="sidebarClose" aria-label="Schließen">
            <span>×</span>
        </button>
    </div>

    <nav class="sidebar-toc" aria-label="Inhaltsverzeichnis">
        <ul class="toc-list">
            <!-- Sidebar-Anchor-Start -->
            <!-- Sidebar-Anchor-End -->
        </ul>
    </nav>
</aside>

Alles zwischen <!-- Sidebar-Anchor-Start --> und <!-- Sidebar-Anchor-End --> wird vom Script generiert.

Überschriften ausschließen: Füge class="no-toc" zu Überschriften hinzu, die NICHT im Inhaltsverzeichnis erscheinen sollen:

HTML 
<h2 class="no-toc">Diese Überschrift erscheint nicht in der Sidebar</h2>
Detailliertes Tutorial zu den Sidebars

3. Sidebar Rechts (Tutorial-Nav) - nur Tutorial-Seiten

Die rechte Sidebar zeigt alle Tutorials der aktuellen Kategorie.

HTML 
<!-- Rechte Sidebar (Floating Panel) -->
<aside class="tutorial-related">
    <div class="sidebar-header">
        <h2 class="sidebar-title no-toc">Tutorials</h3>
        <button class="sidebar-close" id="tutorialNavClose" aria-label="Schließen">
            <span>×</span>
        </button>
    </div>

    <div class="sidebar-nav">
        <ul class="sidebar-nav-list"></ul>
    </div>
</aside>

Die <ul class="sidebar-nav-list"></ul> muss leer sein!

Detailliertes Tutorial zu den Sidebars

4. Breadcrumbs (nur Tutorial-Seiten)

Die Breadcrumbs werden automatisch aus dem Dateipfad generiert.

HTML 
<!-- Hero -->
<section class="hero tutorial-hero">
    <div class="container">
        <nav class="breadcrumbs"></nav>
        <h1 class="hero-title">Dein Tutorial-Titel</h1>
        <p class="hero-subtitle">Deine Beschreibung</p>
    </div>
</section>

Die <nav class="breadcrumbs"></nav> muss leer sein - das Script füllt sie!

Beispiel-Output: Home › CSS › CSS Basics

Detailliertes Tutorial zu den Breadcrumbs

5. Prev/Next Navigation (nur Tutorial-Seiten)

Die "Vorheriges/Nächstes"-Navigation wird automatisch durch generate-navigation.js basierend auf der manuellen Reihenfolge in TUTORIAL_ORDER generiert.

HTML 
<!-- Prev/Next Navigation -->
<section class="tutorials-content">
    <nav class="tutorial-nav"></nav>
</section>

Die <nav class="tutorial-nav"></nav> muss komplett leer sein - kein <div> , kein <a> , nichts!

Detailliertes Tutorial zu den Prev / Next Buttons

Der Footer wird komplett automatisch generiert - inklusive Copyright, Navigation, Scroll-to-Top Button und allen benötigten Scripts.

HTML (Platzhalter) 
<!-- Footer-Start -->
<footer class="site-footer">
    <!-- Wird automatisch generiert -->
</footer>
<!-- Footer-End -->

Nach npm run build wird daraus:

HTML (generierter Output) 
<!-- Footer-Start -->
<footer class="site-footer">
    <div class="container">
        <div class="footer-content">
            <p class="footer-text">© <span id="currentYear">2025</span> DevPanicZone. Alle Rechte vorbehalten.</p>
            <nav class="footer-nav">
                <a href="/impressum.html">Impressum</a>
                <a href="/datenschutzerklaerung.html">Datenschutz</a>
            </nav>
        </div>
    </div>
</footer>
<button id="scrollTopBtn" title="Nach oben">↑</button>
<script src="/assets/js/main.js" defer></script>
<script src="/assets/js/search.js" defer></script>
<script src="/assets/js/scroll-spy.js" defer></script>
<script src="/assets/js/latest-tutorials.js" defer></script>
<!-- Footer-End -->
Im Footer automatisch enthalten:
  • Copyright mit dynamischem Jahr #currentYear
  • Footer-Navigation zu Impressum und Datenschutz
  • Scroll-to-Top Button
  • main.js - Theme Toggle, Dropdown, Mobile Menu, Smooth Scroll
  • search.js - Globale Suche
  • scroll-spy.js - Aktive Sidebar-Links beim Scrollen
  • latest-tutorials.js - Lädt Tutorial-Cards aus JSON

7. Tutorial-Buttons (nur Kategorieseiten)

Auf Kategorieseiten (z.B. /tutorials/html/index.html ) werden automatisch alle Tutorials dieser Kategorie als Button-Grid angezeigt. Die Liste wird aus TUTORIAL_ORDER generiert.

HTML 
<!-- Tutorial-Buttons-Start -->
<div id="tutorialButtons" class="tutorial-buttons" data-category="css">
    <!-- Wird automatisch generiert -->
</div>
<!-- Tutorial-Buttons-End -->
Wichtig: data-category

Das data-category Attribut muss dem Ordnernamen entsprechen:

  • data-category="html" für /tutorials/html/
  • data-category="css" für /tutorials/css/
  • data-category="javascript" für /tutorials/javascript/
  • data-category="php" für /tutorials/php/
  • data-category="bootstrap" für /tutorials/bootstrap/
  • data-category="misc" für /tutorials/misc/ (...)
Detailliertes Tutorial zu den Buttons auf der Kategorieseite

8. Latest Tutorials System

Das Latest Tutorials System zeigt die neuesten Tutorials auf der Startseite und kategoriebasierte Empfehlungen auf Kategorie- und Tutorial-Seiten. Es besteht aus zwei Teilen: Der automatischen JSON-Generierung und dem clientseitigen Rendering.

Wie funktioniert es?
  • npm run build erstellt /assets/data/tutorials.json mit allen Tutorial-Metadaten
  • latest-tutorials.js lädt diese JSON zur Laufzeit im Browser und rendert die Cards
  • Das HTML-Grundgerüst muss manuell eingefügt werden (außer auf Tutorial-Seiten)

Was wird durch npm run build erstellt?

Das Script generate-navigation.js erstellt die Datei /assets/data/tutorials.json mit allen Tutorial-Metadaten:

JSON (Beispiel-Auszug) 
{
  "generated": "2025-06-05T12:00:00.000Z",
  "total": 42,
  "latest": [
    {
      "title": "CSS Organization",
      "excerpt": "Strukturiere dein CSS wie ein Profi...",
      "url": "/tutorials/css/css-specials/css-organization.html",
      "category": "css",
      "categoryDisplay": "CSS",
      "badgeClass": "card-badge-css"
    }
  ],
  "all": [...],
  "byCategory": {
    "html": [...],
    "css": [...],
    "javascript": [...]
  }
}

Welche Tutorials sind "Latest"?

Die neuesten Tutorials für die Startseite werden manuell in generate-navigation.js gepflegt:

JavaScript 
// In generate-navigation.js
const LATEST_TUTORIALS = [
    'tutorials/css/css-specials/css-organization.html',
    'tutorials/javascript/javascript-basics/js-security.html',
    'tutorials/misc/web/console-security.html',
    'tutorials/php/php-basics/php-security.html'
];
Workflow: Neues Tutorial als "Latest" markieren
  1. Öffne generate-navigation.js
  2. Finde das Array LATEST_TUTORIALS
  3. Füge den Pfad zum neuen Tutorial am Anfang hinzu
  4. Entferne das letzte Tutorial (Array sollte max. 4 Einträge haben)
  5. Führe npm run build aus

HTML-Platzhalter für Latest Tutorials

Je nach Seitentyp gibt es unterschiedliche Platzhalter:

Startseite (index.html im Root):

HTML 
<!-- Latest Tutorials Section -->
<section class="categories">
    <h2>Zuletzt hinzugefügt</h2>
    <div id="latestTutorials" class="tutorials-grid">
        <!-- Wird per JavaScript aus /assets/data/tutorials.json geladen -->
        <p class="text-muted">Tutorials werden geladen...</p>
    </div>
</section>

Kategorieseiten (z.B. tutorials/html/index.html):

HTML 
<!-- Latest Tutorials Section - WICHTIG: data-category! -->
<section class="categories">
    <h2>Zuletzt hinzugefügt</h2>
    <div id="categoryLatestTutorials" class="tutorials-grid" data-category="html">
        <!-- Wird per JavaScript aus /assets/data/tutorials.json geladen -->
        <p class="text-muted">Tutorials werden geladen...</p>
    </div>
</section>

Tutorial-Seiten (wird automatisch generiert!):

Auf Tutorial-Seiten wird die "Mehr aus [Kategorie]" Section automatisch durch npm run build eingefügt. Es muss kein Platzhalter gesetzt werden!

HTML (automatisch generiert) 
<!-- Latest-Tutorials-Start -->
<section class="categories">
    <h2 id="mehr-aus-css">Mehr aus CSS</h2>
    <div id="categoryLatestTutorials" class="tutorials-grid" data-category="css">
        <!-- Wird per JavaScript aus /assets/data/tutorials.json geladen -->
        <p class="text-muted">Tutorials werden geladen...</p>
    </div>
</section>
<!-- Latest-Tutorials-End -->
Wichtig: Unterschiedliche IDs beachten!
  • id="latestTutorials" → Nur Startseite (zeigt die 4 manuell gepflegten aus LATEST_TUTORIALS)
  • id="categoryLatestTutorials" → Kategorie- und Tutorial-Seiten (zeigt die letzten 4 dieser Kategorie)

Das data-category Attribut muss dem Ordnernamen entsprechen!

Woher kommt der Excerpt-Text?

Der Beschreibungstext auf den Tutorial-Cards wird automatisch aus dem Hero-Bereich der Tutorial-Datei extrahiert:

HTML 
<!-- Der Text aus .hero-subtitle wird als Excerpt verwendet -->
<section class="hero tutorial-hero">
    <div class="container">
        <h1 class="hero-title">Mein Tutorial-Titel</h1>
        <p class="hero-subtitle">Dieser Text erscheint auf der Card!</p>
    </div>
</section>

Das Script sucht nach diesen Selektoren (in dieser Reihenfolge):

  1. .hero-subtitle
  2. .hero-text
  3. .hero p
  4. .tutorial-hero p

Der Text wird auf maximal 160 Zeichen gekürzt.

Detailliertes Tutorial zum Latest Tutorials System

9. Scripts

Die meisten Scripts werden automatisch im Footer eingebunden. Je nach Seitentyp werden zusätzliche Scripts benötigt.

Automatisch im Footer (alle Seiten):

Diese Scripts werden durch npm run build automatisch eingefügt:

HTML (automatisch generiert) 
<script src="/assets/js/main.js" defer></script>
<script src="/assets/js/search.js" defer></script>
<script src="/assets/js/scroll-spy.js" defer></script>
<script src="/assets/js/latest-tutorials.js" defer></script>

Tutorial-Seiten mit Sidebars (manuell hinzufügen):

Diese Scripts müssen nach dem Footer-End-Marker und vor </body> manuell eigefügt werden:

HTML (manuell einfügen) 
<!-- Footer-End -->

<script src="/assets/js/code-copy.js" defer></script>
<script src="/assets/js/sidebar.js" defer></script>
<script src="/assets/vendor/prism/prism.js" defer></script>

</body>

Andere Seiten ohne Sidebars und Code-Blöcke:

Nur die automatisch generierten Footer-Scripts werden benötigt - keine zusätzlichen Scripts nötig!

Script-Übersicht

Automatisch (Footer):

  • main.js - Core-Funktionen
  • search.js - Suche
  • scroll-spy.js - TOC Highlighting
  • latest-tutorials.js - Cards laden

Manuell (Tutorial-Seiten):

  • code-copy.js - Copy-Button für Code
  • sidebar.js - Sidebar Toggle
  • prism.js - Syntax Highlighting

Reihenfolge festlegen (TUTORIAL_ORDER)

Die Reihenfolge der Tutorials in Prev/Next-Navigation, Sidebar und Tutorial-Buttons wird in der TUTORIAL_ORDER definiert.

JavaScript 
// Manuelle Sortierung für Tutorial-Reihenfolge
const TUTORIAL_ORDER = {
    'tutorials/html/html-basics': [
        'html-basics.html',
        'html-grundgeruest.html',
        'html-meta-tags.html',
        'html-typografie.html'
    ],
    'tutorials/css/css-basics': [
        'css-einbinden.html',
        'css-selectors.html',
        'css-box-model.html'
    ]
};

Neue Seite hinzufügen

  1. Erstelle deine neue HTML-Datei (z.B. css-flexbox.html )
  2. Öffne generate-navigation.js
  3. Finde die passende Kategorie in TUTORIAL_ORDER
  4. Füge den Dateinamen an der gewünschten Position ein:
JavaScript 
'tutorials/css/css-basics': [
    'css-einbinden.html',
    'css-selectors.html',
    'css-box-model.html',
    'css-flexbox.html'  // ← NEU
]
  1. Führe npm run build aus
  2. Fertig! Die neue Seite erscheint in allen Navigationen
Wichtig

Die Position in der Liste bestimmt die Reihenfolge!

  • Erste Datei = Kein "Vorheriges"-Link
  • Letzte Datei = Kein "Nächstes"-Link
  • Mittlere Dateien = Beide Links

Custom Titles (CUSTOM_TITLES)

Wenn in den Navigationen ein anderer Titel angezeigt werden soll als der Dateiname, kannst ich dies in CUSTOM_TITLES festlegen.

JavaScript 
// Custom Titles für Tutorial-Links
const CUSTOM_TITLES = {
    'html-basics.html': 'HTML Basics',
    'html-grundgeruest.html': 'HTML Grundgerüst',
    'css-einbinden.html': 'CSS einbinden',
    'js-code-escaper.html': 'HTML-Code Escaper'
};

Custom Title verwenden

  1. Öffne generate-navigation.js
  2. Finde das CUSTOM_TITLES Objekt
  3. Füge einen Eintrag hinzu mit dem kompletten Pfad als Key:
JavaScript 
const CUSTOM_TITLES = {
    'css-flexbox.html': 'Flexbox Layout'  // ← NEU
};
  1. Führe npm run build aus
  2. Der Custom Title wird in Prev/Next, Sidebar und Tutorial-Buttons verwendet
Wichtig
  • Nur der Dateiname wird als Key verwendet (nicht der volle Pfad)
  • Der Dateiname muss exakt übereinstimmen (inkl. .html)
  • Bei Tippfehlern wird die H1 aus dem HTML-Dokument verwendet

Akronyme und Kapitalisierung

Das Script erkennt automatisch Akronyme und kapitalisiert sie korrekt in Navigationstiteln.

JavaScript 
const ACRONYMS = {
    'html': 'HTML',
    'css': 'CSS',
    'php': 'PHP',
    'js': 'JS',
    'javascript': 'JavaScript',
    'seo': 'SEO',
    'ftp': 'FTP',
    'devpaniczone': 'DevPanicZone'
};

Beispiel: Der Ordner html-basics wird zu "HTML Basics" (nicht "Html Basics").

Latest Tutorials konfigurieren

Die "Neueste Tutorials" auf der Startseite werden manuell gepflegt , nicht automatisch nach Datum sortiert. So hast du volle Kontrolle darüber, welche Tutorials prominent angezeigt werden.

JavaScript 
// In generate-navigation.js
const LATEST_TUTORIALS = [
    'tutorials/css/css-specials/css-organization.html',
    'tutorials/javascript/javascript-basics/js-security.html',
    'tutorials/misc/web/console-security.html',
    'tutorials/php/php-basics/php-security.html'
];
So funktioniert's
  • Die ersten 4 Einträge erscheinen auf der Startseite
  • Pfade sind relativ zum Projekt-Root (ohne führendes / )
  • Reihenfolge im Array = Reihenfolge auf der Startseite
  • Excerpt wird automatisch aus .hero-subtitle gezogen

Neues Tutorial auf der Startseite featuren

  1. Öffne generate-navigation.js
  2. Finde das LATEST_TUTORIALS Array
  3. Füge den Pfad zum neuen Tutorial am Anfang ein
  4. Entferne ggf. den letzten Eintrag (max. 4 werden angezeigt)
  5. Führe npm run generate aus
JavaScript 
const LATEST_TUTORIALS = [
    'tutorials/html/html-basics/neues-tutorial.html',  // ← NEU (oben = erste Position)
    'tutorials/css/css-specials/css-organization.html',
    'tutorials/javascript/javascript-basics/js-security.html',
    'tutorials/misc/web/console-security.html'
    // php-security.html entfernt, da nur 4 angezeigt werden
];

Die tutorials.json Datei

Das Script generiert automatisch eine JSON-Datei mit allen Tutorial-Metadaten. Diese wird von latest-tutorials.js geladen, um die Tutorial-Cards dynamisch zu rendern.

Dateipfad 
/assets/data/tutorials.json

Struktur der JSON-Datei

JSON 
{
    "generated": "2025-01-05T12:00:00.000Z",
    "total": 42,
    "all": [...],           // Alle Tutorials
    "latest": [...],        // Die 4 manuell gepflegten
    "byCategory": {         // Gruppiert nach Kategorie
        "html": [...],
        "css": [...],
        "javascript": [...]
    }
}
Automatisch generiert

Diese Datei wird bei jedem npm run generate neu erstellt. Du musst sie nie manuell bearbeiten !

  • Titel: Aus CUSTOM_TITLES oder <h1>
  • Excerpt: Aus .hero-subtitle (max. 160 Zeichen)
  • Badge-Klasse: Automatisch nach Kategorie

Script ausführen

Nach allen Änderungen muss das Script ausgeführt werden, um die Navigationen zu aktualisieren:

Plain Text 
npm run build

Typischer Workflow

Schritt-für-Schritt Workflow
  1. Neues Tutorial erstellen: tutorials/css/css-basics/neues-tutorial.html
  2. Template kopieren: Grundgerüst mit allen Kommentar-Markern
  3. Inhalt schreiben: Tutorial-Content mit <h2> , <h3> , <h4> Überschriften
  4. generate-navigation.js öffnen:
    • Tutorial in TUTORIAL_ORDER einfügen
    • Optional: Custom Title in CUSTOM_TITLES hinzufügen
    • Optional: Section Titles in TOC_CUSTOM_TITLES anpassen
  5. npm run build ausführen: Alle Navigationen werden aktualisiert
  6. Prüfen: Tutorial im Browser öffnen und alle Navigationen testen
  7. Committen: Änderungen in Git speichern

Wann muss npm run build ausgeführt werden?

JA - Script ausführen bei:
  • Neues Tutorial erstellt
  • Tutorial umbenannt oder verschoben
  • Neue Überschriften ( <h2> , <h3> , <h4> ) hinzugefügt
  • Überschriften-Texte geändert
  • Änderungen an TUTORIAL_ORDER
  • Änderungen an CUSTOM_TITLES
  • Änderungen an TOC_CUSTOM_TITLES
  • Neue Hauptkategorie hinzugefügt
  • Neue Tutorial-Gruppe erstellt
NEIN - Script NICHT nötig bei:
  • Änderungen am Tutorial-Content (Text, Code-Beispiele)
  • CSS-Änderungen
  • JavaScript-Änderungen (außer generate-navigation.js)
  • Bilder hinzugefügt/geändert
  • Änderungen an Footer, Header (außer Navigation)

Terminal-Output verstehen

Beim Ausführen sehe ich genau, was aktualisiert wurde:

Terminal Output 
🚀 DevPanicZone Navigation Generator v2.0
==========================================

📁 Suche HTML-Dateien...
   Gefunden: 87 Dateien

🔄 Aktualisiere Main Navigation...
✅ Main Navigation aktualisiert in 87 Dateien

🔄 Aktualisiere Tutorial Navigation (Prev/Next)...
✅ Tutorial Navigation aktualisiert in 65 Dateien

🔄 Aktualisiere Sidebar (Inhaltsverzeichnis)...
✅ Sidebar aktualisiert in 65 Dateien

🔄 Aktualisiere Breadcrumbs...
✅ Breadcrumbs aktualisiert in 87 Dateien

🔄 Aktualisiere Tutorial-Listen (Kategorieseiten)...
✅ Tutorial-Listen aktualisiert in 6 Dateien

✨ Fertig! Alle Navigationen wurden aktualisiert.

Script-Definition in package.json

Der Befehl npm run build ist in der package.json definiert:

JSON 
{
  "name": "devpaniczone-navigation-generator",
  "version": "1.0.0",
  "description": "Automatische Navigation-Generierung für DevPanicZone",
  "scripts": {
    "generate-nav": "node scripts/generate-navigation.js",
    "generate-search": "node scripts/generate-search-index.js",
    "build": "npm run generate-nav && npm run generate-search",
    "watch": "nodemon scripts/generate-navigation.js"
  },
  "keywords": [
    "navigation",
    "html",
    "generator"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jsdom": "^23.0.0"
  },
  "devDependencies": {
    "nodemon": "^3.0.0"
  }
}
Verfügbare Befehle
  • npm run build - Empfohlen! Führt Navigation + Suchindex aus
  • npm run generate-nav - Nur Navigationen generieren
  • npm run generate-search - Nur Suchindex generieren
  • npm run watch - Automatisch neu generieren bei Dateiänderungen (für Entwicklung)

Im Normalfall verwende ich immer:

Terminal 
npm run build

Alternativ kann ich auch direkt ausführen:

Terminal 
node generate-navigation.js

Git Workflow mit Automation

Terminal 
# 1. Neues Tutorial erstellt und TUTORIAL_ORDER aktualisiert
npm run build

# 2. Alle Änderungen prüfen
git status

# 3. Committen (Script hat viele Dateien geändert!)
git add .
git commit -m "Add: Neues CSS Grid Tutorial + Nav Update"

# 4. Pushen
git push
Tipp

Das Script regelmäßig ausführen!

  • Am besten nach jedem neuen Tutorial
  • Vor jedem Git Commit
  • Nach Änderungen an Überschriften

Das Script ist idempotent - es kann mehrfach ausgeführt werden ohne Probleme zu verursachen! Das Ergebnis ist immer das gleiche.

Zusammenfassung: Was wird wo generiert?

Auf Tutorial-Seiten:

  • Header: Komplett zwischen <!-- Header-Start/End -->
  • Footer: Komplett zwischen <!-- Footer-Start/End -->
  • Breadcrumbs: <nav class="breadcrumbs"></nav> (leer)
  • Prev/Next: <nav class="tutorial-nav"></nav> (leer)
  • Sidebar TOC: Zwischen <!-- Sidebar-Anchor-Start/End -->
  • Sidebar Nav: <ul class="sidebar-nav-list"></ul> (leer)

Auf Kategorieseiten:

  • Header: Wie in Tutorials
  • Footer: Wie in Tutorials
  • Breadcrumbs: Wie in Tutorials
  • Tutorial-Buttons: Zwischen <!-- Tutorial-Buttons-Start/End -->
Zusätzlich generiert durch npm run build:
  • tutorials.json: /assets/data/tutorials.json mit allen Tutorial-Metadaten (Titel, Excerpt, URL, Kategorie)
  • "Mehr aus [Kategorie]" Section: Wird automatisch in Tutorial-Seiten eingefügt (zwischen <!-- Latest-Tutorials-Start/End --> )
  • Footer-Scripts: main.js, search.js, scroll-spy.js, latest-tutorials.js werden automatisch eingebunden
Nicht automatisch generiert:
  • Startseite Latest Section: <div id="latestTutorials"> muss manuell eingefügt werden
  • Kategorieseite Latest Section: <div id="categoryLatestTutorials"> muss manuell eingefügt werden
  • Tutorial-spezifische Scripts: code-copy.js, sidebar.js, prism.js müssen manuell eingebunden werden
Theme Toggle bleibt!

Der Theme Toggle Button ist Teil des generierten Headers und funktioniert automatisch! Es muss nichts extra generiert werden. Das currentYear im Footer ebenfalls.

FTP Upload-Checkliste

Immer hochladen:

  • Geänderte HTML-Dateien: Alle bearbeiteten Tutorial- und Kategorieseiten
  • search-index.json: /assets/data/search-index.json
  • tutorials.json: /assets/data/tutorials.json
  • CSS-Änderungen: /assets/css/ (style.css, tutorials.css, sidebar.css, components.css)
  • JS-Änderungen: /assets/js/ (main.js, sidebar.js, search.js etc.)

Nach npm run build:

  • Alle aktualisierten Tutorials: Im Terminal sichtbar unter ✓ Aktualisiere:
  • Alle Kategorie-Index-Seiten: z.B. tutorials/html/index.html
  • search-index.json: Wird neu generiert
  • tutorials.json: Wird neu generiert
  • Startseite: index.html (falls Navigation aktualisiert)
Niemals hochladen:
  • node_modules/ – wird lokal von npm verwaltet
  • scripts/ – Build-Scripts laufen nur lokal
  • package.json, package-lock.json – nur für lokales npm
  • .git/, .gitignore – Git-Verwaltung, nicht für den Server
  • .DS_Store, .vscode/ – macOS- und Editor-Dateien
Tipp: Terminal-Output als Kontrolle

Nach npm run build zeigt das Terminal genau, welche Dateien aktualisiert wurden. Alle Zeilen mit ✓ Aktualisiere: müssen auf den Server.

Troubleshooting - Häufige Probleme

Hier gibt es Lösungen für typische Probleme beim Generieren der Navigationen.

Problem: Script findet keine HTML-Dateien

Fehler 
📁 Suche HTML-Dateien...
   Gefunden: 0 Dateien

Ursache: Das Script wird im falschen Verzeichnis ausgeführt.

Lösung:

  1. Prüfen, ob ich im Projekt-Root-Verzeichnis bin:
Terminal 
pwd  # Zeigt aktuelles Verzeichnis
ls   # Sollte generate-navigation.js und tutorials/ zeigen
  1. Navigiere zum richtigen Verzeichnis:
cd /pfad/zu/deinem/projekt
npm run build

Problem: Navigation wird nicht aktualisiert

Fehler 
✅ Main Navigation aktualisiert in 0 Dateien
✅ Sidebar aktualisiert in 0 Dateien

Ursache: Die Kommentar-Marker fehlen oder sind falsch geschrieben.

Lösung: Prüfe, ob alle Marker korrekt vorhanden sind:

HTML 
<!-- ✅ RICHTIG: -->
<!-- Main-Nav-Start -->
<!-- Main-Nav-End -->

<!-- ❌ FALSCH: -->
<!-- Main Nav Start -->  <!-- Bindestriche fehlen! -->
<!--Main-Nav-Start-->   <!-- Leerzeichen nach <!-- fehlt! -->
<! -- Main-Nav-Start --> <!-- Leerzeichen nach <! falsch! -->

Alle Marker auf einen Blick:

  • <!-- Main-Nav-Start --> und <!-- Main-Nav-End -->
  • <!-- Sidebar-Anchor-Start --> und <!-- Sidebar-Anchor-End -->
  • <nav class="breadcrumbs"></nav>
  • <nav class="tutorial-nav">...</nav>
  • <div id="tutorialButtons" data-category="...">...</div>

Problem: Überschriften-IDs ändern sich ständig

Ursache: Du verwendest die alte Version des Scripts (vor v2.0).

Lösung: Update auf die neue Script-Version mit verbesserter ID-Generierung:

  1. Ersetze generate-navigation.js mit der neuen Version (v2.0+)
  2. Die neue Version respektiert bestehende IDs und ändert sie nicht mehr
  3. Führe npm run build aus - ab jetzt bleiben IDs stabil!

Problem: Prev/Next Buttons zeigen falsches Tutorial

Ursache: Die Reihenfolge in TUTORIAL_ORDER stimmt nicht.

Lösung:

  1. Öffne generate-navigation.js
  2. Finde den passenden Abschnitt in TUTORIAL_ORDER
  3. Prüfe die Reihenfolge der Dateien im Array:
'tutorials/css/css-basics': [
    'css-einbinden.html',      // Tutorial 1
    'css-color-units.html',    // Tutorial 2 (Prev: 1, Next: 3)
    'css-variables.html',      // Tutorial 3
    // ...
]
  1. Sortiere die Dateien in der gewünschten Reihenfolge
  2. Führe npm run build aus

Ursache: Es gibt keine index.html im Ordner.

Erklärung: Breadcrumbs sind nur klickbar, wenn eine index.html im entsprechenden Ordner existiert.

Lösung:

  1. Erstelle eine index.html im Ordner (z.B. /tutorials/css/css-basics/index.html )
  2. Oder akzeptiere, dass dieser Breadcrumb-Teil nicht klickbar ist (wird als <span> dargestellt)

Problem: "Cannot find module 'jsdom'"

Fehler 
Error: Cannot find module 'jsdom'

Ursache: Die npm-Abhängigkeit jsdom ist nicht installiert.

Lösung:

Terminal 
# Installiere Abhängigkeiten
npm install

# Oder direkt jsdom installieren
npm install jsdom

Problem: HTML-Entities in Breadcrumbs/Sidebar falsch

Beispiel: &lt;head&gt; statt <head>

Ursache: Du verwendest die alte Script-Version ohne HTML-Entity-Dekodierung.

Lösung: Update auf Script v2.0+ mit verbesserter Entity-Behandlung!

Debug-Modus aktivieren

Bei hartnäckigen Problemen den Debug-Modus aktivieren:

JavaScript 
// In generate-navigation.js, Zeile 33:
const DEBUG = true;  // Von false auf true ändern

Dann sind detaillierte Logs zu sehen:

[SLUGIFY] "Der <head>-Bereich" → "der-head-bereich"
[NEW] Generierte ID: "der-head-bereich"
[KEEP] Bestehende ID: "meine-custom-id"
[DUPLICATE] ID "section" exists, trying "section-2"
Weitere Hilfe

Wenn nichts hilft:

  • Prüfe die Browser-Konsole auf JavaScript-Fehler
  • Validiere dein HTML mit W3C Validator
  • Checke die package.json auf korrekte Script-Definition
  • Stelle sicher, dass Node.js installiert ist ( node --version )

Exkus: Toggle Night Mode

Der Theme-Toggle ermöglicht das Wechseln zwischen Dark Mode und Light Mode. Das gewählte Theme wird im localStorage gespeichert und über mehrere Tabs synchronisiert.

Dieser Vorgang wird nicht generiert, aber der Button ist schon im generierten Header eingebunden.

Detailliertes Tutorial zum Theme Toggle

Das aktuelle Jahr im Footer wird automatisch per JavaScript aktualisiert, damit es nie manuell aktualisiert werden muss.

Es ist also nicht direkt Teil der automatischen Generierung, das HTML hierzu ist aber im Script generate-navigation.js hinterlegt und erscheint bei der Ausführung. Das JavaScript selbst ist Teil der main.js

Detailliertes Tutorial zum currentYear

Mehr aus DevPanicZone!

Tutorials werden geladen...