Импорт общую структуру веб-страницы

Question

При создании веб-страницы, мы часто включают в себя СЧА на всех страницах:

<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> 

Мы часто только отметить активную страницу, используя активный класс:

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

Копирование и вставка всей навигации во все подстраницы не является хорошей идеей - если мы решили добавить одну новую страницу, мы должны изменить навигацию по всем подстраницам.

Можем ли мы поместить навигацию в отдельный файл, а затем импортировать его?

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

Или, может быть, есть HTML-совместимый препроцессор для этого (я хочу, чтобы повторно использовать мой существующий код, а не переписать его с нуля)

Answer 1

У вас есть несколько вариантов, как это сделать, и, как всегда, у каждого есть свои плюсы и минусы ...

1 - Использовать один файл в формате Html. Сначала это может показаться сумасшедшим, но в зависимости от того, сколько данных у вас есть, это может быть хорошим и легким решением. Но он, очевидно, плохо масштабируется, и вы можете получить огромный файл.

2 - Используйте <frame> или метку . Это самый старый способ сделать это, и его очень легко реализовать, но у него есть некоторые проблемы с SEF, закладками и печатью.

3 - Используйте Ajax (XMLHttpRequest), чтобы загрузить внешний HTML-код с помощью Javascript. Это также относительно легко реализовать, но у него есть некоторые проблемы с навигацией (кнопка «назад») и полагаться на javascript.

5 - Используйте механизм шаблонов на стороне сервера. Это может потребовать некоторых усилий в зависимости от структуры вашего сервера, но это не очень сложно. Недостатки здесь в том, что у вас может быть дополнительная работа по настройке ваших файлов в шаблоне.

Вы также можете использовать сокеты для извлечения данных, но это похоже на использование отвертки для забивания гвоздя.