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

Am Ende jedes Tutorials findest du Buttons zum vorherigen und nächsten Tutorial. Die Navigation führt durch alle Tutorials einer Hauptkategorie – auch über Unterkategorien hinweg.

Wie funktioniert's?

Das Script generate-navigation.js nutzt getAllTutorialsFlat(), um alle Tutorials einer Kategorie als sortierte Liste zu holen:

Beispiel: CSS-Kategorie

  1. CSS Basics: CSS einbinden
  2. CSS Basics: CSS Grundlagen
  3. CSS Basics: CSS Farben & Einheiten
  4. CSS Advanced: ... (falls vorhanden)
  5. CSS Specials: CSS Organization

Navigation

  • Prev: Vorheriges Tutorial in der Liste
  • Next: Nächstes Tutorial in der Liste
  • Die Reihenfolge kommt aus TUTORIAL_ORDER
Unterkategorie-Wechsel

Wenn das nächste Tutorial in einer anderen Unterkategorie liegt, wird das visuell hervorgehoben (Klasse .is-new). So weißt du, dass du z.B. von "CSS Basics" zu "CSS Advanced" wechselst.

HTML-Struktur

Die Navigation wird in das <nav class="tutorial-nav"> Element eingefügt:

HTML 
<section class="tutorials-content">
    <nav class="tutorial-nav">
        <!-- Wird automatisch gefüllt -->
    </nav>
</section>

Beispiel: Generierte Navigation

Das Script generiert folgende Struktur:

HTML 
<nav class="tutorial-nav">
    <div class="tutorial-nav-prev">
        <a href="/tutorials/css/css-basics/css-einbinden.html">
            <span class="tutorial-nav-label">← Vorheriges</span>
            <span class="tutorial-nav-link">CSS einbinden</span>
            <span class="tutorial-nav-category">CSS Basics</span>
        </a>
    </div>
    <div class="tutorial-nav-next">
        <a href="/tutorials/css/css-advanced/css-flexbox.html">
            <span class="tutorial-nav-label">Nächstes →</span>
            <span class="tutorial-nav-link">CSS Flexbox</span>
            <span class="tutorial-nav-category is-new">CSS Advanced</span>
        </a>
    </div>
</nav>

HTML-Elemente erklärt

  • .tutorial-nav-prev → Container für Prev-Button
  • .tutorial-nav-next → Container für Next-Button
  • .tutorial-nav-label → "← Vorheriges" / "Nächstes →"
  • .tutorial-nav-link → Tutorial-Titel
  • .tutorial-nav-category → Unterkategorie-Name
  • .is-new → Zeigt Wechsel der Unterkategorie an

TUTORIAL_ORDER Konfiguration

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

JavaScript 
const TUTORIAL_ORDER = {
    'tutorials/css/css-basics': [
        'css-einbinden.html',
        'css-grundlagen.html',
        'css-color-units.html',
        'css-mobile-first.html'
    ],
    'tutorials/css/css-advanced': [
        // Tutorials hier...
    ],
    'tutorials/css/css-specials': [
        'css-organization.html'
    ]
};
Reihenfolge bestimmt Navigation

Die Prev/Next Navigation folgt der Reihenfolge in TUTORIAL_ORDER:

  • Erst alle Tutorials aus css-basics (in der angegebenen Reihenfolge)
  • Dann alle aus css-advanced
  • Dann alle aus css-specials

Neues Tutorial hinzufügen

  1. Öffne generate-navigation.js
  2. Finde die passende Unterkategorie in TUTORIAL_ORDER
  3. Füge den Dateinamen an der gewünschten Position ein:
JavaScript 
'tutorials/css/css-basics': [
    'css-einbinden.html',
    'css-grundlagen.html',
    'mein-neues-tutorial.html',  // ← Neues Tutorial
    'css-color-units.html',
    'css-mobile-first.html'
]
  1. Führe npm run build aus

Button-Titel anpassen

Der Titel im Button kommt aus CUSTOM_TITLES oder wird aus der H1-Überschrift extrahiert:

JavaScript 
// Custom Titles (überschreibt H1 aus HTML)
const CUSTOM_TITLES = {
    'css-einbinden.html': 'CSS einbinden',
    'css-color-units.html': 'CSS Farben & Einheiten',
    'html-grundgeruest.html': 'HTML Grundgerüst',
    // ...
};

Falls kein Eintrag in CUSTOM_TITLES existiert, wird der Text aus der <h1> Überschrift der jeweiligen Datei verwendet.

generatePrevNextNav()

Die Funktion holt alle Tutorials der Kategorie und findet Prev/Next:

JavaScript 
function generatePrevNextNav(filePath) {
    // 1. Ermittle die Hauptkategorie (z.B. "css")
    const category = getCategoryFromPath(filePath);
    const currentSubcategory = getSubcategoryFromPath(filePath);
    
    // 2. Hole ALLE Tutorials dieser Kategorie als flache Liste
    const allTutorials = getAllTutorialsFlat(category);
    
    // 3. Finde das aktuelle Tutorial in der Liste
    const currentIndex = allTutorials.findIndex(t => t.filePath === filePath);
    if (currentIndex === -1) return '';

    // 4. Prev = Index - 1, Next = Index + 1
    const prev = currentIndex > 0 ? allTutorials[currentIndex - 1] : null;
    const next = currentIndex < allTutorials.length - 1 ? allTutorials[currentIndex + 1] : null;

    let navHtml = '';

    // 5. PREV Button generieren
    if (prev) {
        const prevSubcategory = `tutorials/${category}/${prev.subcategory}`;
        const isNewCategory = prevSubcategory !== currentSubcategory;
        const categoryClass = isNewCategory ? ' is-new' : '';

        navHtml += `
        <div class="tutorial-nav-prev">
            <a href="${prev.url}">
                <span class="tutorial-nav-label">← Vorheriges</span>
                <span class="tutorial-nav-link">${prev.title}</span>
                <span class="tutorial-nav-category${categoryClass}">${prev.subcategoryDisplay}</span>
            </a>
        </div>`;
    } else {
        navHtml += '<div class="tutorial-nav-prev"></div>';
    }

    // 6. NEXT Button (analog)
    // ...

    return navHtml;
}

Ablauf Schritt für Schritt

  1. Kategorie ermitteln: Aus dem Dateipfad wird die Hauptkategorie extrahiert (z.B. "css")
  2. Alle Tutorials holen: getAllTutorialsFlat() gibt alle Tutorials der Kategorie als sortierte Liste zurück
  3. Position finden: Das aktuelle Tutorial wird in der Liste gesucht
  4. Prev/Next bestimmen: Index - 1 = Prev, Index + 1 = Next
  5. Unterkategorie-Wechsel prüfen: Wenn Prev/Next in einer anderen Unterkategorie liegt → .is-new Klasse
  6. HTML generieren: Buttons mit Titel und Unterkategorie-Anzeige

Edge Cases

Erstes Tutorial

  • Kein Prev-Button (leeres <div>)
  • Next-Button zeigt auf das zweite Tutorial

Letztes Tutorial

  • Prev-Button zeigt auf das vorletzte Tutorial
  • Kein Next-Button (leeres <div>)

Tutorial nicht in TUTORIAL_ORDER

Wenn ein Tutorial nicht in TUTORIAL_ORDER eingetragen ist, werden keine Prev/Next Buttons generiert.

Ausführen

Nach Änderungen an TUTORIAL_ORDER oder CUSTOM_TITLES:

Bash 
npm run build

Mehr aus DevPanicZone!

Tutorials werden geladen...