Как организовать подключение шапки и подвала на страницы в сайте, чтобы постоянно не писать их? Без использования php
-
2обычно используется общий шаблон и в него включается контент страницы. слишком общий вопрос не видя Вашего кода или текущего алгоритма подключения шапки и подвала.– Alex7 мар 2018 в 10:48
-
Вопрос в том, что я не знаю, как подключить шапку на все страницы сайта.– Optimus7 мар 2018 в 10:57
-
Если без использования php, то с использованием чего? Вы пишете обыкновенный html без привлечения дополнительных инструментов? Если так, то как насчёт использовать какой-нибудь генератор статических сайтов?– andreymal7 мар 2018 в 11:01
-
1@ДмитрийМаслов приведите код Вашей страницы - как сейчас Вы подключаете шапку ?– Alex7 мар 2018 в 11:08
-
1Я просто обычно копирую всегда шапку(весь код) и вставляю его в другие страницы. Сейчас хочу узнать, как можно не делать этого постоянно– Optimus7 мар 2018 в 11:16
3 ответа
Вариант 1: Использование генератора статических сайтов.
То есть есть программа в который вы визуально или посредством редактирования кода (или оба варианта) собираете сайт, например менюшка, футер, страницы и так далее. После этого программа генерирует статический код сайта на основе введённых данных. Дале можно обновить данные и пересобрать сайт.
Список генераторов статических сайтов тут - https://habrahabr.ru/company/selectel/blog/236441/
Вариант 2: Использование JS.
Делаете js
файл, например с такой функцией.
var headerText = `<div>
Моя шапка
<span>Ещё код шапки</span>
</div>`;
function setHeader() {
var header = document.createElement("div");
header.innerHTML = headerText ;
document.body.insertAdjacentElement('afterbegin', header );
}
setHeader();
Просто подключаете скриптовый файл в конце страницы, и header будет добавлен первым тегом в body.
Либо можно подключать в начале и вызывать функции на onload
страницы.
Аналогично и с футером, только вставляем перед закрытием body, для этого вместо afterbegin
пишем beforeend
.
Если вы используете при разработке Gulp, то есть довольно интересный плагин, который может вам помочь, а именно gulp-rigger. Суть этого плагина заключается в том что он может импортировать один файл в другой простой конструкцией.
Например, создаете отдельный файл header.html или footer.html. Далее просто подключаете его в основной index.html и во все последующие страницы вашего сайта вот так:
//= footer.html
При сборке gulp-проекта участок кода, записанный в вашем импортированном файлике будет на всех указанных местах.
Подробнее о плагине тут
Если не php, то тогда можно использовать javascript. Между шапкой и футером вставьте <div id='content'></div>
. В зависимости от url меняйте его содержимое. Например $("#content").append("<b>Appended text</b>");
Содержимым могут быть как данные, так и шаблоны ваших страниц.
Если использовать javascript, то лучше воспользоваться каким-нибудь js фреймворком.