Как вставить один и тот же код одновременно на все страницы сайта?

.. или что такое SSI - Включения на стороне сервера?

Как правило, сайт представляет из себя набор практически одинаковых страниц в плане их кода, и содержит много "блоков" которые дублируются на всех страницах сайта. На страницах меняется лишь контент, а такие "блоки" кода как "шапка" сайта, "подвал" сайта, блок с меню.. остаются неизменными на всех страницах.

Взгляните на шаблон сайта, цветами в нем выделены куски кода которые будут повторятся на всех страницах сайта:

Файл index.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Включения на стороне сервера</title>
</head>
<body>
<table border="1" align="center" width="640" height="480" cellspacing="0" cellpadding="15">
<tr> <td colspan="2" height="80"> <h3>Шапка сайта.</h3> Представьте что здесь есть логотип, ссылка на главную страницу, форма "поиск по сайту", графика в общем всё то что обычно располагают в шапке сайта.. </td> </tr> <tr>
<td width="120"> <h4>Меню:</h4> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li> </ul> </td> <td>
<h4>Содержание сайта</h4>
Здесь основное содержание сайта, куча текста, рисунки, графики, таблицы.. контент короче.. И что интересно по сравнению с другими будущими страницами данного сайта меняться будет только эта ячейка! Ячейки с шапкой, подвалом, меню сайта будут точно такими же как и на всех остальных страницах.
</td>
</tr>
<tr> <td colspan="2" height="50"><h4>Подвал сайта</h4> Здесь авторские права, дата, адрес, счётчики..</td> </tr> </table>
</body>
</html>

смотреть пример

В связи с этим веб мастерам приходится постоянно проделывать одни и те же операции..

Ну например: есть у Вас штук десять страниц сайта и Вы написали ещё одну - одиннадцатую и теперь чтобы связать страницу ссылками с другими страницами сайта Вам нужно открывать каждую страницу, искать в ней блок с меню, дописывать в этом блоке ссылку на новую страницу.. хорошо если страниц на сайте всего десять! А если их штук 100?? Убить полдня на перелинковку?

Выход есть!

А что если одинаковые кусочки кода повторяющиеся на каждой странице вынести в отдельные файлы, а потом загружать их в нужные места на страницы? Ну вот допустим вытащить ячейку с "меню" из примера выше в отдельный файл.. вот этот кусок кода:

<td width="120"> <h4>Меню:</h4> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li> </ul> </td>

А на страницах в нужном месте, где нужен этот код оставить инструкцию, что мол, сюда нужно вставить данный код! Теперь для того чтобы изменить меню на всех страницах сайта потребуется внести коррективу всего в один файлик.

Для этих целей существует технология SSI (Server Side Includes) - Включения на стороне сервера.

SSI - это директивы, вставляемые непосредственно в HTML и служащие для передачи указаний Web-серверу. Встречая такие директивы, Web-сервер интерпретирует их и выполняет соответствующие действия (вставка HTML-фрагмента из другого файла, динамическое формирование страниц и так далее)

На самом деле эта наука заслуживает отдельного учебника, но мы здесь не будем вдаваться в подробности, а решим с помощью данной технологии нашу конкретную задачу.

Теперь по порядку.. будьте внимательны!!

Первое что нам необходимо сделать, это переименовать наш файл index.html на index.shtml - именно такое расширение файла указывает Web-серверу на то, что мы собираемся использовать SSI
Вырезаем из файла index.shtml куски кода которые будут повторятся на всех страницах сайта (в примере они выделены цветами) и сохраняем их отдельными файлами с расширением *.txt назовём, их к примеру:
header.txt - файл с кодом "шапки" сайта
menu.txt - файл с кодом меню сайта
footer.txt - файл с кодом "подвала" сайта
- обычно такие кусочки кода сохраняют в отдельной папке под именем include
Вставляем в нужные места кода файла index.shtml директивы - включения на стороне севера
Пишутся эти директивы в виде комментариев вот так:

- так например эта строчка заменит собой отсутствующий код с меню сайта и будет его черпать из файла menu.txt который лежит в папке include.

В результате всех этих манёвров у нас должно получиться четыре файла:

Файл index.shtml :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Включения на стороне сервера</title>
</head>
<body>
<table border="1" align="center" width="640" height="480" cellspacing="0" cellpadding="15">

<tr>

<td>
<h4>Содержание сайта</h4>
Здесь основное содержание сайта, куча текста, рисунки, графики, таблицы.. контент короче.. И что интересно по сравнению с другими будущими страницами данного сайта меняться будет только эта ячейка! Ячейки с шапкой, подвалом, меню сайта будут точно такими же как и на всех остальных страницах.
</td>
</tr>

</table>
</body>
</html>

Файл header.txt : <tr> <td colspan="2" height="80"> <h3>Шапка сайта.</h3> Представьте что здесь есть логотип, ссылка на главную страницу, форма "поиск по сайту", графика в общем всё то что обычно располагают в шапке сайта.. </td> </tr>

Файл menu.txt : <td width="120"> <h4>Меню:</h4> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li> </ul> </td>

Файл footer.txt : <tr> <td colspan="2" height="50"><h4>Подвал сайта</h4> Здесь авторские права, дата, адрес, счётчики..</td> </tr>

смотреть пример

Вот собственно и всё.. теперь можно загрузить всё это дело на сервер, открыть страницу index.shtml и насладится первым результатом! Только имейте ввиду, что сервер должен поддерживать эту технологию.. думаю на любом платном хостинге есть поддержка SSI, так что с этим проблем не будет..

Теперь чтобы изменить какой либо блок с повторяющимся кодом одновременно на всех страницах сайта достаточно внести изменения в один единственный файлик, включённый в данные страницы с помощью директивы:


Меня спрашивали я отвечал:

Я всё делал по инструкции, но на моём компьютере ничего не работает!!
- Если Вы для создания сайтов на Вашем компьютере не используете какой либо виртуальный сервер, то ничего работать не будет до тех пор пока Вы не отправите всё содержимое на сервер Вашего хостера .. На то и называется эта технология - включения на стороне сервера, а не включения на стороне пользователя.

Какой <!DOCTYPE> следует указывать при использовании технологии SSI с такими вот файлами txt?
- В самих txt файлах <!DOCTYPE> вообще не нужен!!, а в файле *.shtml используйте тот который стоял у Вас раньше.. Эта технология всего на всего позволяет "раскроить" страницу, а потом "сшить" её из отдельно взятых кусочков кода..

Как обстоит дело и индексацией страниц? будут ли видны поисковому роботу такие "склеенные" страницы?
- Так как "склеивание" документа происходит на стороне сервера поисковый робот, равно как и человек, не заметит подмены.. Сервер по запросу робота выдаст уже полный "склеенный" документ, так что проблем с его индексацией быть не может!

Я вынес "подвал" сайта в отдельный txt файл, там у меня расположены счетчики посещений, будут ли они теперь корректно работать?
- Да, счетчики будут работать корректно.. ещё раз говорю, что файлы txt "склеиваются" на стороне сервера и сервер выдаёт по запросу всю страницу целиком.