Как загружать навбар?

Question

[gkm87]

Учусь верстке. Сверстал несколько страниц при помощи бутстрапа 5. Встал следующий вопрос - как реализовать подгрузку меню сайта (навбара), чтобы в случае необходимости (например нужно будеть добавить пункты меню для сайта) не пришлось переписывать все страницы сайта, а изменить только сам навбар, который все страницы сайта уже самостоятельно подгрузят себе.

Comments

[IvanU7n]

это решается не средствами html, а через шаблонизаторы

[gkm87]

IvanU7n, Я это понимаю, но можете хотя бы подсказать направление в котором нужно гуглить (поисковой запрос и т.п.), чтобы понять как реализовать автозагрузку навбара

[IvanU7n]

gkm87, не стал давать рекомендаций, т.к. могу подсказать только довольно древний механизм server-side includes (правда поддерживающийся в плане инклюдов во многих web-серверах), или язык-шаблонизатор php

[gkm87]

IvanU7n, Все равно спасибо за помощь!

Answer 1

[Михаил Р.]

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

Фактически, 3 варианта:
1. Динамическая подгрузка пунктов меню, через js. В таком случае, не нужны сборщики, но SEO данного блока будет так себе.
2. Использование сборщика проектов, например, Webpack + шаблонизатор (EJS или Handlebars).
3. Использование сборщика проектов, например, Webpack + React/Vue.

Comments

[gkm87]

Спасибо, буду изучать то,что вы описали.
Правильно ли я Вас понял - второй вариант считается лучшей практикой? Или есть еще другие варианты?Что чаще всего используется на реальных проектах?

[Михаил Р.]

gkm87,

Правильно ли я Вас понял - второй вариант считается лучшей практикой?

2 и 3, но третий вариант Вы без сборщика в любом случае не соберет, поэтому - да, считается.

Или есть еще другие варианты?

Если коротко, то нет. Т.к. будут отличаться лишь инструменты, но не сама концепция.

Что чаще всего используется на реальных проектах?

На реальный fontend проектах? Написанные мною 3 варианта, с некоторым отличием в инструментах, но не концепции.

Спасибо, буду изучать то,что вы описали.

Выбирайте решением, если ответ помог.

[gkm87]

Михаил Р., Отметил решением, делаю пет-проект, фронт на html,css+js, а бэк django+postgresql, сейчас к этому буду добавлять сборщик и шаблонизатор, надеюсь, что все получится)

[Михаил Р.]

gkm87,

надеюсь, что все получится)

Учитывая опыт, предположу, что скоро появятся новые вопросы относительно Webpack :)