000 articles/ssi..php

  1. Подготовка
  2. Разработка шаблонов
  3. Дополнительно
  4. Error Pages
  5. Счётчики

x-SSI. Отделяем содержимое сайта от дизайна

!!! Неоконченная версия !!!

"Мухи - отдельно, котлеты - отдельно"

(прошу меня поправить, если я ошибся в цитате)

Я не буду рассказывать, что такое технология SSI (Server Side Includes - включения на стороне сервера) и описывать её директивы. Можно почитать об SSI на CIT Forum, например. Я же хочу рассказать как с помощью SSI отделить управление и дизайн сайта от его содержимого - контента.

Подготовка

Проверка Хостинг-провайдера

Для начала нам необходимо убедится, что сервер на котором мы собираемся разместить наш сайт работает под управлением Apache, так как Microsoft IIS, не поддерживают, так называемые x-SSI инструкции - расширение SSI. К слову, на Windows серверах есть своя технология - ASP (Active Server Pages). К счастью, большинство провайдеров, в силу ряда причин используют именно Apache в качестве сервера, но убедиться, что Ваш Хостинг-провайдер работает с ним стоит.

Во первых, создайте файл ".htaccess" с таким содержимым:

Sample hide 
AddType text/html .html
AddHandler server-parsed .html
DirectoryIndex index.html
Важно! Эти директивы могут разница у разных хостеров, если что то не работает, рекомендую исследовать FAQ (ключевое слово SSI).

и index.html с таким содержимым:

Sample hide 
<!--#echo var="SERVER_SOFTWARE"-->
<!--#set var="xSSI" value=". xSSI work!"-->
<!--#echo var="xSSI"-->

Поместите их в корень вашего будущего сайта у Хостинг-провайдера. Теперь попробуйте зайти на Ваш сайт (браузером). Если

В последних 2х вариантах необходимо пойти в раздел FAQ Вашего провайдера.

Подготовка рабочей машины

Теперь самое сложное, необходимо установить сервер на рабочей машине, для отладки. Но во первых, сложно это только для новичка, а во вторых это полезно, опять же, для новичка. Рекомендую ставить Apache же. Инсталлятор под Windows. Скажу сразу я имел опыт по установки 2х серверов - оба они имели недостатки, делающие работу невозможной. Настройку можно сделать например по этой инструкции.

За исключением разделов "Языковые настройки", "Настройки PHP", "Виртуальные хосты" - их можете не трогать или править по своему усмотрению. Обратите внимание на строку "C:/Sites/" в инструкции, именно там должны находится все сайты с которыми вы собираетесь работать, создайте её до запуска сервера. Если у Вас уже есть папка с сайтами, укажите путь к ней, вместо "C:/Sites/".

Прежде чем начать, запомните - почти все сервера Apache в Сети работают на Unix системах, а следовательно чувствительны к регистру. учитывайте это.

Разработка шаблонов

чистый HTML

Для начала создадим первую страницу сайта index.html (на некоторых сайтах присутствуют страницы-заставки, интро, их в расчёт мы не берём). С полной информацией о ней:

  1. Содержимое тега <HEAD>: метаданные (<META>), подключаемые таблицы стилей - CSS, файлы скриптов - JS.
  2. "Шапку" сайта: Логотип, информация о компании, меню общее для всех разделов, меню появляющиеся лишь в некоторых разделах. Любая другая, общая для всех разделов информация.
  3. Уникальный контент
  4. "Подвал" сайта: контактная информация, копия меню, счётчики и т.п.

Полностью отладим её и разделим логически на 3 части, которые поместим в отдельные файлы

HTML + SSI

обратите внимание на расширение файлов - .html, на самом деле оно может быть любым, в зависимости от настроек сервера, но обычно используют букву "s" перед "html", чтобы показать что страница содержит SSI инструкции. Символ подчёркивания "_" удобно использовать чтобы файлы _header.html и _footer.html выделялись среди остальных страниц.

_header.html

(Sample hide) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Использование материалов сайта допускается только с разрешения администратора. 
Все логотипы и торговые марки принадлежат их владельцам. -->
<html>
<head>
<title>SSI site</title>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = windows-1251'>
<META NAME="keywords" CONTENT="SSI, site">
<META NAME="description" CONTENT="SSI site">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
<link rel=stylesheet href="style.css" type="text/css">
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="divMenu"> ... </div>
<div id="divSubMenu"> ... </div>

index.html

(Sample hide) 
<!--#include virtual="_header.html" -->
<div id="divMain">
SSI Site welcome you!
</div>
<!--#include virtual="_footer.html" -->

