Когато създаваме многостраничен уебсайт, ключово предизвикателство е да сведем до минимум повтарящите се работи. Обикновено многостраничният уебсайт съдържа горни и долни колонтитули за споделяне за всички страници (начални страници, главни страници, подстраници и т.н.). Когато е необходимо да се направи промяна, е много неефективно да се актуализира за всяка отделна страница отгоре надолу.

В тази статия ще покажем как да проектираме елементи за споделяне по по-добър начин, така че уебсайтът да стане по-поддържаем и управляем.

Платформа: Плункер

Библиотека: Bootstrap 5.0.2 / jQuery 3.6.0

Стъпки:

0. Създайте начална страница “index.html” и подстраница “DA.html” с настройка на Bootstrap/jQuery.

  1. Създайте 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, за да направите тази промяна.

Ето „демо връзката“ и се наслаждавайте :)