Как скопировать код панели навигации на все странички сайта (проекта)?

Question

[Shamil Vagabov]

Составил адаптивную панель навигации с кучей div'ов и встала необходимость копии данного кода на все страницы создаваемого сайта. Как упростить эту задачу? И так, чтоб дальнейшие правки в этой панели не доставляли неудобств

Comments

[Ankhena]

- SSI
- gulp-file-include - плагин для галпа (я бы назвала его мини-шаблонизатором)
- Шаблонизатозы: Nunjucks, Twig, Pug
- Генераторы статики типа 11ty (Хороший обзор https://www.youtube.com/watch?v=DtTadxKrFMY)
- php
- взрослые CMS

Наверняка что-то ещё, о чем я забыла

[GeminiX]

html include

[Ankhena]

Александр, чем это отличается от моего первого варианта?

[GeminiX]

Ankhena, загуглил что такое SSI. И вправду, ничем.

[strelok011]

Можно еще написать на js генератор этой навигации и подключать из внешнего скрипта :)
Заодно и логику отображения активного пункта туда вписать

[Shamil Vagabov]

strelok011, пытался. уровень знаний JS пока низкий. Запнулся на выводе спец символов типа <>. Можете дать пример?

[Shamil Vagabov]

Ankhena, а вообще, по хорошему, как надо делать в таких ситуациях? я имею ввиду как поступают профи?)

[Ankhena]

Shamil Vagabov, профи поступают по-разному в зависимости от задачи.

[strelok011]

Shamil Vagabov, для вывода спецсимволов используйте escape-последовательности, но скорее всего нужно смотреть на добавление нод с последующим добавлением в DOM вида

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

Но по поводу того, КАК именно реализовывать такое на сайте, - нужны инструменты управления контентом.

Вы НЕ должны реализовывать такое на фронте, если контент генерится бэкендом (ну, к примеру есть cms типа wordpress).
Вы ДОЛЖНЫ таким рулить на фронте, если у Вас построено одностраничное приложение (react, angular и т.п.), а к бэкенду обращаетесь только за чистыми данными.

Если у Вас статичные страницы в HTML, тут действительно, SSI, либо генерация меню на js (чтоб хоть какая-то автоматизация была), но это устаревшие штуки, годятся для потренироваться, изучить технологии и в дальнейшем не использовать.