Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

SSI Server-Side Includes - включение кода на стороне сервера

Использование SSI в построении сайта или что такое .shtml, и чем этот формат лучше .html

Структура странички выглядит приблизительно вот так:
Родитель 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 со своими параметрами "цвета".

Если в строке после названия файла будет часть слова с символами "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></head ></html>.

Пример
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Некоторые сразу возмутятся, что мой 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">
<!--#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, sans-serif; font-size: 14px;}
td {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px;}
a {text-decoration: none; color: black;}
a:hover {text-decoration: none; color: #800040;}
input {font-family: Tahoma, sans-serif; color: black; font-size: 13px;}
</style>
<!--#endif -->

В зависимости от того, что находится в переменной ("environment variables") $HTTP_USER_AGENT, и какой тип браузера у Вас, выводится от сервера к Вам только та часть, которая соответствует браузеру. Ну и если браузер не опредияется, то выводится определенный набор стиля, что после строки <!--#else -->.

Это все, конечно, размером в байты, но нужно учесть, что это все находится в отдельном файле styles.shtml, который легко редактировать, и работает для всех страниц сайта.

JavaScript

Как и в предыдущих вариантах, создается файл js.shtml без html, head, body.

Внутри может быть:
простая ссылка - <script type="text/javascript" src="/win_open.js"></script> или выбор в зависимости от страницы.

<!--#if expr="$DOCUMENT_NAME!=/forum/" -->
<script type="text/javascript" src="../js/win_open.js"></script>
<!--#endif -->

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

Верх сайта

Как и в предыдущих вариантах создается файл top.shtml без html, head, body.

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

<div style='font-size: 22px; text-align: center; color: #<!--#echo var="COLORtitrA" -->'>
<!--#echo var="NamePage" -->
</div>

То есть на место 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 type="text/javascript" src="http://www.baners.com/ban.cgi"> </script>
<!--#else -->
<!--#include virtual="/cgi-bin/ranban.cgi" -->
<!--#endif -->

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

Основная часть сайта

<div class="left">
<!--#include virtual="path/left.shtml" -->
</div>
<div class="start">
<!--#include virtual="path/start.shtml" -->
</div>
<div class="right">
<!--#include virtual="path/right.shtml" -->
</div>

left.shtml

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

<ul>
<li style='background-color:<!--#echo var="COLORfonA" -->'>
<a style='color:<!--#echo var="COLORtitrB" -->' href='<!--#echo var="WWW" -->/news.shtml'>news</a></li>
</ul>

А в конце не помешает 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 -->

В первом "include", если Вы заметили, мы передаем наши переменные среды 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.

Как закодировать и записать в COOKIE такой пароль, это разговор не для этой темы.

Низ сайта

Как и в предыдущих вариантах, создается файл botom.shtml без html, head, body.

Внутри могут быть теги копирайта, баннеров, элементы своей статистики типа:

<!--#include virtual="stat.cgi?file=$DOCUMENT_NAME&
	name=$NamePage&$QUERY_STRING"-->

Не забывайте в дочерних файлах дописывать SSI-команду:

<!--#config errmsg="[ERROR $NamePage]"-->

А то надпись "[an error occurred while processing this directive]" очень уж некрасива.

Читать дальше: Таблица цветов RGB


.