Задать вопрос
battrack
@battrack
html

Если верстаешь несколько страниц, в которых есть повторяющиеся блоки, то как их инклюдить?

Возник немного необычный вопрос. Занимаюсь версткой очередного сайта. Страниц много. И во всех них есть одинаковые блоки, например, шапка, подвал, меню и т.д. И верстая каждую страницу приходится туда вставлять один и тот же код. А если, не дай бог, что-то приходится изменить в шапке, например, то приходится менять во всех страницах. Как на этапе верстке оптимизировать свою работу чтобы не делать повторных действий? Я вижу только вариант - верстать не в .html а в .php и с помощью оператора include подключать во всех макетах одинаковые блоки. Но на этапе верстки это не очень удобно, т.к. во-первых, для запуска таких макетов нужен сервер, а во-вторых, неудобно такую верстку демонстрировать клиенту (опять же по причине надобности сервака). Случайно в html не предусмотрено никаких механизмов для подключения отдельных блоков? Или может хитрости какие-нибудь?
  • Вопрос задан
  • 8375 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 6
smidl
@smidl
WordPress-разработчик 
<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>


Тут о функции load
Ответ написан
4 комментария
4 комментария
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
includeHTML - Loading HTML parts via HTML tag (pure js)
Supported protocols: http://, https://, file:///
Supported browsers: IE 9+, FF, Chrome (and may be other)
<include src="header.html"></include>
https://github.com/xmoonlight/includeHTML
Ответ написан
21 комментарий
21 комментарий
zorro76
@zorro76
Действительно, вы бы хотя б погуглили здесь на сайте, через день подобный вопрос.

В практике верстки давно уже существует понятие препроцессоров, возьмем к примеру gulp. В gulp используем плагин gulp-rigger, благодаря которому имеем: header.html и footer.html и тому подобные, которые подключаем на нужные страницы с помощью команды:
//= template/header.html

И не важно сколько у вас страниц, созданный блок инклюдите в том месте где нужно, это касается не только header и footer, это можно использовать с любым повторяющемся блоком.
Знакомьтесь с препроцессорами и удачи.
Ответ написан
4 комментария
4 комментария
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
https://www.youtube.com/watch?v=jr-bg5HCSr4

ps хоть бы пытались погуглить, через день такой вопрос задают.
Ответ написан
Комментировать
Комментировать
@DanSorokin
Full-stack developer at onvoya.com
jade
Ответ написан
Комментировать
Комментировать
trushka
@trushka
можно верстать отдельными страницами и вставлять с помощью iframe, если сайт совсем уж статический)
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Записать рекламные видео креативы для мобильной игры
25 нояб. 2024, в 05:56
3000 руб./за проект
Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)
25 нояб. 2024, в 03:04
500000 руб./за проект
Сделать простой лендинг
25 нояб. 2024, в 02:45
2000 руб./за проект
Ещё заказы