_footer.html

(Sample hide) 
<script type="text/javascript"> init();</script>
</body>
</html>

Пока, кстати говоря мы не использовали ни 1 xSSI инструкции и данный вариант с успехом ба работал на IIS сервере. но возникает ряд проблем:

  1. как сделать уникальный заголовок для каждой страницы
  2. как сделать уникальными метатеги
  3. как сделать разное подменю на разных страницах сайта
  4. как деактивировать кнопку меню для текущей страницы

первые 3 проблемы можно было бы решить путём включения в каждую страницу нескольких файлов, и начало файла index.html имело бы, например, такой вид:

Sample hide 
<!--#include virtual="_header.html" -->
<title>SSI site</title>
<META NAME="keywords" CONTENT="SSI, site">
<META NAME="description" CONTENT="SSI site">
<!--#include virtual="_menu.html" -->
<!--#include virtual="_submenu1.html" -->

HTML + xSSI

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

Для удобства я предлагаю создать отдельный файл _ssi.html

Sample hide 
<!-- Укорачиваем имена переменных-->
<!--#set var="d"	value="$DOCUMENT_NAME"-->
<!--#set var="p"	value="$DOCUMENT_URI"-->
<!--#set var="s"	value="$SERVER_NAME"-->
<!--#set var="h"	value="$HTTP_REFERER"-->

<!-- Установка корневой директории для локальной и Итернет версии-->
<!--#if expr="$s=localhost"-->	<!--#set var="root" value="http://localhost/ssi-site.ru/"-->
		<!--#else -->	<!--#set var="root" value="http://ssi-site.ru/"-->
<!--#endif -->

<!-- Page ID, Title, KeyWords & Description по умолчанию -->
<!--#set var="PID"		value="00"-->
<!--#set var="TITLE"	value=""-->
<!--#set var="KW"		value=""-->
<!--#set var="DESC"	value=""-->

<!--#if expr="$d=_"-->
 <!--#set var="PID"	value="00"-->
 <!--#set var="NAME"	value=""-->
 <!--#set var="TITLE"	value=""-->
 <!--#set var="KW"		value=""-->
 <!--#set var="DESC"	value=""-->
<!--#endif -->

надеюсь с первым блоком всё понятно, прошу лишь обратить внимание на знак "$" перед системными переменными

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

Будте внимательны, если выкладываете сайт на временную площадку, возможны варианты

В третьем блоке PID нам может понадобится для раскраски и дективации текущего пункта меню, для дополнительных меню не на всех страницах и т.п.

я предлагаю давать номера 10, 20, ... 90 главным страницам раздела, и 11, 12 ... 19 подстраниц

остальные переменные это тэг <TITLE>, атрибуты "description" и "keywords" тэга <META>

а вот последний блок необходимо размножить в количестве равном количеству страниц, на место "_" после "$d=" необходимо будет указывать имя файла, и в переменных прописывать нужную информацию.

используя этот способ файл _header.html станет уже таким

Sample hide 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Использование материалов сайта допускается только с разрешения администратора. 
Все логотипы и торговые марки принадлежат их владельцам. -->
<html>
<head>
<!--#include virtual="_ssi.html" -->
<title>SSI site</title>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = windows-1251'>
<META NAME="keywords"	CONTENT="<!--#echo var="KW" -->">
<META NAME="description"	CONTENT="<!--#echo var="DESC" -->">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
<link type="text/css"	href="<!--#echo var="root" -->style.css" rel="stylesheet">
<SCRIPT type="text/javascript"	src="<!--#echo var="root" -->script.js" language="JavaScript"></SCRIPT>
</head>
<body>
<div id="divMenu"> ... </div>
<div id="divSubMenu"> ... </div>

Основное меню

Теперь создаём меню

Sample hide 
 <div ID="MainMenu">
  <A <!--#if expr="$PID>19 && $PID<30" --><!--#else --> href="chapter1.html" <!--#endif --> title="chapter1">chapter1</A>
  <A <!--#if expr="$PID>29 && $PID<40" --><!--#else --> href="chapter2.html" <!--#endif --> title="chapter2">chapter2</A>
  <A <!--#if expr="$PID>39 && $PID<50" --><!--#else --> href="chapter3.html" <!--#endif --> title="chapter3">chapter3</A>
 </div>

Использование не только на странице раздела, но и в подразделах превращаем ссылку в просто якорь

Подменю

Теперь подменю

