2017-02-11 3 views
0

ich von Jade zu grundlegenden HTML schaltete und lief in das folgende Problem:Ein Navigationsmenü für jede Seite

Wie kann ich für meine ganze Webseite ein Navigationsmenü habe (in einer Datei)?

In Jade habe ich folgendes:

ich in default.jade mein Menü hatte:

body 
    .header-site 
     h1.page-title Christopher Kadé 

    ul.nav-site 
     li: a(href='/') About me 
     li: a(href='/projects') Projects 
     li: a(href='/contact') Contact 

    .main-content 
     block content 

Und würde default.jade in jeder anderen .jade Datei, und schreiben Sie seinen Inhalt in einer block content umfassen. Auf diese Weise habe ich meine Kopfzeile und Menü auf meiner Website verfügbar.

Aber ich kann nicht scheinen, die äquivalente Methode in der guten alten Ebene HTML herauszufinden.

Antwort

0

Sie benötigen eine serverseitige Include (mit einer serverseitigen Sprache) - HTML unterstützt dies nativ nicht. Oder wenn mit jQuery:

<html> 
    <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){ 
     $("#nycontent").load("header.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="mycontent"></div> 
    </body> 
</html> 

header.html 
<h1>test</h1> 

alternativ mit einfacher alter JS:

<html> 


<body> 
<script src="myscript.js" /> 
</body> 
</html> 

document.write('\ 
\ 
    <h1>This is my include file</h1>\ 
\ 
'); 
2

Um das gleiche Navigationsmenü in Ihrer Website zu haben, können Sie entweder php oder javascript. Mit php-

<?php 
include_once 'navigation.php'; 
?> 

mit JavaScript

<div id="navigation"> 
</div> 

<script> 
$("#navigation").load("navigation.html"); 
</script> 
+0

verstanden, erhalte ich bei 404 Fehler, auch wenn meine Datei auf demselben Repository als meine aktuelle '.html' Datei befindet. Ich habe ein Div hinzugefügt, um meine Navigation zu speichern und versuche es zu laden, wie Sie gezeigt haben. – Christopher

+0

Wenn es sich im selben Repository befindet, sollte es kein Problem sein, es zu laden. Wenn Sie Github verwenden ... tritt diese Art von Problem manchmal in Github auf. – philomath

+0

Überhaupt nicht, alle meine html-Dateien befinden sich im selben Ordner und trotzdem wie folgt: '$ (" # navigation "). Load (" index.html ");' Ich erhalte einen 404-Fehler. – Christopher

Verwandte Themen