DevPanicZone Logo DevPanicZone! Cheatsheets.

Tutorial Buttons

Die generierten Buttons auf den Kategorieseiten im Detail.

Tutorial-Listen auf Kategorieseiten

Auf Kategorieseiten (z.B. /tutorials/css/index.html) werden automatisch alle Tutorials dieser Kategorie als Button-Grid angezeigt. Die Buttons sind nach Unterkategorien gruppiert und werden aus TUTORIAL_ORDER generiert.

HTML-Struktur

Die Tutorial-Buttons werden zwischen Kommentar-Markern eingefügt:

HTML 
<section class="tutorials-content">
    <h2>Alle CSS Tutorials</h2>
    
    <!-- Tutorial-Buttons-Start -->
    <!-- Wird automatisch gefüllt -->
    <!-- Tutorial-Buttons-End -->
</section>
Automatische Kategorie-Erkennung

Die Kategorie wird automatisch aus dem Dateipfad ermittelt. Bei /tutorials/css/index.html erkennt das Script, dass es sich um die CSS-Kategorie handelt.

Beispiel: Generierte Buttons

Das Script generiert gruppierte Button-Listen mit Anker-IDs:

HTML 
<!-- Tutorial-Buttons-Start -->
<div id="tutorialButtons" class="tutorial-buttons" data-category="css">

    <div id="css-basics" class="tutorial-group">
        <h3 class="tutorial-group-title">CSS Basics</h3>
        <div class="tutorial-group-buttons">
            <a href="/tutorials/css/css-basics/css-einbinden.html" class="tutorial-button">CSS einbinden</a>
            <a href="/tutorials/css/css-basics/css-grundlagen.html" class="tutorial-button">CSS Grundlagen</a>
            <a href="/tutorials/css/css-basics/css-color-units.html" class="tutorial-button">CSS Farben & Einheiten</a>
        </div>
    </div>

    <div id="css-advanced" class="tutorial-group">
        <h3 class="tutorial-group-title">CSS Advanced</h3>
        <div class="tutorial-group-buttons">
            <!-- Buttons hier... -->
        </div>
    </div>

    <div id="css-specials" class="tutorial-group">
        <h3 class="tutorial-group-title">CSS Specials</h3>
        <div class="tutorial-group-buttons">
            <a href="/tutorials/css/css-specials/css-organization.html" class="tutorial-button">CSS Organization</a>
        </div>
    </div>

</div>
<!-- Tutorial-Buttons-End -->

HTML-Elemente erklärt

  • #tutorialButtons → Haupt-Container
  • .tutorial-group → Container pro Unterkategorie
  • id="css-basics" → Anker-ID für Deep-Links
  • .tutorial-group-title → Gruppenüberschrift
  • .tutorial-group-buttons → Button-Container
  • .tutorial-button → Einzelner Button
Anker-IDs für Deep-Links

Jede Gruppe hat eine ID (z.B. id="css-basics"). Dadurch kann die Main Navigation direkt zu einer Gruppe verlinken: /tutorials/css/#css-basics

Wie funktioniert's?

Das Script durchsucht TUTORIAL_ORDER nach allen Einträgen der Kategorie:

JavaScript 
// Für /tutorials/css/index.html findet das Script:
const TUTORIAL_ORDER = {
    'tutorials/css/css-basics': [
        'css-einbinden.html',
        'css-grundlagen.html',
        'css-color-units.html'
    ],
    'tutorials/css/css-advanced': [
        // ...
    ],
    'tutorials/css/css-specials': [
        'css-organization.html'
    ]
};

// Ergebnis: Drei Gruppen mit Buttons werden erstellt

generateTutorialButtons()

