Suchfunktion und Design-Optimierung für den Blog

Heute haben wir uns darauf konzentriert, den Blog mit einer effektiven Suchfunktion und einem verbesserten Design zu erweitern. Ziel war es, sowohl die Benutzerfreundlichkeit als auch die visuelle Konsistenz des Blogs zu steigern.

Durch die Implementierung der Suchfunktion können Besucher nun gezielt nach Blogtiteln und Inhalten suchen, was den Zugang zu relevanten Informationen erheblich erleichtert. Gleichzeitig haben wir das Design der Blog-Navigation an das Inhaltsfenster angepasst, um ein einheitliches Erscheinungsbild zu gewährleisten.

Der Hauptgrund für die Änderungen war die Verbesserung der Benutzererfahrung. Unser Ziel war es:

• Eine Suchfunktion zu integrieren, die Blogtitel und Überschriften durchsuchbar macht.
• Das Design der Blog-Navigation zu optimieren, um eine visuelle Einheitlichkeit zu schaffen.
• Eine moderne und intuitive Oberfläche zu bieten, die auf allen Geräten gut aussieht.

Die Umsetzung erfolgte in mehreren Schritten:

1. Suchfunktion

Die Suchfunktion durchsucht die <title>- und <h1>-Tags der Blogdateien, um relevante Ergebnisse anzuzeigen. Der verwendete JavaScript-Code lautet:

document.getElementById('search-button').addEventListener('click', function () {
  const query = document.getElementById('search-input').value.toLowerCase();
  const filteredBlogs = [];

  // Inhalte der Blogs durchsuchen
  Promise.all(allBlogFiles.map(file =>
    fetch(`/blog/blogpages/${file}`)
    .then(response => response.text())
    .then(data => {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = data;

      const title = tempDiv.querySelector('title')?.textContent.toLowerCase() || '';
      const h1 = tempDiv.querySelector('h1')?.textContent.toLowerCase() || '';

      if (title.includes(query) || h1.includes(query)) {
        filteredBlogs.push(file);
      }
    })))
  .then(() => {
    currentPage = 1;
    if (filteredBlogs.length > 0) {
      renderBlogNavigation(filteredBlogs);
    } else {
      blogList.innerHTML = '<li>Keine Ergebnisse gefunden.</li>';
    }
  });
});

2. Design-Optimierung

Das Design der Blog-Navigation wurde angepasst, um denselben Font und Stil wie das Inhaltsfenster zu verwenden. Der folgende CSS-Code wurde verwendet:

.tab-navigation {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2em;
  color: #FFF;
}

.tab-navigation a {
  text-decoration: none;
  color: #00b4d8;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.tab-navigation a:hover {
  text-decoration: underline;
  color: #0077b6;
  font-weight: bold;
}

Nach der Umsetzung konnten wir folgende Ergebnisse erzielen:

• Eine funktionierende Suchfunktion, die Blogtitel und Überschriften durchsucht.
• Eine visuell einheitliche Oberfläche zwischen Blog-Navigation und Inhaltsfenster.
• Verbesserte Benutzerfreundlichkeit und modernes Design.

Diese Änderungen tragen dazu bei, den Blog professioneller und benutzerfreundlicher zu gestalten. Ich freue mich über Feedback und weitere Verbesserungsvorschläge!