Последнее обновление: 9 Января 2022 г.

Руководство по технологиии SSI

Часть 3

SSI - это Server Side Includes (технология динамической сборки сайта из его отдельных частей)

Краткий перечень директив SSI
Переменная окружения QUERY_STRING

Краткий перечень директив SSI

Итак, мы знаем ряд директив. Приведем их вновь:

Директивы настройки

#set — для создания переменных и установки их значений (атрибуты var и value, используются вместе);
#config — для установки значений сообщения об ошибке (атрибут errmsg), формата размера файла (атрибут sizefmt), формата даты/времени (атрибут timefmt).

Выполняющие директивы

#echo — для вывода на экран значений переменных (атрибут var);
#include — для вставки содержимого из другого файла (атрибуты file или virtual);
#fsize — для вывода размера файла в заданном формате (атрибуты file или virtual);
#flastmod — для вывода даты последнего обновления файла в заданном формате (атрибуты file или virtual);
#printenv — для вывода списка переменных окружения (атрибутов не имеет).

Кроме того, мы знаем условный оператор #if.

Всё, что мы делали с помощью этих инструкций, записывалось в коде страницы, и изменить это можно только переписав код.

Теперь пора узнать, как можно изменить содержимое страницы, например, по запросу пользователя.

ПЕРЕМЕННАЯ ОКРУЖЕНИЯ QUERY_STRING

Query string означает «строка запроса». Значение строки запроса присоединяется к адресу файла через знак «?» и отображается в адресной строке:

http://адрес/сайт.html?значение_QUERY_STRING

Например:

http://site.ru/scores.html?fp

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

Попробуем реорганизовать таким образом сайт (точнее, его макет), который мы делали (см. Часть 1 и Часть 2).

Подготовим файлы.

style.css — содержит стили css

/* стили отображения и ссылок меню */
.txtmenu {text-align: center; color: #FF8080; font-weight: bold; font-family: Arial;}
a.lnkmenu:link, a.lnkmenu:visited, a.lnkmenu:active {color: #FFC; text-decoration: none;}
a.lnkmenu:hover {color: #FF8080; text-decoration: none;}
/* стили основного содержания (контейнер содержания имеет id "body") */
#body p {font-family: "Times New Roman", Times, serif; font-size: 100%; margin: 6px 0px 6px 0px; text-align: left;}
#body h1 {font-family: "Times New Roman", Times, serif; color: #000;}

kepka.txt — шапка сайта

Для простоты, так как это - исключительно учебный пример, сделаем всё на основе табличной верстки.

niz.txt — «подвал» сайта

Осталось подготовить файл, содержащий меню, и файлы с содержанием страниц. Но мы это сделаем потом, а сначала займёмся «контейнером» — index.html, который будет открываться в браузере.

<!DOCTYPE html>
<html>
<head>









<title></title>
<meta http-equiv="cont-Type" cont="text/html; charset=Windows-1251">
<link href="style.css" type=text/css rel=stylesheet>
</head>

<body>




<



</body>
</html>

Начнём разбираться.

В «шапка» сайта — блок условного оператора для названий страниц (в тэге <title>).

Файл-контейнер у нас один. И «голова» у него тоже одна. Следовательно, заголовок <title> должен изменяться при загрузке разных «псевдостраниц».

Итак, первое условие:

<!--#if expr = "$QUERY_STRING='' || $QUERY_STRING=page1" -->

$QUERY_STRING='' означает, что строка запроса пуста.

$QUERY_STRING=page1 означает, что строка запроса — это page1.

|| — оператор «или».

Когда мы загружаем главную страницу в первый раз, в адресной строке только имя файла, безо всяких вопросов с довесками. Следовательно, наша QUERY_STRING пуста ($QUERY_STRING=''). Когда же мы попадаем на главную страницу по ссылке с другой страницы сайта, то у нас появляется добавка ?page1, поскольку ссылки на сайте работают по запросу.

То есть, если пусто или если page1, то

<!--#set var = "DOCTIT" value = "Мой сайт - Главная страница" -->

задаём переменную DOCTIT, содержащую название главной страницы.

На другие страницы — page2, page3 и page4 — мы можем попасть только по запросу QUERY_STRING, поэтому всё то же самое, только без «или».

Теперь выводим переменную в тэг <title>:

<title><!--#echo var = "DOCTIT" --></title>

Дальше, понятное дело, включаем шапку и меню:

<!--#include file = "kepka.txt" -->
<!--#include file = "menu.html" -->

Теперь разберёмся в условном операторе для включения содержания страницы.

<!--#if expr="$QUERY_STRING" -->
<!--#include file="$QUERY_STRING.html"-->
<!--#else -->
<!--#include file="page1.html"-->
<!--#endif -->

Если адресная строка имеет «довесок» в виде QUERY_STRING, то включаем страницу, указанную в «довеске». В противном случае (т.е. QUERY_STRING чиста, как слеза) включаем page1 — главную страницу.

Каждый файл содержания имеет имя и расширение .html. Чтобы не прописывать .html в каждую QUERY_STRING, прописываем его в директиву #include как дополнение к QUERY_STRING, которая совпадает с именем файла без расширения.

Ну, и футер (подвал):

<!--#include file = "niz.txt" -->

Осталось прошерстить menu.html — меню сайта.

<table width="600" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#800000"><tr>

<td><div class="txtmenu">Главная</div></td>

<td><div class="txtmenu"><a href="index.html?page1" class="lnkmenu">Главная</a></div></td>


<td><div class="txtmenu">О сайте</div></td>

<td><div class="txtmenu"><a href="index.html?page2" class="lnkmenu">О сайте</a></div></td>


<td><div class="txtmenu">О нас</div></td>

<td><div class="txtmenu"><a href="index.html?page3" class="lnkmenu">О нас</a></div></td>


<td><div class="txtmenu">Ссылки</div></td>

<td><div class="txtmenu"><a href="index.html?page4" class="lnkmenu">Ссылки</a></div></td>

<td><div class="txtmenu"><a href= class="lnkmenu">Гостевая книга</a></div></td>
</tr></table>

Тут более громоздкая конструкция. Каждый #if имеет свой «персональный» #else, поэтому не получится использовать компактный #elif.

Итак, те же условия, что и в предыдущем блоке, но на каждое условие своя альтернатива.

Если главная страница,

<!--#if expr = "$QUERY_STRING='' || $QUERY_STRING=page1" -->

первый пункт меню — без ссылки:

<div class="txtmenu">Главная</div>

В противном случае — со ссылкой:

<div class="txtmenu"><a href="index.html?page1" class="lnkmenu">Главная</a></div>

А все файлы с содержанием (pageN.html) будут выглядеть следующим образом:

Вся технология SSI: Часть 1, Часть 3, Часть 4, Часть 5