DevPanicZone Logo DevPanicZone! Cheatsheets.

Main Nav Header

Die Automatische Generierung der Main Navigation im Header.

Die Hauptnavigation im Header wird automatisch durch generate-navigation.js generiert. Das Script erstellt Links zu allen Tutorial-Kategorien.

HTML-Struktur

Die Navigation wird im Header zwischen den Kommentar-Markern <!-- Main-Nav-Start --> und <!-- Main-Nav-End--> eingefügt:

HTML 
<header class="site-header">
    <div class="container">
        <div class="header-content">
            <!-- Logo, Theme Toggle, Mobile Menu Button -->
            
            <nav class="main-nav" id="mainNav">
                <ul class="nav-list">
                    <li><a href="/" class="nav-link">Home</a></li>
                    <li class="nav-item-dropdown">
                        <button class="nav-link dropdown-toggle" aria-expanded="false">
                            Tutorials
                            <span class="dropdown-icon">▾</span>
                        </button>
                        <ul class="dropdown-menu">
                            <!-- Main-Nav-Start -->
                            <!-- Main-Nav-End -->
                        </ul>
                    </li>
                    <li><a href="/glossary.html" class="nav-link">Glossar</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

Wie funktioniert's?

Das Script liest die mainCategories aus der Konfiguration und generiert für jede Kategorie einen Link:

  • HTML → /tutorials/html/
  • CSS → /tutorials/css/
  • Bootstrap → /tutorials/bootstrap/
  • JavaScript → /tutorials/javascript/
  • PHP → /tutorials/php/
  • Verschiedenes → /tutorials/misc/

Beispiel: Generierte Navigation

Nach dem Ausführen von npm run generate wird der Bereich zwischen den Markern automatisch gefüllt:

HTML 
<ul class="dropdown-menu">
    <!-- Main-Nav-Start -->
    <li><a href="/tutorials/html/">HTML</a></li>
    <li><a href="/tutorials/css/">CSS</a></li>
    <li><a href="/tutorials/bootstrap/">Bootstrap</a></li>
    <li><a href="/tutorials/javascript/">JavaScript</a></li>
    <li><a href="/tutorials/php/">PHP</a></li>
    <li><a href="/tutorials/misc/">Verschiedenes</a></li>
    <!-- Main-Nav-End -->
</ul>

Kategorien hinzufügen oder ändern

Um die Navigation anzupassen, bearbeite die mainCategories in generate-navigation.js:

JavaScript 
/**
 * Generiert die Main Navigation (Dropdown-Menü)
 */
function generateMainNav() {
    const mainCategories = [
        { path: 'tutorials/html/', label: 'HTML' },
        { path: 'tutorials/css/', label: 'CSS' },
        { path: 'tutorials/bootstrap/', label: 'Bootstrap' },
        { path: 'tutorials/javascript/', label: 'JavaScript' },
        { path: 'tutorials/php/', label: 'PHP' },
        { path: 'tutorials/misc/', label: 'Verschiedenes' },
        // Neue Kategorie hier hinzufügen:
        // { path: 'tutorials/documentation/', label: 'Dokumentation' },
    ];

    let navHTML = '';

    mainCategories.forEach(category => {
        navHTML += `                                <li><a href="/${category.path}">${category.label}</a></li>\n`;
    });

    return navHTML.trimEnd();
}

Neue Hauptkategorie hinzufügen

  1. Erstelle den Ordner: /tutorials/[kategorie-name]/
  2. Erstelle eine index.html in diesem Ordner
  3. Öffne generate-navigation.js
  4. Füge die neue Kategorie zu mainCategories hinzu:
JavaScript 
const mainCategories = [
    { path: 'tutorials/html/', label: 'HTML' },
    { path: 'tutorials/css/', label: 'CSS' },
    { path: 'tutorials/bootstrap/', label: 'Bootstrap' },
    { path: 'tutorials/javascript/', label: 'JavaScript' },
    { path: 'tutorials/php/', label: 'PHP' },
    { path: 'tutorials/documentation/', label: 'Dokumentation' }, // Neue Kategorie
    { path: 'tutorials/misc/', label: 'Verschiedenes' },
];
  1. Führe npm run generate aus
  2. Die neue Kategorie erscheint automatisch in der Navigation auf allen Seiten
Wichtig
  • Die Navigation wird auf allen HTML-Seiten aktualisiert, die die Kommentar-Marker enthalten
  • Die Reihenfolge im mainCategories Array bestimmt die Reihenfolge im Dropdown
  • Der path muss mit einem / enden
  • Es muss eine index.html im Zielordner existieren, sonst führt der Link ins Leere

Technische Details: Wie das Script arbeitet

Der Generierungs-Prozess läuft in folgenden Schritten ab:

  1. HTML-Dateien finden: Das Script durchsucht alle Dateien rekursiv (außer Blacklist-Ordner)
  2. Marker suchen: In jeder Datei wird nach <!-- Main-Nav-Start --> und <!-- Main-Nav-End --> gesucht
  3. Navigation generieren: Aus mainCategories wird HTML-Code erstellt
  4. Inhalt ersetzen: Der Bereich zwischen den Markern wird mit dem neuen HTML ersetzt
  5. Datei speichern: Die aktualisierte HTML-Datei wird gespeichert
JavaScript 
/**
 * Aktualisiert die Main Navigation in allen HTML-Dateien
 */
function updateMainNavigation(files) {
    const mainNavContent = generateMainNav();
    let updatedCount = 0;

    files.forEach(file => {
        const filePath = path.join(BASE_DIR, file);
        let content = fs.readFileSync(filePath, 'utf8');

        const startMarker = '<!-- Main-Nav-Start -->';
        const endMarker = '<!-- Main-Nav-End -->';

        if (content.includes(startMarker) && content.includes(endMarker)) {
            const before = content.substring(0, content.indexOf(startMarker) + startMarker.length);
            const after = content.substring(content.indexOf(endMarker));

            content = before + '\n' + mainNavContent + '\n                                ' + after;

            fs.writeFileSync(filePath, content, 'utf8');
            updatedCount++;
        }
    });

    console.log(`✅ Main Navigation aktualisiert in ${updatedCount} Dateien`);
}

Blacklist: Ignorierte Ordner

Bestimmte Ordner werden von allen Navigations-Funktionen ignoriert. Diese Ordner werden in der blacklistFolders Konstante definiert:

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

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)

Ausführen

Nach allen Änderungen ausführen:

Plain Text 
npm run generate

Mehr aus DevPanicZone!

Tutorials werden geladen...