Navbar und Footer für mehrer seiten verwenden?
Hey Leute,
Wie kann man ein Navbar und footer für mehrere Seiten vervenden? (Also einmal in einer datei schreiben und dann immer diese Datei aufrufen. Ohne, dass ich den Code für navbar und footer jedes kopieren muss)
Hoffentlich wisst ihr was ich meine:)
Danke im Vorraus
2 Antworten
Bau dir das Markup am besten serverseitig zusammen.
Je nachdem, welche Technologien dir auf Serverseite offen stehen, können die konkreten technischen Umsetzungen etwas anders aussehen. Mit Node.js bspw. wäre es praktisch, eine Template Engine wie EJS zu nutzen (siehe hier ein Beispiel), mit ASP.NET würde man Partials mit der Razor-Syntax einbinden.
Zu PHP werde ich einmal eine Beispielimplementation zeigen, da sie zu den am weitesten unterstützten Backendtechnologien gehört.
Eine normale Seite (z.B. startpage.php) würde so aussehen:
<!-- doctype, head, etc. ... -->
<body>
<?php include_once "navigation.html"; ?>
<!-- ... -->
<?php include_once "footer.html"; ?>
</body>
In navigation.html hättest du nur deine Navigation:
<nav>
<!-- ... -->
</nav>
und in footer.html nur deinen Footer.
<footer>
<!-- ... -->
</footer>
Man könnte, nur einmal angemerkt bzw. als Ausblick, dieses Modell noch weiter ausbauen, indem man eine Datei (z.B. index.php) als generelles Template nutzt und die Inhalte dynamisch aus einer externen Quelle (z.B. einer Datei oder Datenbank) lädt.
<!doctype html>
<head>
<title>Example</title>
<meta charset="utf-8">
</head>
<body>
<nav><!-- ... --></nav>
<?php
/* load data from external data source and render ... */
?>
<footer><!-- ... --></footer>
</body>
Das macht sich aber nur gut, wenn der Inhalt der Seite immer gleich strukturiert ist.
Eine Alternative mit PHP (und gerade wenn man ein Framework wie Laravel, Symfony, ... nutzt), wäre eine Template Engine wie Twig. Oder man geht gleich direkt zu einem CMS über. Da gibt es auch sehr einfach aufgebaute Optionen, wie GetSimple CMS.
Vielen Dank für deine sehr nützlichen Infos.
Ich werde mir diese Tipps bestimmt genauer anschauen.
Danke noch mal
Ich glaube das geht nur, wenn duit Variablen arbeitest und dafür die Variablen immer wieder verwendest.
Sofern du dich hier auf JavaScript beziehst (was dann im Browser ausgeführt wird), könntest du zwar Navigation und Footer darüber einbinden:
<!-- doctype, head, ... -->
<body>
<script src="navigation.js"></script>
<!-- ... -->
<script src="footer.js"></script>
</body>
navigation.js:
document.write("<nav><!-- ... --></nav>");
footer.js:
document.write("<footer><!-- ... --></footer>");
Doch es wäre keine Lösung, die ich als erstrebenswert erachten würde.
Ein Editor könnte dich nicht mit hilfreichen HTML-Syntaxhighlighting unterstützen und die Fehleranfälligkeit wäre höher. Du müsstest darauf Acht geben, Anführungszeichen im String korrekt zu maskieren.
Ich weiß nicht ob man ein ganzes Navbar in eine Variable packen kann...
aber wie meinst du das genau?