DevPanicZone Logo DevPanicZone! Cheatsheets.

Main Navigation im Header

Die Automatische Generierung des Dropdown-Menüs mit Kategorien und Unterkategorien.

Die Hauptnavigation im Header wird automatisch durch generate-navigation.js generiert. Das Script erstellt ein verschachteltes Dropdown-Menü mit allen Kategorien und deren Unterkategorien.

HTML-Struktur

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

HTML 
<nav class="main-nav" id="mainNav" aria-label="Hauptnavigation">
    <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 -->
                <!-- Hier werden die Kategorien eingefügt -->
                <!-- Main-Nav-End -->
            </ul>
        </li>
        <li><a href="/glossary.html" class="nav-link">Glossar</a></li>
    </ul>
</nav>

Generierte Struktur

Das Script erzeugt für jede Kategorie ein verschachteltes Dropdown mit Unterkategorien. Die Links führen zu Anker-IDs auf der jeweiligen Kategorieseite:

HTML 
<!-- Main-Nav-Start -->
<li class="nav-item-nested">
    <a href="/tutorials/html/" class="nav-link">
        HTML
        <span class="submenu-icon">▸</span>
    </a>
    <ul class="dropdown-submenu">
        <li><a href="/tutorials/html/#html-basics">HTML Basics</a></li>
        <li><a href="/tutorials/html/#html-advanced">HTML Advanced</a></li>
    </ul>
</li>
<li class="nav-item-nested">
    <a href="/tutorials/css/" class="nav-link">
        CSS
        <span class="submenu-icon">▸</span>
    </a>
    <ul class="dropdown-submenu">
        <li><a href="/tutorials/css/#css-basics">CSS Basics</a></li>
        <li><a href="/tutorials/css/#css-advanced">CSS Advanced</a></li>
        <li><a href="/tutorials/css/#css-specials">CSS Specials</a></li>
    </ul>
</li>
<!-- ... weitere Kategorien -->
<!-- Main-Nav-End -->

Wie funktioniert's?

Das Script nutzt zwei Konfigurationen:

CATEGORY_NAMES

Definiert die Hauptkategorien und ihre Anzeigenamen:

JavaScript 
const CATEGORY_NAMES = {
    'html': 'HTML',
    'css': 'CSS',
    'bootstrap': 'Bootstrap',
    'javascript': 'JavaScript',
    'php': 'PHP',
    'misc': 'Verschiedenes',
    'devpaniczone': 'DevPanicZone!'
};

TUTORIAL_ORDER

Definiert die Unterkategorien und deren Tutorials. Das Script erkennt automatisch, welche Unterkategorien existieren:

JavaScript 
const TUTORIAL_ORDER = {
    'tutorials/html/html-basics': [
        'html-grundlagen.html',
        'html-grundgeruest.html',
        // ...
    ],
    'tutorials/html/html-advanced': [
        'html-semantik.html',
        'html-formulare.html',
        // ...
    ],
    // ...
};

generateMainNavigation()

Diese Funktion erzeugt das verschachtelte Dropdown-Menü:

JavaScript 
function generateMainNavigation() {
    const categories = Object.keys(CATEGORY_NAMES);
    const navItems = [];

    categories.forEach(category => {
        const categoryName = CATEGORY_NAMES[category];
        const subcategories = getSubcategoriesForCategory(category);

        // Prüfe ob es Tutorials in dieser Kategorie gibt
        if (Object.keys(subcategories).length > 0) {
            // Item mit Unterkategorien
            let navItem = `<li class="nav-item-nested">
                <a href="/tutorials/${category}/" class="nav-link">
                    ${categoryName}
                    <span class="submenu-icon">▸</span>
                </a>
                <ul class="dropdown-submenu">`;

            // Füge Unterkategorien hinzu
            Object.keys(subcategories).forEach(subKey => {
                const sub = subcategories[subKey];
                navItem += `
                    <li><a href="/tutorials/${category}/#${subKey}">${sub.name}</a></li>`;
            });

            navItem += `
                </ul>
            </li>`;

            navItems.push(navItem);
        }
    });

    return navItems;
}

