Использование SSI в построении сайта

Автор: content Пятница, Апрель 11th, 2008 Нет комментариев

Рубрика: Интернет

В этой статье я приблизительно расскажу о том как практически использовать технологию SSI.

Естественно это не 100% вариант, вариации возможны, одна из главных задач — понять «а зачем это нужно». Нужно учесть:
Прежде всего поддерживает ли Ваш сервер технологию SSI
Что дочерними файлами являются SHTML странички, которые в свою очередь тоже обрабатываются на наличие SSI.
Что «переменных окружения» («environment variables») типа: DOCUMENT_NAME в дочерних документах показывает родительские параметры
Что переменные передаются дочерним и следующим по выполнению документам кроме — указания ошибок <!—#config errmsg=»[error]» —>
Что пути к скриптам в дочерних документах идут относительно дочерних документов
Что пути к графике при выводе идут относительно родительского документа

Структура странички выглядит приблизительно вот так:
Родитель news.shtml

<html>
<head>Переменные SSI
Имя страницы <title>Название странички</title>
Мэтатеги <!—#include virtual=»путь_к_скрипту/mt.shtml» —>
Стили <!—#include virtual=»путь_к_скрипту/styles.shtml» —>
JavaScript <!—#include virtual=»путь_к_скрипту/js.shtml» —>
</head><body>
Верх сайта <!—#include virtual=»путь_к_скрипту/top.shtml» —>
Табличка — структура сайта, для примера разбита на 3 частей.
SSI path/left.shtml SSI path/start.shtml SSI path/right.shtml
Низ сайта <!—#include virtual=»путь_к_скрипту/botom.shtml» —>
</body></html>

