Erstellen wiederverwendbaren HTML für die Navigationsleiste auf mehreren Seiten

Question

Ich dachte, es wäre bequem, wiederverwendbaren Code, vor allem für die Navigationsleiste zu haben, weil es auf allen meinen Seiten gleich sein wird. Auf diese Weise muss ich nicht jede Seite einzeln durchlaufen und jedes einzelne manuell bearbeiten, wenn eine Änderung auftritt.

Es scheint möglich, iframes zu verwenden, aber ich habe es ausprobiert und das ganze Seiten-Styling ging aus dem Ruder. Ich kann es beheben, aber ich frage mich, ob es etwas Ähnliches gibt.

Es wäre fantastisch, wenn so etwas wie dies funktionieren könnte:

var navbar = document.getElementById ('navbar');
navbar.innerHtml = URL ('navigation.txt');

Ich arbeite derzeit offline auf meiner Website, also glaube ich nicht, dass ich xmlhttp Anfragen machen kann. Richtig? Zumindest muss ich noch kein Ajax-Beispiel zur Arbeit bekommen. Dies ist bedauerlich, weil ich denke, dass ich das für meine Anwendung leicht verwenden könnte.

Hier ist meine Navbar Markup. Es ist nicht sehr kompliziert, also habe ich das Gefühl, ich werde es am Ende nur manuell bearbeiten.

<nav> 
    <ul id="navbar"> 
     <li><a href="biosketch.html">Biosketch</a></li> 
     <li><a href="projects.html">Class Projects</a> 
      <ul> 
       <li><a href="projects.html#SeniorProject">Senior Project</a></li> 
       <li><a href="projects.html#WindTurbine">Wind Turbine</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Resume</a></li> 
     <li><a href="#">Work Experience</a></li> 
     <li><a href="#">Contact Me</a></li> 
    </ul> 
</nav> 

Answer 1

wie es ist gesagt worden, in der Regel dies geschehen ist Server-Seite mit einer Include für nicht AJAX-Sites. Ich denke jedoch, dass Sie Google Verschlussvorlagen verwenden können. Im Grunde definieren Sie eine Vorlage in ihrer Vorlagensprache, die eine JavaScript-Funktion generiert, die Sie aufrufen können, um Ihren HTML-Code zu rendern.

http://code.google.com/closure/templates/docs/helloworld_js.html

Beispiel:

--templates.soy 

{namespace templates} 

{template .nav} 
<ul id="navbar"> 
    <li><a href="biosketch.html">Biosketch</a></li> 
    <li><a href="projects.html">Class Projects</a> 
     <ul> 
      <li><a href="projects.html#SeniorProject">Senior Project</a></li> 
      <li><a href="projects.html#WindTurbine">Wind Turbine</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Resume</a></li> 
    <li><a href="#">Work Experience</a></li> 
    <li><a href="#">Contact Me</a></li> 
</ul> 
{\template} 

Dann führen Sie den folgenden Befehl in eine Javascript-Funktion erzeugen Dies wird

java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js templates.soy 

zu kompilieren eine Datei namens templates.js eine Funktion enthält, namens templates.nav, die Sie von Ihrer Seite wie folgt aufrufen können:

Dies verwendet nicht einmal die Datenzusammenführung, die es Ihnen ermöglichen würde, ein Datenobjekt zum Rendern von HTML zu übergeben, das nicht statisch ist. Aber ich habe dir das nur gezeigt, weil es alles ist, was du verlangst. Ich weiß, dass Sie auch den HTML-Code in einen JS-String einfügen können, aber Sie müssen sich mit dem Mangel an Syntax-Hilfe von Ihrem Editor beschäftigen.

Der einzige Nachteil ist, dass dies JS erfordert, was Ihnen nicht zu stören scheint. Wenn Sie jedoch JS-lose Clients unterstützen möchten, können Sie die Vorlage auf der Serverseite generieren. Es gibt auch einen Compiler, der Java Google Closure-Methoden generiert. Sie können es auf ihrer Website suchen.

Ich hoffe, es hilft.

Answer 2

Verwenden Sie eine serverseitige Sprache, um eine Navigationsdatei zu erstellen. Es kann statisch sein oder es kann extrem komplex sein, es liegt an Ihnen.

<?php include 'includes/nav.php'; ?> 

Inhalt nav.php kann vollständig die <nav> Element sein. Sie können es ideal so programmieren, dass Elemente basierend auf dem aktuellen "Abschnitt" ein- und ausgeblendet werden und bestimmte Klassen basierend auf dem Abschnitt umgeschaltet werden.

Answer 3

Sie können sehr viel AJAX-Anrufe "offline" verwenden, wie Sie es sagen, es ist clientseitige Code.

Aber die Art, wie ich dies tun würde, wenn ich nicht eine serverseitige Sprache (ASP.NET oder PHP) verwenden würde, ist eine kleine .JS-Datei, die die Navigationsleiste rendert, und ich würde einfach eine <script src='js/navbar.js'></script> hinzufügen wo die Navbar gehen würde.

Auf diese Weise, wenn Sie es ändern müssen, ändern Sie nur die .js und es würde auf jeder anderen Seite aktualisiert werden.

Answer 4

Einige Vorschläge:

• Wenn Sie mit JSP (oder eine ähnliche Technologie), können Sie einfach so etwas wie SiteMesh hier verwenden können, mit dem Templat
• Sie Server-Seite verwenden enthält
kann helfen
• Sie können eine JavaScript-Funktion schreiben, um programmatisch auf das DOM zu bauen Sie brauchen (keine AJAX erforderlich) und dann rufen Sie einfach, dass JS Funktion in Ihren Seiten (keine Duplizierung von Code)

Answer 5

Normalerweise werden diese Arten von wiederverwendbaren Markup-Teilen serverseitig generiert, meistens durch einen Templating-Engine.

Sie können die Sicherheitseinstellungen von Firefox ändern, um Offline-AJAX-Anrufe zuzulassen, aber es ist wahrscheinlich besser, eine lokale Entwicklungsumgebung einzurichten, in der Sie eine serverseitige Sprache verwenden können, und zwar von Anfang an.

Answer 6

Wenn Sie es ohne jede Server-Seite-Codierung beteiligt implementieren möchten, versuchen Sie dies:

var http = false; 

if(navigator.appName == "Microsoft Internet Explorer") { 
    http = new ActiveXObject("Microsoft.XMLHTTP"); 
} else { 
    http = new XMLHttpRequest(); 
} 

http.open("GET", "navigation.txt"); 
http.onreadystatechange=function() { 
    if(http.readyState == 4) { 
    var navbar = document.getElementById('navbar'); 
     navbar.innerHtml = http.responseText; 
    } 
} 
http.send(null); 

Answer 7

Wenn Sie denselben Code immer wieder verwenden möchten, empfiehlt es sich, eine separate Datei zu erstellen und sie auf verschiedenen Webseiten zu implementieren.

Es ist möglich, durch diese: https://www.w3schools.com/howto/howto_html_include.asp

Sie schreiben den HTML-Code der Navigationsleiste in einer separaten HTML-Datei und rufen Sie es wie folgt in:

<div w3-include-html="content.html"></div>

Dann in einer Javascript-Funktion aufrufen aus

<script src="https://www.w3schools.com/lib/w3data.js"></script> 

das ist w3IncludeHTML();

Und Sie sollten es laufen lassen! Hoffe das hat geholfen! :)