getSubcategoriesForCategory()

Hilfsfunktion, die alle Unterkategorien einer Hauptkategorie aus TUTORIAL_ORDER extrahiert:

JavaScript 
function getSubcategoriesForCategory(category) {
    const subcategories = {};

    Object.keys(TUTORIAL_ORDER).forEach(key => {
        // Prüfe ob der Key zur Kategorie gehört
        if (key.startsWith(`tutorials/${category}/`)) {
            const parts = key.split('/');
            const subcategoryName = parts[2]; // z.B. "html-basics"

            // Nur wenn Tutorials vorhanden sind
            if (TUTORIAL_ORDER[key] && TUTORIAL_ORDER[key].length > 0) {
                // Display Name: "html-basics" → "HTML Basics"
                const displayName = capitalizeWithAcronyms(subcategoryName);

                subcategories[subcategoryName] = {
                    name: displayName,
                    path: key.replace('tutorials/', '/tutorials/')
                };
            }
        }
    });

    return subcategories;
}

Die Funktion capitalizeWithAcronyms() sorgt dafür, dass Akronyme wie HTML, CSS, PHP korrekt großgeschrieben werden.

Neue Kategorie hinzufügen

Um eine neue Hauptkategorie zur Navigation hinzuzufügen:

  1. Erstelle den Ordner: /tutorials/[kategorie-name]/
  2. Erstelle eine index.html in diesem Ordner
  3. Füge die Kategorie zu CATEGORY_NAMES hinzu
  4. Füge mindestens eine Unterkategorie zu TUTORIAL_ORDER hinzu
  5. Führe npm run build aus
JavaScript 
// 1. Kategorie-Name hinzufügen
const CATEGORY_NAMES = {
    // ... bestehende Kategorien
    'react': 'React',  // Neue Kategorie
};

// 2. Unterkategorie(n) mit Tutorials hinzufügen
const TUTORIAL_ORDER = {
    // ... bestehende Einträge
    'tutorials/react/react-basics': [
        'react-intro.html',
        'react-components.html',
    ],
};
Wichtig
  • Die Kategorie erscheint nur, wenn mindestens eine Unterkategorie mit Tutorials existiert
  • Die Reihenfolge in CATEGORY_NAMES bestimmt die Reihenfolge im Dropdown
  • Der Key in TUTORIAL_ORDER muss dem Schema tutorials/[kategorie]/[unterkategorie] folgen

Blacklist: Ignorierte Ordner

Bestimmte Ordner werden bei der Navigation ignoriert:

JavaScript 
const BLACKLIST_FOLDERS = ['noupload', 'node_modules', '.git', 'assets', 'snippet-collection'];
  • noupload – Test-Dateien
  • node_modules – NPM-Abhängigkeiten
  • .git – Versionskontrolle
  • assets – CSS, JS, Bilder
  • snippet-collection – Code-Snippets

ROOT_FILES_EXCLUDE: Ausgeschlossene Root-Dateien

Neben der Ordner-Blacklist gibt es eine separate Liste für Root-Level HTML-Dateien, die nicht aktualisiert werden sollen:

JavaScript 
// Root-Dateien die NICHT aktualisiert werden sollen
const ROOT_FILES_EXCLUDE = [
    'search.html', // Wird automatisch generiert
];

Alle anderen Root-Dateien wie index.html, glossary.html, impressum.html oder datenschutzerklaerung.html bekommen Header und Footer automatisch aktualisiert.

Unterschied zur Blacklist
  • BLACKLIST_FOLDERS – ignoriert komplette Ordner (inkl. aller Unterordner)
  • ROOT_FILES_EXCLUDE – ignoriert einzelne Dateien im Root-Verzeichnis

Ausführen

Nach Änderungen an der Konfiguration:

Bash 
npm run build

Die Navigation wird auf allen HTML-Seiten aktualisiert, die die Kommentar-Marker enthalten – sowohl in /tutorials/ als auch im Root-Verzeichnis.

Mehr aus DevPanicZone!

Tutorials werden geladen...