eine gemeinsame Struktur einer Webseite

Question

importieren Wenn Sie eine Webseite erstellen, sind wir oft die nav auf allen Seiten:

<nav id="nav"> 
    <ul> 
     <li><a href="about.html" class="active">About us</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
</nav> 

Wir werden oft nur die aktive Seite markieren eine aktive Klasse unter Verwendung:

<li><a href="contact.html" class="active">Contact</a></li> 

Kopieren und Einfügen der gesamten Navigation in alle Unterseiten ist keine gute Idee - wenn wir uns entscheiden, eine neue Seite hinzuzufügen, müssen wir die Navigation auf allen Unterseiten ändern.

Können wir die Navigation in eine separate Datei einfügen und dann importieren?

<!-- PSEUDOCODE --> <import file="nav.html" active="About us" /> 

Oder vielleicht gibt es einen HTML-kompatiblen Präprozessor für diese (Ich möchte meine vorhandenen Code wiederverwenden, ist es nicht von Grund auf neu zu schreiben)

Answer 1

Sie haben ein paar Optionen, wie dies zu tun, und wie immer hat jeder seine Vor- und Nachteile ...

1 - Verwenden Sie eine einzelne Html-Datei. Das hört sich zunächst vielleicht verrückt an, aber abhängig davon, wie viele Daten Ihre Website hat, könnte es eine gute und einfache Lösung sein. Aber es skaliert offensichtlich nicht gut und Sie könnten mit einer riesigen Datei enden.

2 - Verwenden Sie einen <frame> oder einen Tag. Dies ist der älteste Weg dies zu tun und es ist sehr einfach zu implementieren, aber es hat einige Probleme mit SEF, Lesezeichen und Drucken.

3 - Verwenden Sie Ajax (XMLHttpRequest), um ein externes HTML mit Javascript zu laden. Dies ist auch relativ einfach zu implementieren, aber es hat einige Probleme mit der Navigation ("Zurück" -Taste) und verlassen sich auf Javascript.

5 - Verwenden Sie eine serverseitige Vorlagen-Engine. Dies kann abhängig von Ihrer Serverstruktur etwas Aufwand erfordern, aber es ist nicht sehr schwer zu tun. Die Nachteile sind, dass Sie möglicherweise etwas mehr Arbeit haben, um Ihre Dateien an die Vorlagen-Engine anzupassen.

Sie könnten auch Sockets verwenden, um Ihre Daten zu holen, aber das fühlt sich an wie mit einem Schraubenzieher, um einen Nagel zu hämmern.