Когда мы создаем многостраничный веб-сайт, ключевой задачей является минимизация повторяющихся работ. Обычно многостраничный веб-сайт содержит общие верхние и нижние колонтитулы для всех страниц (домашних страниц, главных страниц, подстраниц и т. д.). Когда необходимо внести изменение, очень неэффективно обновлять его для каждой отдельной страницы сверху вниз.
В этой статье мы собираемся показать, как лучше проектировать элементы обмена, чтобы веб-сайт стал более удобным в сопровождении и управлении.
Платформа: планкер
Библиотека: Bootstrap 5.0.2 / jQuery 3.6.0
Шаги:
0. Создайте домашнюю страницу «index.html» и дополнительную страницу «DA.html» с настройкой Bootstrap/jQuery.
- Создайте файлы header.html и footer.html в папке template. В header.html следуйте Инструкции панели навигации, чтобы создать заголовок со всеми ссылками подстраниц.
2. В обоих файлах index.html и DA.html добавьте блок div с идентификатором «included_navbar» вверху и «included_footer» внизу.
<body>
<div id="included_navbar"></div>
...
<div id="included_footer"></div>
</body>
3. В обоих файлах index.html и DA.html добавьте блок сценария для загрузки файлов header.html и footer.html. .
<script>
$(function(){
$("#included_navbar").load("template/header.html");
$("#included_footer").load("template/footer.html");
});
</script>
4. И вы можете видеть, что верхний и нижний колонтитулы добавлены на обе страницы.
Если вам нужно что-то обновить в заголовке, просто перейдите на страницу header.html, чтобы внести это изменение.
Вот демо-ссылка и наслаждайтесь :)
