Как правильно вынести header и footer во внешний файл в HTML шаблоне?

Question

[Иван Желудков]

Дано: 10 html страниц с одинаковой шапкой и подвалом. Как упростить редактирование, чтобы код шапки был в одном месте, а не сразу на всех страницах. Какой метод будет самым удобным и есть ли такой метод. Или может быть игра не стоит свеч?

Answer 1

[Serj-One]

1) Шаблонизаторы - например Jade
2) Плагины для сборщика - например gulp-rigger

Answer 2

[sergey]

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

//= template/header.html

стили с помощью sass, а именно правила 7 к 1, прописываем один раз к примеру в файле header.scss и footer.scss. И не важно сколько у вас страниц, вы один раз прописали все это и верстаете себе, это касается не только header и footer, это можно использовать с любым повторяющемся блоком.
Знакомьтесь с препроцессорами и удачи.

Answer 3

[Александр Серый]

Когда я был полным новичком, то использовал для этого PHP, как в WordPress. Создаются нужные файлы : footer.php, header.php, index.php и т.д. Потом подключаются через инклюды

<?php include 'header.php';?> Code goes here... <?php include 'footer.php';?>

. Разумеется, это все должно быть запущено через веб-сервер. Плюс такого подхода, что не нужно изучать что-то новое. Gulp и jade требуют времени (и желания) хотя и немного.
Если время есть, то ответ Serj-One в самую точку. Сам пользуюсь Jade, рекомендую.

UPD 2022 : Сейчас использую gulp-file-include.
1) Есть возможность передать данные в виде JSON.
2) Кроме того этот плагин "клеит" не только HTML, но и JS скрипты.