Как облегчить редактирование статических страниц сайта. Подключение функции include

Как облегчить редактирование статических страниц сайта. Подключение функции include

Когда статический сайт состоит из десятка страниц, то при его редактировании приходится вносить изменения на все страницы.
Речь идет о повторяющихся фрагментах кода (блоках), таких как: шапка сайта, логотип, слайдер, меню, футер (footer - подвал), сайдбар (sidebar боковая панель), социальные закладки, счётчик посещаемости и т.д.

Понятно, что внесение изменений в большое количество статических страниц отнимает время и увеличивают вероятность ошибок.
Попробуем упростить редактирование повторяющихся на сайте элементов путём подключения функции PHP "include". Условием работы данного варианта является хостинг с поддержкой любой (не древней) версии PHP.

После внедрения функции include в состав каждой страницы очевидны следующие плюсы:
- Правка кода в одном файле будет распространяться на все страницы сайта.
- Вынос повторяющегося кода в отдельные файлы на много упростит визуальное восприятие html документа и поможет легче в нём ориентироваться.
- Гораздо проще совершать операции по перемещению блоков.

Посмотрите, как выглядит код страницы с применением функции include:

Применение функции include


Вес главной страницы для редактирования уменьшился с 60 Кб до 2.4 Кб. Конечно вес для браузера остался прежним, но редактировать подобный файл гораздо приятнее - все блоки (секции) на виду.

Разберём 2 варианта подключения:
1. Первый при помощи файла .htaccess
2. Второй с использованием JS скрипта

Первый вариант подключения функции include с использованием файла .htaccess


1. Копируем и переносим повторяющиеся на каждой HTML странице блоки (div, section, container) или элементы кода в отдельно созданные файлы.
Допустим, создаём файлы: header.php, menu.php, slider.php, sidebar.php, footer.php и заполняем их вырезанным содержимым соответственно. Для порядка помещаем их в отдельную папку, пусть будет "inc".

2. На место, где находились удалённые фрагменты кода вставляем конструкции:
<? include "inc/header.php"; ?>
<? include "inc/menu.php"; ?> 
<? include "inc/sidebar.php"; ?>
<? include "inc/footer.php"; ?>

Как видно, указан путь к этим файлам через папку inc.

3. Для работы функции include создаём в корневой директории сайта файл без имени .htaccess со следующим содержимым:
AddHandler application/x-httpd-php .php .html .htm
AddDefaultCharset UTF-8

Обратите внимание на кодировку. Файлы сайта должны быть такой же кодировки. Если это не так, то замените UTF-8 на cp1251.

В интернете можно встретить такие варианты подключения в файле .htaccess:
AddType application/x-httpd-php .php .html .htm

AddType - это более старый вариант кода. AddHandler сегодня используется чаще.

Второй вариант подключения функции include посредством JS скрипта


Возможны случаи, когда не возможно использовать файл .htaccess, допустим он выполняет иные задачи (на CMS) и конфликтует с предложенным выше кодом.
В таком случае на помощь придёт подключение include через js скрипт.

1. Как и в первом варианте переносим повторяющиеся фрагменты кода в отдельные файлы, например: header.html, menu.html и т.д.

2. В освободившееся место помещаем конструкцию:
<div w3-include-html="inc/menu.html"></div>
где inc папка с файлами, содержащими вырезанный код.
Так же поступаем со всеми фрагментами повторяющегося кода, соответственно присваивая им свои названия файлов и изменяя конструкцию вставки.

3. Теперь заставим работать созданные изменения посредством js скрипта.
Создаём файл, допустим с названием include.js и содержимым:

function includeHTML() {
var z, i, elmnt, file, xhttp;
/* цикл через коллекцию всех элементов HTML */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/* поиск элементов с определенным атрибутом: */
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* делаем HTTP-запрос, используя значение атрибута в качестве имени файла: */
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.";}
/* удаляем атрибут и вызываем эту функцию еще раз: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
} 
xhttp.open("GET", file, true);
xhttp.send();
/* конец */
return;
}
}
}

Помещаем созданный файл в директорию (папку) с именем js.

4. Для вызова этого файла между тегами
<head></head>
вставим:
<script src="js/include.js"></script>
указав путь к его расположению, как здесь или свой.

5. Внизу страницы, перед </body> добавим вызов includeHTML() маленьким сообщением:
<script>
includeHTML();
</script>

Всё должно заработать.

Внимание!
Если, вы решите переместить вызов скрипта вниз документа перед </body>, как этого требует здравый смысл, то он должен быть расположен выше
<script>includeHTML();</script>

Если на странице уже подключены другие js скрипты, то система может не работать - возникнет конфликт между скриптами. В этом случае верните вызов скрипта обратно между тегами head.

Вообще, содержимое файла include.js можно не выделять в отдельный файл, а разместить код, приведённый в п.3, целиком внизу или вверху страницы окутав тегами
<script>Здесь код</script>

Примеры готовых к размещению файлов можете скачать по ссылке: include-files.zip [3,14 Kb] (cкачиваний: 12)

Автор: Saah | Просмотров: 73 | 1-09-2019,Вс, 04:24  

Комментарии к статье

Автор: Василий Дата: 10 октября 2019 10:08

А второй вариант include пробовал на практике? У меня чего-то с первым не выходит

Автор: Николай Дата: 10 октября 2019 10:00

Скачал примеры, подключил первый вариант include - всё работает отлично. Спасибо за подробное описание, давно хотел упростить редактирование страниц. На создаваемых мной сайтах всегда около 10 страниц, include значительно упрощает работу.

Добавить свой комментарий:

@
Похожие публикации