Використання SSI в побудові сайту

Олександр Ковальський

У цій статті я приблизно розповім про те як практично використовувати технологію 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, а закачавши Ви зрозуміли що не всі дописали або що не так, і що все спочатку.
    А тут одну сторінку поміняли і для все однаково.
    Тепер інші обуряться, що не буває
    так що у всіх сторінках однакові Метатег повинні бути.
    Та я погоджуся, що деякі сторінки повинні мати інші метатегі. Як це вирішити – наприклад:
    Вміст форуму не треба кешувати:

    <!–#ifexpr=”$DOCUMENT_NAME=/forum/” –>
    <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]" дуже вже не красива
    Я бажаю що б у Вас ніколи не з'являлося таких написів!
    Ось і все.

    Схожі статті:


    Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

    Коментарів поки що немає.

    Ваш отзыв

    Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    *

    *