2017-02-11 3 views
0

Я перешел от Jade к базовому HTML и побежал в следующую проблему:Одно меню навигации для каждой страницы

Как я могу иметь одно навигационное меню для всего моего сайта (в одном файле)?

В Jade я сделал следующее:

Я имел мое меню в default.jade:

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 

И будет включать default.jade в любой другой .jade файл и записать его содержимое в block content. Таким образом, у меня есть заголовок и меню, доступные на моем сайте.

Но я, похоже, не могу найти эквивалентный метод в старой доброй равнине HTML.

ответ

0

Вам нужна сторона сервера (с языком на стороне сервера) - HTML не поддерживает это изначально. Или, если с помощью 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> 

в качестве альтернативы, старый добрый JS:

<html> 


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

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

Для того, чтобы иметь такое же меню навигации по всему вашему сайту, вы можете либо использовать php или javascript. Использование PHP-

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

Использование JavaScript

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

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

Понял, я получаю на 404 ошибки, даже если мой файл находится на том же хранилище, как мой текущий '.html' файл. Я добавил div, чтобы скрыть мою навигацию и пытаюсь загрузить ее, как вы показали. – Christopher

+0

Если он находится в том же хранилище, у вас не должно возникнуть никаких проблем с его загрузкой. Если вы используете github ... эта проблема иногда возникает в github. – philomath

+0

Совсем не все мои html-файлы находятся в одной и той же папке, но при этом выполняются следующие действия: '$ (" # navigation "). Load (" index.html ");' Я получаю ошибку 404. – Christopher