Нужно учесть:
Что и верх и низ сайта (include virtual) не находятся в общей таблице.
Так быстрее будет отображаться информация на экране.

  • Переменные SSI
    В этой части создаются переменные которые используются по всему сайту;одни для удобства,
    другие для удобного и быстрого изменения дизайна,
    третие для возможности демонстрации навигации и ведения статистики

      .

    Грамматика: #set var=*** value=***
    Присваивает новое значение переменной. Например:
    <!—#set var=»SERVER_ADMIN» value=»новый@адрес.ua»—>

    Переменные:
    Название странички — <!—#set var=»NamePage» value=»НОВОСТИ» —>
    SSI-команда — <!—#config errmsg=»[ERROR $NamePage]» —> Выводится при какой то ошибке SSI
    URL странички — <!—#set var=»WWW» value=»http://$HTTP_HOST/km/» —> Обычно это полезно для длинных путей
    Цвет бекграунда — <!—#set var=»COLORBCG» value=»FAF6EF»—> Значок # желательно не ставить
    Цвет заливки 1 — <!—#set var=»COLORfonA» value=»FBF7EE»—>
    Цвет заливки 2 — <!—#set var=»COLORfonB» value=»D8F3D8″—>
    Цвет заливки 3 — <!—#set var=»COLORfonС» value=»008000″—>
    Цвет титров 1 — <!—#set var=»COLORtitrA» value=»800000″—>
    Цвет титров 2 — <!—#set var=»COLORtitrB» value=»008000″—>
    Цвет титров 3 — <!—#set var=»COLORtitrС» value=»404040″—>
    Заменив один из параметров «цвета» у вас поменяется его значение во всех дочерних документах
    Для большей наглядности мы перенесем наши переменные на несколько страниц, чтобы у каждой страницы был свой стиль.
    На родителе мы оставляем: SSI-команду ошибки и URL странички, но это после такого скрипта
    <!—#if expr=»$QUERY_STRING=/ssi/» —>
    <!—#include virtual=»path/varssi.shtml» —>
    <!—#elifexpr=»$QUERY_STRING=/new/» —>
    <!—#include virtual=»path/varnew.shtml» —>
    <!—#else —>
    <!—#include virtual=»path/var.shtml» —>
    <!—#endif —>

    <!—#config errmsg=»[ERROR $NamePage]» —>
    <!—#set var=»WWW» value=»http://$HTTP_HOST/» —>

    В каждом из файлов: varssi.shtml, varnew.shtml и var.shtml вписаны переменные «цвета» с различными параметрами
    Как это работает: Если в строке после названия файла будет часть слова с символами «ssi» то считыватся будет страничка varssi.shtml с своими параметрами «цвета»
    Соответственно при символах «new» страничка — varnew.shtml. Если ничего подобного не находится — то страничка var.shtml.
    Те переменные которые должны быть разными для разных страничек — лучше вписывать в файлы var***.shtml, а те которые раз и на всегда в var.shtml

  • Имя страницы
    Проще написать <title>Название странички</title>
    Но можно и так <title><!—#echo var=»NamePage»—></title>
    Переменная NamePage будет использоваться еще много раз, поэтому поменяв переменную в установках «set var=» она меняется автоматически везде.

  • Мэтатеги
    Создав один раз страничку mt.shtml со всеми метатэгами Вы избавляетесь от их написания для каждой странички, а также их редактирования в каждой страничке в отдельности.
    Нужно учесть что в страничку вы пишете только метатэги без <html><head></body></html> например :
    <meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
    Некоторые сразу возмутятся что мой FrontPage перегенерирует (создаст заново) все странички с моими изменениями. Да но после этого вам нежно закачать все странички на сервер, а если их 200, а закачав Вы поняли что не все дописали или что не так, и что все сначала. А здесь одну страничку поменяли и для все одинаково.
    Теперь другие возмутятся, что не бывает так что у всех страничках одинаковые метатэги должны быть. Да я соглашусь, что некоторые странички должны иметь другие мэтатеги. Как это решить — например:
    Содержимое форума не надо кэшировать :

    <META HTTP-EQUIV=»Pragma» CONTENT=»no-cache»>
    <!—#else —>
    <META HTTP-EQUIV=»Cache-Control» CONTENT=»Public»>
    <!—#endif —>

    Как это работает: Если в имени файла будет строка «forum», то впишется строка с параметром «no-cache», для всех остальных строка с параметром «Public».

  • Стили
    Как и в предыдущем варианте создается файл styles.shtml без html, head, body.
    Внутри может быть:
    Простая ссылка — <link rel=»stylesheet» type=»text/css» href=»kms.css»>
    Или выбор в зависимости от браузера

    <!—#ifexpr=»$HTTP_USER_AGENT=/MSIE/ || $HTTP_USER_AGENT=/Microsoft/» —>
    <link rel=»stylesheet» type=»text/css» href=»kmsi.css»>
    <!—#elifexpr=»$HTTP_USER_AGENT=/Opera/» —>
    <link rel=»stylesheet» type=»text/css» href=»kmso.css»> <BR><!—#elifexpr=»$HTTP_USER_AGENT=/Mozilla/» —>
    <link rel=»stylesheet» type=»text/css» href=»kmsn.css»>
    <!—#else —>
    <STYLE type=text/css>
    P { FONT-FAMILY: tahoma, verdana, arial, helvetica; FONT-SIZE: 12px}
    TD {FONT-FAMILY: verdana, arial, helvetica; FONT-SIZE: 12px}
    A {TEXT-DECORATION: none;color: «black»}
    A:hover {TEXT-DECORATION: none; COLOR: #800040;}
    INPUT {font-family: Tahoma; color:black; font-size=13px;}
    </STYLE>
    <!—#endif —>

    Как это работает: В зависимости от того что находится в переменной («environment variables») $HTTP_USER_AGENT какой тип браузера у Вас и выводится от сервера к Вам только та часть, которая соответствует браузеру. Ну и если браузер не опредияется то выводится опредиленный набор стиля что после строки <!—#else —>.
    Это все конечно размером в байты, но нужно учесть что это все находится в отдельном файле styles.shtml который легко редактировать и работает для всех страниц сайта.

  • JavaScript
    Как и в предыдущих вариантах создается файл js.shtml без html, head, body.
    Внутри может быть:
    Простая ссылка — <SCRIPT language=JavaScript src=»/win_open.js»></SCRIPT>
    Или выбор в зависимости от страницы
    <!—#if expr=»$DOCUMENT_NAME!=/forum/» —>
    <SCRIPT language=JavaScript src=»../js/win_open.js»></SCRIPT>
    <!—#endif —>

    То есть скрипт будет присутствовать на всех страницах кроме тех в которых в имени будет присутствовать слово forum

  • Верх сайта
    Как и в предыдущих вариантах создается файл top.shtml без html, head, body.
    Внутри может быть целый комплекс дизайнерского решения, поэтому мы ограничимся большим названием и выводом банера :

    <FONT color=»#<!—#echo var=»COLORtitrA» —>» style=»font-size: 22px;text-align: center;»><!—#echo var=»NamePage» —></FONT>

    То есть на место color (цвет фонта) будет вписана переменная COLORtitrA которую мы определили еще в родительском файле news.shtml и var.shtml там же и переменная NamePage с названием страницы.
    Вернемся обратно к файлу top.shtml, и сделаем вывод банера
    <!—#include virtual=»path/baners.shtml» —>
    Вот оно чудо, как часто Вы меняете банерщиков например по обмену, плохой CTR — меняйте. Естественно в одном файле — baners.shtml
    хотите свою банерную систему — пожалуйста:
    <!—#include virtual=»../cgi-bin/ranban.cgi» —>
    Можно что ни буть и по сложнее
    <!—#config timefmt=»%H»—>
    <!—#if expr=»DATE_LOCAL>9″ —>

    <script language=»JavaScript» src=»http://www.baners.com/ban.cgi»> </script>
    <!—#else —>
    <!—#include virtual=»/cgi-bin/ranban.cgi» —>
    <!—#endif —>

    То есть понятно после 9 часов дня показываем банера с сайта по JavaScript, а с 0 часов свой внутрений скрипт «рандомайзе показ»

  • HTML Таблицы
    <table width=»90%» border=»1″ cellspacing=»0″ cellpadding=»0″ align=»center»>
    <TR><TD>
    <!—#include virtual=»path/left.shtml» —>
    </TD>
    <TD>
    <!—#include virtual=»path/start.shtml» —>
    </TD>
    <TD>
    <!—#include virtual=»path/right.shtml» —>
    </TD></TR>
    </table>

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

        Цвет бекграунда -

    COLORBCG

        Цвет заливки 1 -

    COLORfonA

        Цвет заливки 1 -

    COLORfonB

        Цвет титров 1 -

    COLORtitrA

        Цвет титров 2 -

    COLORtitrB<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»120″ align=»center»>
    <tr><td color=»<!—#echo var=»COLORfonA» —>»>
    <a href=»<!—#echo var=»WWW» —>/news.shtml»>
    <FONT color=»<!—#echo var=»COLORtitrB» —>»>news </FONT></a></td></tr>
    </table>

    А в конце не помешает SSI линк на страничку left_baner.shtml, в которой Ваш набор счетчиков.
    <!—#include virtual=»left_baner.shtml» —>
    start.shtml
    Здесь может быть большой набор скриптов но мы ограничимся новостийными выводами с вариациями.
    По умолчанию стартует скрипт новостийных заглавий, а при нажатии на заглавие вы попадаете на вывод новостийного блока или конкретной старой новости

    <!—#ifexpr=»$QUERY_STRING=/new/» —>
    <!—#include virtual= «path/news.cgi?$QUERY_STRING&COLORfonA=$COLORfonA&COLORtitrA=$COLORtitrA» —>
    <!—#elifexpr=»$QUERY_STRING=/old/» —>
    <!—#include virtual=»path/old_news.cgi?$QUERY_STRING» —>
    <!—#else —>
    <!—#include virtual=»path/zaglavie_news.cgi?$QUERY_STRING» —>
    <!—#endif —>

    В первом «инклюде» если Вы заметили мы передаем наши переменные среды SSI в среду CGI, то есть наши цветовые переменные передаются в CGI скрипт.
    Вот здесь как раз важно чтобы в переменной не было знака # а то ничего не получится

    right.shtml
    Здесь тоже может быть большой набор скриптов, меню, линков в зависимости от различных «переменных окружения» («environment variables»).
    Например HTTP_COOKIE

    <!—#ifexpr=»$HTTP_COOKIE=/Administrator/» —>
    <!—#include virtual= «path/admin.cgi?$QUERY_STRING&COLORfonA=$COLORfonA&COLORtitrA=$COLORtitrA» —>
    <!—#endif —>

    То есть в данном случае только лично у Вас будет выводится скрипт admin.cgi с широкими возможностями по администрированию странички.
    И только по тому что у Вас в COOKIE прописано святое слово Administrator
    Хотя Вы понимаете что для таких случаев лучше, что-то типа такого kmWmtfSWNlFnLM
    Как закодировать и записать в ПЕЧЕНЬЕ такой пароль, это разговор не для этой темы

  • Низ сайта
    Как и в предыдущих вариантах создается файл botom.shtml без html, head, body.
    Внутри может быть тэги копирайтов , банеров, элементы своей статистики типа:
    <!—#includevirtual=»stat.cgi?file=$DOCUMENT_NAME&name=$NamePage&$QUERY_STRING»—>

    Хороший совет:
    Не забывайте в дочерних файлах дописывать SSI-команду -
    <!—#config errmsg=»[ERROR $NamePage]«—>
    А то надпись «[an error occurred while processing this directive]» очень уж не красива
    Я желаю что бы у Вас никогда не появлялось таких надписей!
    Вот и все.

Автор: Александр Ковальский

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты