Заметка SSI

TaLLeR43 · 29 Янв 2023

Большинство страниц на сайте, несмотря на их разное содержание, имеет одинаковую структуру кода. Например, верхняя и нижняя часть документа практически не меняется от страницы к странице. В таком случае рекомендуется разделить шаблон страницы на несколько файлов, которые подключаются по мере необходимости. Однако традиционный HTML не позволяет делать подобные кунштюки, поэтому помочь здесь могут серверные языки вроде PHP, Python, Ruby и др. Но для большинства начинающих веб-разработчиков эти названия звучат как неведомые заклинания, они ещё не готовы заниматься веб-программированием. В таком случае, как альтернатива, подойдёт SSI.

SSI (Server-Side Includes, включения на стороне сервера) позволяет добавлять контент во множество страниц, причём незаметно для пользователя. Это значит, что при запросе документа браузеру передаётся уже готовый, полностью сформированный код. Особенностью SSI является то, что это технология работает только под управлением веб-сервера и представляет собой набор команд вставляемых в HTML-файл.

Чтобы веб-сервер отличал рядовые HTML-файлы от SSI-файлов, им дают расширение .shtml. Конечно, можно указать, чтобы делалась проверка всех файлов на поиск специальных директив, но в таком случае возрастёт нагрузка на веб-сервер и несколько увеличится время загрузки файлов.

Вначале надо распорядиться, чтоб веб-сервер обрабатывал файлы с расширением .shtml. Для Apache создаём в корне сайта файл .htaccess и в нём пишем следующую строку.
AddHandler server-parsed .shtml
Причём расширение .shtml является стандартным, так что всё должно работать и без этой команды.

Теперь проверяем, как это действует. Делаем два файла — index.shtml будет содержать директиву SSI, а внутри content.html хранится заголовок сайта. Содержание этих файлов представлено в примерах 1 и 2.

Пример 1. Файл index.shtml

HTML:

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>SSI</title>

 </head>

 <body>

  <!--#include file="content.html"-->

</body>

</html>

Пример 2. Файл content.html
<h1>Работает!</h1>
В примере 1 содержимое файла content.html встраивается в файл index.shtml в том месте, где стоит команда . Обратите внимание, что файл content.html не содержит никаких тегов вроде <html> и <body>, иначе они также будут добавлены в исходный документ. По сути, это обычный текстовый документ, в котором имеются HTML-теги.

Если посмотреть итоговый код документа, то мы увидим следующее (пример 3).

Пример 3. Код, полученный в результате использования SSI

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSI</title>
</head>
<body>
<h1>Работает!</h1>
</body>
</html>

Если всё сделано правильно, то после запуска файла index.shtml, вы увидите надпись «Работает!». В том случае, когда написано нечто другое или вообще ничего нет, возможны два варианта.

Отображается надпись [an error occurred while processing this directive]. Это означает, что SSI работает, но в коде содержится ошибка. Например, добавлены лишние пробелы или указанного файла нет.
Ничего не отображается. Следует посмотреть исходный код документа, если в нем видна строка , значит веб-сервер не поддерживает SSI или оно не распространяется на расширение .shtml. Также вполне возможно, что файл запускается не под сервером, посмотрите, есть ли в адресной строке браузера http://.

Все упомянутые комплекты веб-серверов поддерживают SSI на исходном уровне, так что если страница как в примере 3 не отображается, необходимо проверить, что веб-сервер запущен и документ открывается в браузере под его управлением. Так, для домена test.lc открывать надо адрес website.org, а не file:///W:/html/test.lc/www/index.shtml.

Возможности SSI не ограничены добавлением содержимого другого файла. С помощью SSI можно запускать серверные приложения, использовать переменные окружения, указывать размер файла, дату модификации документа и многое другое.

Поиск

Поиск

Заметка SSI

TaLLeR43