Задать вопрос
Sedov1988
@Sedov1988
Муж и отец красивой дочки.
html

Каким инструментом подключить шапку и подвал сайта?

Изучаю верстку. В связи с этим прошу подсказать/помочь или поделиться опытом каким образом и с помощью какого инструмента вы подключаете шапку или футер к телу сайта?
В чем у меня сложность? При верстке многостраничного сайта, становится проблемно писать какую либо ссылку в футер или подвал, да и вообще любое изменение становится болью, менять приходиться везде. Наверняка есть решение, поделитесь им, плиз.
На данный момент изучаю HTML и CSS.
  • Вопрос задан
  • 1347 просмотров
3 комментария
Подписаться 4 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 6
uid2695
@uid2695
Разработчик сайтов и магазинов
gulp-file-include
Ответ написан
Комментировать
Комментировать
jooru
@jooru
Начните с SSI (Server Side Includes) — гуглите.
Пример для вас. Файлы должны быть в html, но с расширением .shtml:

1. Создаём основной файл и файлы шапки и подвала. Например, index.shtml, header.shtml, footer.shtml.

2. В основном файле прямо внутри html-вёрстки пишем:
<!--#include file="header.shtml"-->
...и туда будет вставляться содержимое файла шапки.

3. Там же внизу:
<!--#include file="footer.shtml"-->
...и туда будет вставляться содержимое файла подвальчика.

По крайней мере, для тренировки на простых учебных сайтах — самое то.
Смертельно быстро и никакого программирования )

Удачи!
Ответ написан
3 комментария
3 комментария
t_khudiyev
@t_khudiyev
Можно использовать nunjucks. Там кроме include есть переменные, циклы и разные другие приятные вещи. И синтаксис остается прежним
Ответ написан
2 комментария
2 комментария
Raxen
@Raxen
TechLead Frontend Developer, Beeline
Просто так, без дополнительных инструментов, естественным путем html не умеет импортировать в себя другой хтмл, Но!

Вы можете взять какой-нибудь сборщик вашего кода, например gulp, настроить, чтоб из одной папки он брал ваши файлы и складывал в другую
Также добавьте в сборку пакет gulp-rigger, после этого вы сможете внутри ваших html файлов использовать конструкцию, вида:
<body>
  //= templates/header.html
  <div>
     ...
  </div>
    //= templates/footer.html
</body>


где templates - это папка с вашими переиспользуемыми хтмл-ками, относительно той хтмл-ки, в которой используется вставка

Во время работы вы можете настроить чтоб Gulp смотрел изменения в вашей рабочей папке c хтмлками, например src и в режиме реального времени добавлял в них вставки в отдельную папку, например public

Или просто запуская команду собрать проект в консоле gulp пройдется по вашим файлам и внесет нужные изменения

Еще про сборку(с этими инструментами) доступно написано здесь
Ответ написан
7 комментариев
7 комментариев
@AleksRap
Просто используйте шаблонизатор pug и настройте gulp для работы с ним
Ответ написан
Комментировать
Комментировать
Vnevremen
@Vnevremen
digital designer
Я не заморачиваюсь со сборщиками и использую этот метод на js. У него есть минусы, но в целом задачу решает.

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Exit the function: */
      return;
    }
  }
}
includeHTML();
</script>


<div w3-include-html="header.html"></div>
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Разработка мобильного приложения с дополненной реальностью (AR)
25 нояб. 2024, в 23:32
200000 руб./за проект
Правка вёрстки Wordpress
25 нояб. 2024, в 23:17
1000 руб./за проект
Ещё заказы