Diese Funktion generiert das HTML für alle Tutorial-Gruppen:

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

    // 1. Sammle alle Unterkategorien dieser Kategorie
    Object.keys(TUTORIAL_ORDER).forEach(key => {
        if (key.startsWith(`tutorials/${category}/`)) {
            const parts = key.split('/');
            const subcategoryName = parts[2]; // z.B. "css-basics"

            if (!subcategories[subcategoryName]) {
                subcategories[subcategoryName] = [];
            }

            // 2. Hole die Tutorials dieser Unterkategorie
            const tutorials = getOrderedTutorials(key);
            subcategories[subcategoryName].push(...tutorials);
        }
    });

    let html = '';

    // 3. Generiere HTML für jede Gruppe
    Object.keys(subcategories).forEach(subcategoryName => {
        const tutorials = subcategories[subcategoryName];
        if (tutorials.length === 0) return;

        // 4. Gruppentitel mit korrekter Kapitalisierung
        const displayName = capitalizeWithAcronyms(subcategoryName);

        html += `
    <div id="${subcategoryName}" class="tutorial-group">
        <h3 class="tutorial-group-title">${displayName}</h3>
        <div class="tutorial-group-buttons">`;

        // 5. Button für jedes Tutorial
        tutorials.forEach(tutorial => {
            html += `
            <a href="${tutorial.url}" class="tutorial-button">${tutorial.title}</a>`;
        });

        html += `
        </div>
    </div>`;
    });

    return html;
}

Reihenfolge der Gruppen und Buttons

Die Reihenfolge wird aus TUTORIAL_ORDER übernommen:

  • Gruppen-Reihenfolge: Wie die Keys in TUTORIAL_ORDER definiert sind
  • Button-Reihenfolge: Wie die Dateien im jeweiligen Array sortiert sind
  • Button-Titel: Aus CUSTOM_TITLES (falls vorhanden) oder aus der H1-Überschrift

Neues Tutorial hinzufügen

  1. Erstelle das neue Tutorial (z.B. css-grid.html)
  2. Öffne generate-navigation.js
  3. Füge die Datei in TUTORIAL_ORDER an der gewünschten Position ein:
JavaScript 
'tutorials/css/css-basics': [
    'css-einbinden.html',
    'css-grundlagen.html',
    'css-grid.html',  // ← Neues Tutorial
    'css-color-units.html'
]
  1. Optional: Custom Title in CUSTOM_TITLES hinzufügen:
JavaScript 
const CUSTOM_TITLES = {
    'css-grid.html': 'CSS Grid Layout',
    // ...
};
  1. Führe npm run build aus

Neue Tutorial-Gruppe hinzufügen

Um eine neue Unterkategorie zu erstellen (z.B. "CSS Layouts"):

  1. Erstelle den Ordner: /tutorials/css/css-layouts/
  2. Erstelle Tutorials in diesem Ordner
  3. Füge die Gruppe in TUTORIAL_ORDER hinzu:
JavaScript 
const TUTORIAL_ORDER = {
    'tutorials/css/css-basics': [
        // ...
    ],
    'tutorials/css/css-advanced': [
        // ...
    ],
    'tutorials/css/css-layouts': [  // ← Neue Gruppe
        'css-flexbox.html',
        'css-grid.html'
    ],
    'tutorials/css/css-specials': [
        // ...
    ]
};
  1. Führe npm run build aus

Die neue Gruppe erscheint automatisch auf der Kategorieseite und in der Main Navigation.

Gruppentitel und Akronyme

Gruppentitel werden mit capitalizeWithAcronyms() formatiert. Diese Funktion berücksichtigt bekannte Akronyme:

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

function capitalizeWithAcronyms(text) {
    return text.split('-')
        .map(word => {
            const lower = word.toLowerCase();
            if (ACRONYMS[lower]) {
                return ACRONYMS[lower];
            }
            return word.charAt(0).toUpperCase() + word.slice(1);
        })
        .join(' ');
}

Beispiele:

  • css-basics → CSS Basics
  • html-advanced → HTML Advanced
  • javascript-projects → JavaScript Projects
  • seo-optimization → SEO Optimization

Ausführen

Nach Änderungen an TUTORIAL_ORDER oder CUSTOM_TITLES:

Bash 
npm run build

Mehr aus DevPanicZone!

Tutorials werden geladen...