Optimierung der Blog-Darstellung: Reihenfolge und Styles

Reihenfolge der Blogeinträge

Es begann mit einem kleinen, aber irritierenden Problem: Die Blogeinträge wurden nicht korrekt sortiert angezeigt. Blog 13 stand zwar an der richtigen Stelle, doch danach folgten Blog 8, Blog 10 und so weiter – eine Reihenfolge, die wenig Sinn ergab.

Der Fehler lag in der asynchronen Verarbeitung der Einträge. Jeder Blogeintrag wurde einzeln geladen und sofort in die Navigationsleiste eingefügt, ohne die vollständige Liste abzuwarten. Um dies zu beheben, habe ich Promise.all implementiert, um sicherzustellen, dass alle Einträge zunächst vollständig geladen und dann sortiert werden:

fetch('/media/php/blog/list_blog_files.php')
    .then(response => response.json())
    .then(data => {
        allBlogFiles = data.sort((a, b) => {
            const numA = parseInt(a.match(/(\d+)/)?.[0], 10);
            const numB = parseInt(b.match(/(\d+)/)?.[0], 10);
            return numB - numA;
        });
        renderBlogNavigation(); // Sortierte Liste anzeigen
    });

            

Nach dieser Änderung werden die Blogeinträge jetzt korrekt in absteigender Reihenfolge angezeigt, beginnend mit dem neuesten Blog.

Anpassung der Styles für Blogeintrag- und Navigationsfenster

Nachdem die Reihenfolge der Blogeinträge korrigiert war, fiel auf, dass das Navigationsfenster optisch nicht mit dem Blogeintragsfenster harmonierte. Der Hintergrund des Navigationsfensters war zu dunkel, und die Blogtitel wurden in Blau dargestellt, was die Lesbarkeit beeinträchtigte.

Ich habe zunächst die Hintergrundfarbe und die Schatteneffekte angepasst, damit beide Fenster visuell einheitlich wirken:

.tab-navigation {
    background: rgba(0, 0, 0, 0.85); /* Gleicher Hintergrund wie Blog-Inhalt */
    box-shadow: 0 0 10px rgba(64, 64, 64, 1); /* Harmonische Schatten */
}

            

Für die Blognummern und Titel wurden die Farben überarbeitet. Blognummern bleiben in Blau, während die Titel in Weiß dargestellt werden, um eine klare Lesbarkeit zu gewährleisten:

.tab-navigation a span.blog-number {
    font-weight: bold; /* Blognummer fett */
    color: #00b4d8; /* Blau für Blognummer */
}

.tab-navigation a span.blog-title {
    margin-left: 10px; /* Abstand zur Nummer */
    color: #FFF; /* Weiß für Titel */
}

            

Abschließend wurden die Hover-Effekte verfeinert, damit Links bei Interaktion dezent hervorgehoben werden:

.tab-navigation a:hover {
    text-decoration: underline; /* Unterstrich bei Hover */
    transform: scale(1.05); /* Leichte Vergrößerung */
}