DevPanicZone Logo DevPanicZone! Cheatsheets.

Prev / Next Buttons in den Tutorials

Die Prev/Next Navigation wird automatisch durch generate-navigation.js basierend auf der manuellen Reihenfolge in manualOrder generiert.

Tutorial Navigation

Ähnlich in Blogs kannst du am Ende der Tutorials zum vorheringen oder zum nächsten Tutorial springen. Die Buttons werden automatisch generiert.

HTML-Struktur

Die Navigation wird am Ende des Tutorial-Contents eingefügt (vor dem schließenden </div> des Wrappers <div class="container">):

HTML 
<!-- Prev/Next Navigation -->
<section class="tutorials-content">
    <nav class="tutorial-nav">
        <div class="tutorial-nav-prev">
            <!-- Wird automatisch gefüllt -->
        </div>
        <div class="tutorial-nav-next">
            <!-- Wird automatisch gefüllt -->
        </div>
    </nav>
</section>

</div> <!-- Ende Wrapper -->

Wie funktioniert's?

Das Script generate-navigation.js liest die Datei-Reihenfolge aus manualOrder und generiert automatisch:

  • Prev-Button: Link zum vorherigen Tutorial in der Reihenfolge
  • Next-Button: Link zum nächsten Tutorial in der Reihenfolge
  • Erstes Tutorial: Kein Prev-Button (leeres div)
  • Letztes Tutorial: Kein Next-Button (leeres div)

manualOrder Konfiguration

Die Reihenfolge wird in generate-navigation.js unter manualOrder definiert:

JavaScript 
// ============================================================================
// Manuelle Sortierung für Tutorial-Seiten (Prev/Next Navigation)
// ============================================================================
const manualOrder = {
    'tutorials/css/css-basics': [
        'css-einbinden.html',
        'css-color-units.html',
        'css-variables.html',
        'css-typografie.html',
        'css-textstyling.html'
        // Reihenfolge bestimmt Prev/Next Links
        // Index 0 = Erstes Tutorial (kein Prev)
        // Letzter Index = Letztes Tutorial (kein Next)
    ],
    'tutorials/css/css-advanced': [
        'css-positioning.html',
        'css-z-index.html',
        'css-transitions.html'
    ]
};

Neues Tutorial zur Reihenfolge hinzufügen

  1. Öffne generate-navigation.js
  2. Finde die passende Kategorie im manualOrder Objekt
  3. Füge den Dateinamen an der gewünschten Position ein:
JavaScript 
'tutorials/css/css-basics': [
    'css-einbinden.html',
    'css-color-units.html',
    'mein-neues-tutorial.html',  // <-- Neues Tutorial an gewünschter Stelle einfügen
    'css-variables.html',
    'css-typografie.html'
]

Führe dann npm run generate aus, um die Navigation zu aktualisieren.

Button-Titel anpassen

Standardmäßig wird der Dateiname als Titel verwendet. Um einen individuellen Titel zu setzen, füge ihn in customTitles hinzu:

JavaScript 
// ============================================================================
// Custom Titles für einzelne Tutorial-Seiten (statt Dateinamen)
// ============================================================================
const customTitles = {
    'tutorials/css/css-basics/css-einbinden.html': 'CSS einbinden',
    'tutorials/css/css-advanced/css-z-index.html': 'Z-Index',
    // Voller Pfad ab 'tutorials/' = Custom Title
};

Beispiel: Generierte Navigation

Wenn das Script läuft, wird aus der leeren Struktur eine vollständige Navigation:

HTML 
<nav class="tutorial-nav">
    <div class="tutorial-nav-prev">
        <span class="tutorial-nav-label">← Vorheriges Tutorial</span>
        <a href="/tutorials/css/css-basics/css-einbinden.html" class="tutorial-nav-link">CSS einbinden</a>
    </div>
    <div class="tutorial-nav-next">
        <span class="tutorial-nav-label">Nächstes Tutorial →</span>
        <a href="/tutorials/css/css-basics/css-variables.html" class="tutorial-nav-link">CSS Variables</a>
    </div>
</nav>

Technische Details: Wie das Script arbeitet

Das Script durchläuft folgende Schritte:

  1. Datei erkennen: Liest die aktuelle Datei-URL
  2. Kategorie finden: Sucht passenden Eintrag in manualOrder
  3. Position bestimmen: Findet Index des aktuellen Tutorials im Array
  4. Prev/Next ermitteln: Index -1 = Prev, Index +1 = Next
  5. HTML generieren: Erstellt die Buttons mit Titeln aus customTitles
  6. DOM updaten: Ersetzt den Inhalt zwischen den <nav>-Tags
JavaScript Code
JavaScript 
// ============================================================================
// TUTORIAL NAVIGATION (PREV/NEXT)
// ============================================================================

/**
 * Findet die vorherige und nächste Seite für Tutorial-Navigation
 */
function findPrevNext(currentFile) {
    // Normalisiere den Pfad
    currentFile = currentFile.replace(/\\/g, '/');

    // Finde den passenden Ordner in manualOrder
    for (const [folder, files] of Object.entries(manualOrder)) {
        if (currentFile.includes(folder)) {
            const fileName = path.basename(currentFile);
            const index = files.indexOf(fileName);

            if (index !== -1) {
                const prev = index > 0 ? path.join(folder, files[index - 1]).replace(/\\/g, '/') : null;
                const next = index < files.length - 1 ? path.join(folder, files[index + 1]).replace(/\\/g, '/') : null;

                return { prev, next };
            }
        }
    }

    return { prev: null, next: null };
}

/**
 * Generiert HTML für Tutorial Navigation
 */
function generateTutorialNav(currentFile, prev, next) {
    let navHTML = '';

    if (prev) {
        const prevPath = '/' + prev; // Absoluter Pfad
        const prevTitle = customTitles[prev] || fileNameToTitle(path.basename(prev));
        navHTML += `        <div class="tutorial-nav-prev">
            <span class="tutorial-nav-label">← Vorheriges Tutorial</span>
            <a href="${prevPath}" class="tutorial-nav-link">${prevTitle}</a>
        </div>\n`;
    } else {
        navHTML += `        <div class="tutorial-nav-prev"></div>\n`;
    }

    if (next) {
        const nextPath = '/' + next; // Absoluter Pfad
        const nextTitle = customTitles[next] || fileNameToTitle(path.basename(next));
        navHTML += `        <div class="tutorial-nav-next">
            <span class="tutorial-nav-label">Nächstes Tutorial →</span>
            <a href="${nextPath}" class="tutorial-nav-link">${nextTitle}</a>
        </div>`;
    } else {
        navHTML += `        <div class="tutorial-nav-next"></div>`;
    }

    return navHTML;
}

/**
 * Aktualisiert die Tutorial Navigation in allen HTML-Dateien
 */
function updateTutorialNavigation(files) {
    let updatedCount = 0;

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

        // Suche nach <nav class="tutorial-nav"></nav>
        const navRegex = /<nav\s+class=["']tutorial-nav["'][^>]*>[\s\S]*?<\/nav>/;

        if (navRegex.test(content)) {
            const { prev, next } = findPrevNext(file);

            if (prev || next) {
                const newNav = `<nav class="tutorial-nav">\n${generateTutorialNav(file, prev, next)}\n    </nav>`;
                content = content.replace(navRegex, newNav);

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

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

Ausführen

Nach allen Änderungen ausführen:

Plain Text 
npm run generate

Mehr aus DevPanicZone!

Tutorials werden geladen...