Как загружать навбар?
Учусь верстке. Сверстал несколько страниц при помощи бутстрапа 5. Встал следующий вопрос - как реализовать подгрузку меню сайта (навбара), чтобы в случае необходимости (например нужно будеть добавить пункты меню для сайта) не пришлось переписывать все страницы сайта, а изменить только сам навбар, который все страницы сайта уже самостоятельно подгрузят себе.
Дополнительно:
это решается не средствами html, а через шаблонизаторы
Встал следующий вопрос - как реализовать подгрузку меню сайта (навбара), чтобы в случае необходимости (например нужно будеть добавить пункты меню для сайта) не пришлось переписывать все страницы сайта, а изменить только сам навбар, который все страницы сайта уже самостоятельно подгрузят себе.
Фактически, 3 варианта:
1. Динамическая подгрузка пунктов меню, через js. В таком случае, не нужны сборщики, но SEO данного блока будет так себе.
2. Использование сборщика проектов, например, Webpack + шаблонизатор (EJS или Handlebars).
3. Использование сборщика проектов, например, Webpack + React/Vue.
- Спасибо, буду изучать то,что вы описали.
Правильно ли я Вас понял - второй вариант считается лучшей практикой? Или есть еще другие варианты?Что чаще всего используется на реальных проектах? - gkm87,
Правильно ли я Вас понял - второй вариант считается лучшей практикой?
2 и 3, но третий вариант Вы без сборщика в любом случае не соберет, поэтому - да, считается.
Или есть еще другие варианты?
Если коротко, то нет. Т.к. будут отличаться лишь инструменты, но не сама концепция.
Что чаще всего используется на реальных проектах?
На реальный fontend проектах? Написанные мною 3 варианта, с некоторым отличием в инструментах, но не концепции.
Спасибо, буду изучать то,что вы описали.
Выбирайте решением, если ответ помог.
- Михаил Р., Отметил решением, делаю пет-проект, фронт на html,css+js, а бэк django+postgresql, сейчас к этому буду добавлять сборщик и шаблонизатор, надеюсь, что все получится)
- gkm87,
надеюсь, что все получится)
Учитывая опыт, предположу, что скоро появятся новые вопросы относительно Webpack :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для загрузки навбара на сайт можно воспользоваться различными способами, в зависимости от используемых технологий. Ниже приведены примеры кода на PHP для создания навбара.
1. Используя HTML и CSS:
<?php echo '<div class="navbar">'; echo '<a href="#">Home</a>'; echo '<a href="#">About</a>'; echo '<a href="#">Services</a>'; echo '</div>'; ?>
2. Используя Bootstrap:
<?php echo '<nav class="navbar navbar-expand-lg navbar-light bg-light">'; echo '<a class="navbar-brand" href="#">Navbar</a>'; echo '<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">'; echo '<span class="navbar-toggler-icon"></span>'; echo '</button>'; echo '<div class="collapse navbar-collapse" id="navbarNav">'; echo '<ul class="navbar-nav">'; echo '<li class="nav-item active">'; echo '<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>'; echo '</li>'; echo '<li class="nav-item">'; echo '<a class="nav-link" href="#">About</a>'; echo '</li>'; echo '<li class="nav-item">'; echo '<a class="nav-link" href="#">Services</a>'; echo '</li>'; echo '</ul>'; echo '</div>'; echo '</nav>'; ?>
3. Используя JavaScript:
<?php echo '<div id="navbar">'; echo '<a href="#">Home</a>'; echo '<a href="#">About</a>'; echo '<a href="#">Services</a>'; echo '</div>'; echo ''; echo 'document.getElementById("navbar").innerHTML = "<a href="#">Home</a><a href="#">About</a><a href="#">Services</a>";'; echo ''; ?>
Выберите подходящий способ в зависимости от ваших потребностей и возможностей. Не забудьте также стилизовать навбар с помощью CSS, чтобы он соответствовал дизайну вашего сайта.