SSI на практике

Влад Мержевич

SSI используется не только для вывода каких-либо значений, но и для упрощения построения сайта и добавления некоторых удобных вещей, которых лишён HTML. Рассмотрим некоторые примеры применения SSI в деле.

Ссылка на главную страницу

Обычно ссылку на главной странице на саму себя не делают, чтобы не сбивать пользователей с толку. При этом на остальных страницах такая ссылка есть и она ставится на заголовок сайта. Пусть файл с главной страницей называется index.shtml, тогда нам надо определить, не совпадает ли имя открытого документа с этим и в зависимости от совпадения решаем, делать или нет ссылку. В примере 1 переменная DOCUMENT_URI сравнивается со значением /index.shtml и если оно не равно, иными словами, у нас любая страница кроме главной, тогда картинку делаем ссылкой.

Пример 1. Главная страница

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>SSI</title>
 </head>
 <body>
  <!--#if expr="($DOCUMENT_URI != \"/index.shtml\")"-->
   <a href="/"><img src="logo.gif" alt="Логотип"></a>
  <!--#else-->
   <img src="logo.gif" alt="Логотип">
  <!--endif-->
 </body>
</html>

Определение Internet Explorer

В некоторых случаях для браузера Internet Explorer необходимо загружать отдельный код, который отличается для других браузеров. Тогда используем переменную HTTP_USER_AGENT и сравниваем её со значением MSIE. Обратите внимание, что если просто вывести HTTP_USER_AGENT, то текст будет совсем другой. В примере 2 показано, как задать один текст для всех версий IE и другой для остальных браузеров.

Пример 2. Определение IE

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>SSI</title>
 </head>
 <body>
  <!--#if expr="$HTTP_USER_AGENT = /MSIE/"-->
   <p>Ваш браузер устарел, пожалуйста, замените Internet Explorer на другой.</p>
  <!--#else-->
   <p>Добро пожаловать на сайт!</p>
  <!--endif-->
 </body>
</html>

Создание шаблона

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

Предположим, что типовой документ на сайте имеет структуру, показанную в примере 3. Различаться будет только содержимое <article>, а всё остальное кочует из файла в файл.

Пример 3. Типовой файл

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>SSI</title>
  <!-- Стилевые файлы и скрипты -->
 </head>
 <body>
  <header>Шапка сайта</header>
  <article>Содержание текущего документа</article>
  <aside>Боковая панель</aside>
  <footer>Подвал</footer>
 </body>
</html>

Чтобы не писать каждый раз одно и то же, вынесем похожие фрагменты в текстовые файлы и поместим их в папку assets. Тогда шаблон будет иметь вид, как показано в примере 4.

Пример 4. Шаблон

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>SSI</title>
  <!--#include virtual="/assets/link.txt"-->
 </head>
 <body>
  <!--#include virtual="/assets/header.shtml"-->
  <article>Содержание текущего документа</article>
  <!--#include virtual="/assets/aside.shtml"-->
  <!--#include virtual="/assets/footer.txt"-->
 </body>
</html>

Обратите внимание, что файлs header.shtml и aside.shtml имеют расширение .shtml, для того, чтобы в них подключать директивы SSI.

Выделение текущего пункта меню

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

Пример 5. Меню для сайта

<ul>
  <!--#if expr="($DOCUMENT_URI = '/1.shtml')"-->
  <li class="active">Эрик Картман</li>
  <!--#else-->
  <li><a href="1.shtml">Эрик Картман</a></li>
  <!--#endif-->
 <!--#if expr="($DOCUMENT_URI = '/2.shtml')"-->
  <li class="active">Кенни Маккормик</li>
  <!--#else-->
  <li><a href="2.shtml">Кенни Маккормик</a></li>
  <!--#endif-->
 <!--#if expr="($DOCUMENT_URI = '/3.shtml')"-->
  <li class="active">Стэн Марш</li>
  <!--#else-->
  <li><a href="3.shtml">Стэн Марш</a></li>
  <!--#endif-->
 <!--#if expr="($DOCUMENT_URI = '/4.shtml')"-->
  <li class="active">Кайл Брофловски</li>
  <!--#else-->
  <li><a href="4.shtml">Кайл Брофловски</a></li>
  <!--#endif-->
</ul>

На сайте сделано четыре файла с именами 1.shtml, 2.shtml, 3.shtml и 4.shtml. Чтобы SSI различал, какому пункту меню какой файл соответствует, используется переменная DOCUMENT_URI. Если её значение совпадает с именем открытого документа, то ссылка не добавляется.

Версия для печати

Версия для печати содержит то же самое содержание, что и текущая страница, но специально оптимизированное для печати документа, к примеру, может отсутствовать реклама, какие-то декоративные элементы. Чтобы различать «нормальную» страницу и её версию для печати, к адресу документа добавим ?print, а с помощью SSI будем проверять, есть эта добавка или нет. Поскольку адрес документа может быть произвольным, воспользуемся переменной DOCUMENT_URI для его получения и создания ссылки на печатную версию (пример 6).

Пример 6. Версия для печати

<!--#if expr="($QUERY_STRING = 'print')"-->
 <p>Версия для печати</p>
<!--#else--> 
 <p>Обычная страница</p>
 <p><a href="<!--#echo var="DOCUMENT_URI"-->?print">Версия для печати</a></p>
<!--#endif-->
С помощью переменной QUERY_STRING идёт проверка, есть ли в адресе ключевое слово print или нет. Если оно присутствует, тогда выводится одна версия страницы, если этого ключевого слова нет, тогда отображается другая версия страницы со ссылкой.
SSI

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.