Организация HTML сайтов с Bootstrap 4 Navbar

Question

TLDR: Какова стандартная / оптимальная практика для организации различных HTML сайтов / файлов при использовании панели навигации, которые должны быть видны на каждом сайте?

Справочная информация: Я впервые начинаю создавать сайт. Он должен работать на ESP, и я получил некоторые хорошие результаты с Bootstrap 4. Я определил Bootstrap navbar, как и во всех примерах (например, здесь на w3schools ). Хотя в примерах используются только ссылки "ничего не делать"; они не показывают, как эти ссылки обычно используются с навигационной панелью и различными файлами (это должен быть общий принцип, которого я не знаю).

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

Как обычно организованы различные сайты относительно навигационной панели?

Я думал о различных возможностях:

• Наличие навигационной панели в каждом файле (очевидно, кошмар в обслуживании)
• Наличие навигационной панели в дополнительном файле включая его как-то в любой другой файл
• Управление всем содержимым основного файла вместе с панелью навигации, включая другие файлы содержимого каким-либо образом

Насколько я знаю, я просто не Я не знаю достаточно, поэтому я тоже не знаю, что искать. Если в Интернете уже есть хорошая информация об этом, не могли бы вы предоставить мне слова для поиска или ссылки?

Answer 1

Если вы планируете использовать HTML, то другого выбора нет. Вам нужно добавить navigation bar на каждую страницу, что, как вы упомянули, является кошмаром. Но если вы планируете использовать server-side programming языки, такие как PHP, тогда они предоставляют ключевое слово include. Синтаксис include 'filename' теперь вы можете добавить file как header.php в папку include и использовать его на нескольких страницах. Вы можете посмотреть в этой документации . Но если вы используете NodeJS, ExpressJS, то у них есть свои templating-engines, такие как ejs, handlebars, pug. Они состоят из partials. Таким образом, эти части можно использовать на нескольких страницах. Вот ссылка для частичных

Answer 2

Хотя ответ kedar sedai является правильным, я хочу добавить свой выбранный путь и дополнительную информацию в качестве документации для будущих читателей.

kedar sedai прав, что мне нужно использовать какой-то язык программирования. Одна проблема в том, что я не могу использовать серверные языки программирования, потому что ESP их не поддерживает. Поэтому мне нужно было перейти к программированию сайта клиента, поэтому javascript.

Я использовал решение этого SO вопроса , чтобы включить еще один HTML файл. Теперь я работаю только с основным HTML файлом, который содержит панель навигации и следующую часть, чтобы загрузить правильный файл HTML в зависимости от параметра page в URL:

<div class="container-fluid" id="content" style="display:block;overflow:visible"><br>
  <script>
    $(function(){
      var url = new URL(window.location.href);
      var c = url.searchParams.get("page");
      if(c != null){
        $("#content").load(c+".html");
      }
    });
  </script>
</div>

Это работает следующим образом Теперь у меня есть представление о том, как я могу организовать свои html файлы для отображения на панели навигации.