Sample hide 
<div ID="subMenu">
<!--#if expr="$PID>49" -->
<!--#elif expr="$PID>39" -->
<!--#elif expr="$PID>29" -->
  <A <!--#if expr="$PID=31" --><!--#else --> href="chapter31.html" <!--#endif --> title="chapter31">chapter31</A>
  <A <!--#if expr="$PID=32" --><!--#else --> href="chapter32.html" <!--#endif --> title="chapter32">chapter32</A>
  <A <!--#if expr="$PID=33" --><!--#else --> href="chapter33.html" <!--#endif --> title="chapter33">chapter33</A>
<!--#elif expr="$PID>19" -->                         
  <A <!--#if expr="$PID=21" --><!--#else --> href="chapter21.html" <!--#endif --> title="chapter21">chapter21</A>
  <A <!--#if expr="$PID=22" --><!--#else --> href="chapter22.html" <!--#endif --> title="chapter22">chapter22</A>
  <A <!--#if expr="$PID=23" --><!--#else --> href="chapter23.html" <!--#endif --> title="chapter23">chapter23</A>
<!--#elif expr="$PID>9" -->
<!--#endif -->
</div>

в разделе "chapter3" у нас нет подразделов, но место под подменю мы оставим для сохранения общей композиции.

обратите внимание на нисходящий порядок проверки.

Меню готово, осталось лишь разукрасить его с помощью CSS.

Дополнительно

Error Pages

Для начала добавим такие строки в ".htaccess".

Sample hide 
ErrorDocument 401 /errors.shtml?401
ErrorDocument 403 /errors.shtml?403
ErrorDocument 404 /errors.shtml?404
ErrorDocument 500 /errors.shtml?500

Если Вы когда либо видели примеры подобных обработчиков ошибок, то обратите внимание, что здесь для показа страницы с сообщением об ошибке использован 1 файл, а не 1,2,3... и т.д. Мне показалось маразмом делать несколько практически одинаковых файлов, а Вам?

Вот, собственно, сам файл error.shtml

Sample hide 
<html><head>
<!--#set var="d" value="$DOCUMENT_NAME"-->
<!--#set var="l" value="$DOCUMENT_URI"-->
<!--#set var="r" value="$DOCUMENT_ROOT"-->
<!--#set var="s" value="$SERVER_NAME"-->
<!--#set var="h" value="$HTTP_REFERER"-->
<!--#set var="q" value="$QUERY_STRING"-->
<!--#set var="m" value="your@site.ru"-->

<LINK rel=stylesheet href="style.css" type="text/css"> 
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta HTTP-EQUIV="REFRESH" CONTENT="6; URL=http://<!--#echo var="s"-->" target="_top">
<title><!--#echo var="l"--> :: <!--#echo var="q"--> :: <!--#echo var="h"--> - <!--#echo var="s"--></title></head>
<body>

<P>Произошла ошибка <B>
<!--#if expr="$q=401" -->401 - Authorization Required (требуется авторизация).                    <!--#endif -->
<!--#if expr="$q=403" -->403 - Forbided (запрет на доступ, пользователь не прошел аутентификацию).<!--#endif -->
<!--#if expr="$q=404" -->404 - Not found (запрашиваемый документ не найден).                      <!--#endif -->
<!--#if expr="$q=500" -->500 - Internal Server Error (ошибка в скрипте).                          <!--#endif -->
</B></P>
<P>Адреса <B>http://<!--#echo var="s"--><!--#echo var="l"--></B> - не существует :(</P>
<P>Либо эта страница была удалена (например, как устаревшая), либо перемещена.</P>
<P>Автор постарается изменить ссылку здесь  <B><!--#echo var="h"--></B> не правильную.</P>

<P>пожалуйста напишите по адресу <B><a href="mailto:<!--#echo var="m"-->"><!--#echo var="m"--></A></B> 
и вставьте туда всё, что здесь написано!</P>
<P>Вы можете <B><a href = "http://<!--#echo var="s"-->" target="_top">перейти на главную страницу</a></B>, 
если у Вас не работает автоперемещение.</P>
<!--#include virtual="_counters.html" -->
</body></html>

По сути это абсолютно обычный HTML файл. Обратим внимание лишь на

Из видимых мне недостатков, я хочу отметить, в порядке значимости

  1. В заголовок может попросту не влезть, всё что мы хотим в него запихнуть. Особенно вероятна и досадна потеря Реферера
  2. Размер файла, но во первых его можно серьёзно сократить, а во вторых... в общем ерунда это :)

Счётчики

Помимо этого заключите блок со счётчиками в такую конструкцию:

<!--#if expr="$s!=localhost"-->
<!--#endif -->

это позволит не грузить их в локальной версии, что сэкономит время и трафик при отладке сайта.

Обсудить в Живом Журнале