NavBar auf jeder Unterseite einbauen (Webdevelopment)?
Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.
Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?
4 Antworten
Statische Seitengeneratoren (SSG) sind eine weitere Möglichkeit, Redundanz zu vermeiden. Im Gegensatz zu PHP oder serverseitigen Content-Management-Systemen (CMS) passiert das ganze auf deinem eigenen Rechner (oder einem speziell dafür eingesetzten Server, z.B. bei Netlify) und das Resultat ist eine statische Webseite, deren Unterseiten jede für sich vollständig funktionsfähig sind.
Du kannst die einzelnen Komponenten in eine eigene Datei auslagern und diese werden dann lediglich mithilfe von PHP include inkludiert. Sprich in einer eigenen Datei steht nur der Header sowie der Footer samt der darin enthaltenen Navigation.
index.php
<?php include 'header.php'; ?>
<main>
<!-- content comes here... -->
</main>
<?php include 'footer.php'; ?>
header.php
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pagetitle</title>
</head>
<body>
<header>
<nav><!-- Primary-Nav --></nav>
<header>
footer.php
<footer>
<nav><!-- Secondary Nav --></nav>
</footer>
</body>
</html>
Ähnliches lässt sich auch mit JavaScript, mit diversen Frameworks (wie von dir erwähnt) oder über ein Content-Management System umsetzen. Bei letzterem wird ein Theme erstellt und dann vom CMS mit Komponenten gefüllt.
Es werden im Template je nach Content-Management System ggf. einzelne Angaben gemacht, wo welche Komponenten hinzugefügt werden können. Sei es ein Block für Inhalte, für Navigationen usw. Die Komponenten werden dann dynamisch ins Frontend geladen, also nicht „hart” irgendwo reingeschrieben.
LG medmonk
Für eine klassische Webseite wird ein Content Management System (CMS) genutzt, sodass man nur Templates für Seiten erstellt, die dann vom CMS mit Inhalten befüllt werden.
Ich benutze das CMS Redaxo, hier sind allerdings grundlegende PHP Kenntnisse notwendig. Dafür kann man hier gut mit eigenem HTML, CSS und JS Code arbeiten, ohne wie z.B. WordPress sich mit komplizierten Themes rumschlagen zu müssen.
Wenn man seine Präsenz nicht komplett in html selbst schreiben will, bieten sich Content-Management-Systeme an. Die übernehmen dann auch das Einfügen der Menüs etc. in sämtliche Unterseiten (die hier ja lediglich auswahlbezogener Content sind).