SSI
В настоящий момент существует огромное количество дополнений к языку HTML (Hyper Text Markup Language), призванные облегчить жизнь web-мастеру. Есть среди них полезные, есть и вредные, немыслимо тяжелые в изучении и совсем простые. Одним из простейших дополнений является SSI(Server Side Includes), о котором сегодня и пойдет речь.
SSI — это очень мощный и в то же время очень простой инструмент, способный реально помочь вам при создании и поддержке сайта. С помощью SSI-директив, их еще называют SSI-вставками, вы можете включать в свою страницу другие файлы, результаты работы программ, значения системных переменных и пр.
Преимущества этой технологии проявляются, когда вам нужно поддерживать достаточно большой по объему сайт, который имеет определенную структуру и повторяющиеся по всему сайту элементы. Хорошим примером может служить раздел с авторскими правами. Он повторяется на всех страницах узла и всегда одинаков. Поставив SSI-вставку, вы сможете хранить все авторские права в отдельном файле и подгружать их динамически при открытии странички. Причем содержимое этого файла будет вставляться сервером на каждой странице в указанное вами место, а браузер будет получать исключительно корректный HTML-код. Согласитесь, что гораздо легче исправить один файл, чем каждую страницу сайта, если в этом возникает необходимость.
Представьте, что ваш узел состоит из 200 страниц, а ваши авторские права провоцируют судебную тяжбу с производителями корма для собак и поэтому требуют кардинальных изменений. Сколько работы ждет вас впереди? А тут поменял текст в одном файле — и положил на сервер в течение нескольких секунд. Кроме того, при большом объеме сайта можно значительно выиграть в дисковом пространстве. Оно, конечно, сейчас почти ничего не стоит, но экономить не помешает — например, потребуется меньше времени на закачку файлов на сервер.
Для того чтобы сервер в HTML-документах распознавал SSI-директивы, необходимо дать ему на то указания. Наиболее распространенный способ, позволяющий это сделать, состоит в изменении расширения файла с .html на .shtml.
Даже если вы не собираетесь использовать возможности SSI прямо сейчас, все равно имеет смысл дать всем страничным файлам такое расширение, чтобы потом не пришлось переправлять ссылки. Файлы переименовать, конечно же, просто, но ссылки на них стоят на других сайтах, — поди найди их все и исправь. Так что лучше сразу использовать SSI, тем более что это очень просто.
Однако не все так безоблачно, как кажется на первый взгляд. Каждая директива обрабатывается сервером отдельно, поэтому если вы поместите на странице слишком много директив, то производительность последнего может значительно снизиться. Но большинство современных web-серверов имеют достаточно большую мощность, и замедление узла, связанное с выполнением SSI-директив, будет не очень заметным.
Что ж, теперь давайте посмотрим, какие же возможности предоставляет нам эта технология. Любая SSI-вставка имеет следующий вид:
<!--#команда параметр=”значение”-->Причем между символами <!--# и --> не должно быть пробелов. Такой тэг, только без знака #, служит комментарием в HTML-коде. Если по какой-то причине на сервере отключена поддержка SSI, то директивы не будут выполняться, соответственно, не будут и отображаться их результаты работы в окне браузера.
Начнем с самой полезной и часто используемой директивы #include. С ее помощью web-мастера экономят много сил и времени. Она позволяет вставлять в заданное место страницы содержание внешнего файла и имеет два параметра: file и virtual.
Параметр file определяет расположение вставляемого файла относительно текущего документа. Допустим, вы хотите SSI-вставкой включить в страницу ваше авторское право. Нет ничего проще. Записываем его в отдельный файл, сохраняем в данном каталоге и подгружаем директивой
<!--#include file=”author.txt”-->Но лучше это сделать с помощью параметра virtual, который предназначен для указания абсолютного пути к файлу:
<!--#include virtual=”/path/author.txt”-->Следующей не менее популярной командой является команда установки значения переменной #set:
<!--#set var=”имя_переменной” value=”значение_переменной”-->Используя эту SSI-вставку с варьирующимися значениями определенной в ней переменной, вы можете получать различные результаты. Для того чтобы переменная могла участвовать в выражении, перед ее значением ставится знак $, который показывает, что это действительно переменная, а не просто текст.
Наряду с директивой #set с переменными еще работает команда #echo, которая печатает значение переменной. Например:
<!--#set var=”number” value=”&2002”--> <!--#echo var=”number”-->После выполнения этих директив в окне браузера отобразится число 2002.
Имя переменной может быть произвольным, как в приведенном выше примере, а может быть и специально определенным для SSI. Такие зарезервированные переменные перечислены в Табл. 1. Кроме этого переменные могут использоваться в сложных конструкциях с использованием условных операторов, имеющих следующий синтаксис:
<!--#if expr=”условие1”-->
<p>Выполнено условие №1</p>
<!--#elif expr=”условие2”-->
<p>Выполнено условие №2</p>
<!--#else-->
<p>Ни одно из условий не выполнено</p>
<!--#endif-->Для того чтобы вставить в страницу результат работы внешней программы, используют директиву #exec. В зависимости от того, каким из параметров вы воспользуетесь —cmd или cgi, в страницу будет вставляться результат обычного приложения или CGI-программы.
Допустим, вы хотите вывести список всех файлов, находящихся в данной директории. В среде Windows за это отвечает команда dir, соответствующая директива имеет следующий вид:
<!--#exec cmd=”dir”-->А если вам нужно вставить в страницу результаты программы Hello.cgi, то директиву #exec следует написать несколько иначе:
<!--#exec cgi=”Hello.cgi”-->Следующая директива #flastmod вставляет в страницу дату последнего изменения файла, указанного в параметре file. Например:
<!--#flastmod file=”News.html”-->Эта директива просто незаменима в тех случаях, когда нужно указать дату последнего обновления, зависящего от времени последнего изменения файла, т.е. дать знать пользователю, насколько в нем устарели данные. Такими, к примеру, являются файлы, содержащие в себе сводку погоды, курс валют, разные новости и пр. Данные, возвращаемые этой командой, могут быть заданы в определенном формате директивой #config, которую мы рассмотрим ниже.
Еще одной директивой, формат данных которой задается с помощью #config, является директива #fsize. Она возвращает размер файла, указанного в параметре file. По умолчанию размер выводится в байтах. Дабы вставить в страничку размер файла index.html, нужно прописать следующее:
<!--#fsize file=”index.html”-->Как я говорил, формат данных, возвращаемых этими командами, может задаваться с помощью директивы #config, у которой есть три параметра: sizefmt, errmsg и timefmt.
Параметр sizefmt задает формат для данных, выдаваемых директивой #fsize. Можно сделать так, чтобы значение размера выводилось не в байтах, а округлялось до ближайшего значения в килобайтах:
<!--#config sizefmt=”abbrev”-->
<!--#fsize file=”index.html”-->Размер файла index.html будет возвращен в килобайтах. Чтобы вернуться к стандартному формату, параметру нужно присвоить значение "bytes".
С помощью параметра errmsg можно создать сообщение об ошибке, которое будет выводиться в случае неправильного выполнения директив SSI. Допустим, вы попытались директивой #include вставить в страницу несуществующий файл. В этом случае сервер выдаст вам сообщение об ошибке. Например, Apache выдает такое сообщение: [an error occurred while processing this directive] — согласитесь, не совсем то, что хотелось бы видеть у себя на странице в случае ошибки.
Давайте создадим другое сообщение, более понятное — например, такое:
<!--#config errmsg=”К сожалению, этот файл отсутствует.”-->Параметр timefmt позволяет изменять формат отображения времени, которое выводится с помощью директив SSI. В частности, запись:
<!--#config timefmt=”%A, %H:%M”-->приведет к тому, что время в окне браузера будет выглядеть следующим образом: Sunday, 21:33. Задавать формат времени можно как угодно, используя при этом специальные коды, которые замещаются соответствующими данными времени и даты. Совмещая эти коды с текстом, можно добиться довольно изощренных сообщений. Список таких кодов приведен в Табл. 2. Как вы, наверное, уже успели заметить, технология SSI очень проста и удобна в обращении, при этом она предоставляет поистине огромные возможности, из которых можно выделить мгновенное изменение дизайна, не требующее переделки всех страничек вашего узла — достаточно переписать директивы SSI, отвечающие за внешний вид сайта. В данной статье были вкратце рассмотрены наиболее часто используемые директивы, на самом деле их насчитывается более десятка, и зачастую они представляют собой достаточно большие и сложные конструкции.
Использование SSI
Как все нормальные люди, вначале расшифруем аббревиатуру SSI - Server Side Includes или, по-русски, - включения на стороне сервера. Понятно? Нет? Ну, тогда расскажу поподробнее…
SSI - это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые, кстати, называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Какие, спросите Вы? А вот, например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа броузера) и другие не менее приятные вещи.
Преимущества SSI проявляются, когда нам нужно поддерживать достаточно большой по объему сайт, имеющий определённую структуру и повторяющиеся элементы кода на всех страничках. Вообще, при применении серверных включений сайт удобно рассматривать как состоящий из отдельных блоков, каждый из которых отвечает за свою часть странички. Эти блоки практически неизменны и повторяются от страницы к странице. В эти блоки можно вынести такие элементы странички, как: главное меню, рекламные вставки, повторяющиеся элементы оформления страничек и т.д. Физически эти блоки представляют собой просто HTML-файлы, содержащие часть кода, нужную для выполнения их задачи.
Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации web-сервера, но в основном применяется именно *.shtml.
Полная страничка формируется web-сервером на лету, собирая код странички из таких вот блоков. Для того, чтобы указать серверу, какой блок нужно вставить и в каком месте странички, используется специальная форма записи в виде комментария. Вот такая:
<!--#command param="value" --> где # - признак начала SSI-вставки;
command - SSI-команда;
param - параметры SSI-команды.
SSI-команд насчитывается около десятка, но я расскажу только о самых употребляемых. Самая популярная команда - это команда включения содержимого одного файла в другой:
<!--#include virtual="/path/file.ssi"--> где include - команда вставки;
virtual - параметр, определяющий, как трактовать путь - как абсолютный ( file) или как относительный (virtual);
"/path/file.ssi" - путь к включаемому файлу.
Результатом её выполнения будет вставка содержимого файла file.ssi в месте появления данной директивы. При просмотре сформированного исходника HTML-файла мы не увидим никаких признаков SSI, т.к. данный механизм действует абсолютно прозрачно для броузеров, они получают исключительно корректный HTML-код.
Следующая команда - это команда установки значения переменной:
<!--#set var="pic" value="picture.gif" --> где var - команда установки значения переменной;
pic - имя переменной;
picture.gif - значение переменной.
В данном случае мы определили переменную с именем pic и присвоили ей строковое значение "picture.gif". Значение переменной pic теперь доступно внутри SSI-вставки, и мы можем его использовать по нашему усмотрению. Например, используя одну и ту же SSI-вставку, но с разными значениями определённой в ней переменной, мы получим различные результаты. Перед тем, как показать реальный пример использования переменных в SSI-включениях, я расскажу о некоторых командах, применяемых при работе с переменными. Во-первых, это команда печати значения переменной:
<!--#echo var="pic" -->Её выполнение приведёт к тому, что в месте появления команды напечатается значение переменной pic, т.е. "picture.gif".
Переменная может участвовать в выражениях, в этом случае перед ней ставится знак '$', показывающий, что это именно переменная, а не просто текст. Вот пример:
<!--#set var="A" value="123" -->
<!--#set var="B" value="$A456" -->После такого присвоения переменная B будет содержать строку "123456". Если же в текст понадобится просто вставить знак '$' или какой-нибудь из других специальных знаков, то его нужно предварить слешем, вот так: '\$'. В некоторых случаях для избежания двусмысленности значение переменной может быть заключено в фигурные скобки: "${A}".
Более сложное применение переменных возможно с использованием условных операторов, имеющих следующую форму написания:
<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->где condition - условие для сравнения.
В зависимости от результатов проверки мы можем подставить тот или иной фрагмент кода. Допустим, мы можем проанализировать тип броузера пользователя и в зависимости от этого выдать либо код для Netscape Navigator-а, либо Internet Explorer-а. Это может оказаться полезным в некоторых случаях, когда невозможно сделать страничку, которая корректно отображалась бы в обоих броузерах. Вот пример использования условного оператора:
<!--#set var="Monday" -->
<!--#if expr="$Monday" -->
<p>Сегодня понедельник.</p>
<!--#else -->
<p>Что угодно, но не понедельник.</p>
<!--#endif -->В данном случае условием проверки является существование переменной $Monday и, в зависимости от этого, подстановка того или иного HTML-кода.
Теперь давайте рассмотрим реальный пример применения SSI для формирования сложного документа из нескольких SSI-вставок. Вначале напишем текст основного HTML-документа, полагая, что SSI-вставки находятся в каталоге /ssi.
index.shtml:<!--#set var="title" value="Что такое SSI?" -->
<!--#set var="keywords" value="SSI, SHTML, CGI, Apache" -->
<!--#set var="description" value="Пример использования SSI." -->
<!--#include virtual="ssi/_header.shtml" -->
Здесь находится текст нашей странички.
<!--#include virtual="ssi/_footer.shtml" -->Теперь напишем код для этих SSI-вставок:
_header.shtml:<html>
<head>
<title><!--#echo var="title" --></title>
<meta name="keywords" content="<!--#echo var="keywords"-->">
<meta name="description" content="<!--#echo var="description"-->">
</head>
<body>_footer.shtml
</body>
</html>Как видите, основной документ предельно упрощён и состоит из директив, устанавливающих значения переменных title, keywords и description, которые и будут подставлены в код странички при обработке SSI-вставок, определяющих код для верхней и нижней частей странички. Реальный код SSI-вставок обычно гораздо сложнее и может включать в себя большее количество определяемых переменных и сложных условий, формирующих окончательный вид странички.
Первое преимущество SSI с точки зрения дизайнера заключается в том, что при таком подходе web-мастеру, занимающемуся поддержкой сайта, можно не бояться случайно испортить дизайн. Элементы сложной вёрстки скрыты за счет использования SSI, и поддержка содержимого страничек становится гораздо более лёгким и приятным делом.
Второе, не менее важное преимущество - это возможность мгновенной замены дизайна сайта, не требующая переделывания страничек с информационным содержанием сайта. Для смены дизайна достаточно переписать SSI-вставки, формирующие внешний вид сайта. В нашем случае это файлы _header.shtml и _footer.shtml.