Необходимый минимум SSI
|
Наряду с неоспоримыми достоинствами бесплатного хостинга, есть и существенные недостатки. Больше всего меня раздражает отсутствие SSI. |
Для тех, кто не в курсе, поясняю. Вам наверняка хоть раз в жизни приходилось собирать мозаику. Ну, или хотя бы соединять вместе несколько частей в одно целое. В этом и заключается идея SSI - собирать свой сайт из HTML-фрагментов. Для чего это нужно? Как правило, на каждом сайте некоторые детали присутствуют на всех страничках сайта. У меня, например, таким является оглавление слева. И web-мастеры при создании новых документов просто переписывают их туда. А если вдруг захочется изменить внешний вид, приходится вносить изменения во все файлы. А если сайт содержит много информации, то реконструкция сайта превращается в тягомотину. Можно, конечно, использовать фреймы (про них рассказано в "HTML за полчаса", но у них есть свои недостатки.
Предлагаемый мною способ, конечно, далек от совершенства, но он лучше, чем ничего, да и не так уж плох (на мой субъективный взгляд).
Итак, все дело в следующем: как вы знаете (а если не знаете, то я с удовольствием вас информирую), в HTML документ можно встраивать скрипты, написанные на различных языках. Один из них - JavaScript - довольно прост (о нем рассказано в статье Основы JavaScript) и имеет то преимущество, что его понимают все браузеры, а для выполнения используются ресурсы компютеров ваших посетителей.
Так вот, скрипт на JavaScript не обязательно встраивать в HTML документ, что бы там ни было написано в инструкции по его использованию. Он может располагаться в отдельном файле, следовательно, на него можно ставить ссылку/сноску из любого другого документа, следовательно, его можно написать только один раз и использовать в неограниченном количестве документов.
Наши файлы-кусочки будут иметь содержание
document.write('ваш HTML-код');
или
document.write("ваш HTML-код");
количество таких записей неограничено, внутри кавычек/апострофов вы пишете строчку с вашим HTML. Естественно, что если вам надо использовать кавычки, вы берете первый вариант, а если апострофы, то второй. Файл с кусочком встраиваемого HTML сохраняете в виде name.js, где вместо name используете любую комбинацию цифр и латинских букв.
Когда вы написали все фрагменты, начинаем их склеивать. В том месте, где должен быть нужный элемент, пишем
,где source - адрес этого фрагмента.
Таким образом, ваша страничка (в идеальном варианте) будет иметь следующий вид
<html><head>
<title>Название страницы</title>
<meta name="description" content="описание странички">
<mete name="keywords" content="ключевые слова через пробел">
<script language="JavaScript" src="body.js"></script>
<script language="JavaScript" src="content1.js"></script>
...
<script language="JavaScript" src="contentX.js"></script>
</body></html>
По-моему, вполне элегантно.
Только старайтесь, чтобы ваши кусочки были осмысленными, самостоятельными и логически законченными. Потому что если написать какой-нибудь открывающий тег в одном, а закрывающий в другом фрагменте, скорее всего не сработает.
Не бойтесь того, что общий размер странички увеличивается из-за многократного повторения document.write. Так как страничка состоит из нескольких кусочков, ее загрузка будет происходить даже немного быстрее.
Если захотите что-либо уточнить, пишите. НО!!! Я не буду отвечать на вопросы типа "я все сделал так как написано, но ничего не работает". Значит, не совсем так. Шевелите извилинами и ищите ошибки. Самая распространная - многие забывают, что в адресах и в JavaScript большие и маленькие буквы РаЗлИчАюТсЯ.
Передача и обработка данных средствами SSI
Передача данных (1-й способ)
Данные передаются точно так же, как и для обычных html файлов - через URL либо с помощью формы методом GET. В принципе, и обрабатывать их можно точно так же. Но, если вы хотите изменять SSI-вставку в зависимости от переданных данных, читайте дальше.
Особенности
Для SSI данные лучше передавать в виде name=value. Метод GET формы так и делает, а вот если вы самостоятельно формируете строку запроса, она должна выглядеть так:
file.shtml?var1=value1&var2=value2 и т.д.
Получение данных
Нам мало передать данные. Нам надо еще и получить их. Для того, чтобы увидеть,
что мы там себе передали, включите в файл строку
<!--#printenv -->
Эта строка нам в дальнейшем не понадобится. Она нужна лишь для того, чтобы увидеть, передается ли хоть что-нибудь. В дальнейшем, если что-то не так пойдет, вставьте эту строку в файл и проверьте, может вы где-то не так буковку написали.
Самый простой способ использования
Допустим, у вас на сайте есть FAQ, но ответы на вопросы такие объемные, что хотелось бы выводить их по одному и при этом, если потом приспичит поменять дизайн, чтобы долго не возиться. Мы делаем одну страничку (назовем ее faq.shtml), оформляем ее как положено, а в том месте, где должен быть ответ, пишем
<!--#include virtual="${file}" -->
Учтите, что может быть, для вашего сервера надо использовать не фигурные, a круглые скобки или даже вообще без них обойтись.
Теперь ответы на вопросы пишем каждый в своем html-файле, в котором нет ничего, кроме текста да тегов, с ним связанных (B, FONT и т.д), и желательно не использовать атрибуты COLOR, чтобы потом не мучаться.
Ссылки на ответы надо делать следующим образом
<a href="faq.shtml?file=url">
где url - адрес html-файла, содержащего ответ, можно относительный - только смотрите не запутайтесь.
В принципе, весь сайт можно организовать по такому принципу. Если вы любите менять дизайн, то чтобы это сделать, достаточно будет изменить всего один файл - и вот у вас новый сайт.
Обработка данных
Все это хорошо. Но хочется еще чего-нибудь похитрее. Если вы уже знакомы с SSI,
дальше нового вы не узнаете, если нет - читайте.
В файлах SSI можно использовать переменные. Они объявляются так
<!--#set var="name" value="value" -->
Передача данных
file.shtml?username=Alexey&birth=1974
эквивалентно
<!--#set var="username" value="Alexey" -->
<!--#set var="birth" value="1974" -->
Возможности по использованию этих бесценных сведений в SSI довольно ограничены, но мы можем попытаться с ними что-нибудь сделать.
Можно просто вставить переменную в документ.
<!--#echo var="name" -->
Например, используя переданные ранее данные, можно написать
Привет, <!--#echo var="username" -->
В результате чего на экране появится Привет, Alexey
Пример посложнее. Если в файле написать
<!--#set var="title" value="заголовок" -->
то потом в вызывающем файле можно использовать
<title><!--#echo var="title" --></title>
Таким образом, мы можем передавать из включаемых файлов в вызываемые различные конфиденциальные сведения. Пользователь не видит инструкции SSI - они обрабатываются сервером и передаются уже в итоговом, "готовом к употреблению" виде.
Можно поизвращаться и попробовать проанализировать переданные данные и на их основе что-нибудь сделать.
Условные операторы выглядят так
<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->
Элемент endif является обязательным. elif можно повторять сколько угодно раз. После if и elif пишется HTML-код, который будет подставляться при истинности условия. После else пишется код, который подставится, если ни одно из имеющихся ранее условий не выполнилось.
Например
<!--#if expr=($username="Alexey") -->
<h1>Привет, <!--#echo var="username" --></h1>
<!--#else -->
<h2>Привет, <!--#echo var="username" --></h2>
<!--#endif -->
Такой нехитрый код выводит приветствие, но если человека зовут Alexey, буквы будут чуть-чуть побольше.
Передача данных (2-й способ)
Можно передавать данные и средствами SSI. Плюс у этого метода в том, что он,
в отличие от первого способа, проходит незамеченным для пользователя. Чтобы
передать данные, надо их присвоить какой- нибудь переменной. Все переменные,
объявленные в файле, доступны и в вызываемых, и в вызывающих файлах. Но!!! Само
cобой разумеется, что надо сначала подключить файл, а потом использовать имеющиеся
в нем данные, а в подключаемых файлах использовать можно только то, что имеется
к моменту подключения.
Второй способ организации сайта
Он немножко сложнее, но (имхо) прогрессивнее.
Все свои статьи пишем в формате html, но избегаем применения тегов, меняющих цвет, и не указываем body. Сохраняем (допустим в файле text.html), и запоминаем адрес этого сайта. Никому его не говорим - он будет для сугубо внутреннего использования.
Теперь создаем "публичный" файл для этой статьи, его мы будем заносить в каталоги и рекомендовать знакомым. Он состоит всего из нескольких строчек.
<html>
<!--#set var="description" value="описание" -->
<!--#set var="title" value="Заголовок" -->
<!--#set var="keywords" value="ключевые слова" -->
<!--#set var="file" value="url статьи" -->
<!--#include virtual="файл интерфейса.shtml" -->
Как видите, мы указали в нем заголовок, ключевые слова, описание и "приватный" файл, в котором содержится статья (text.html). Можно еще написать то, что вы там еще обычно пишете в заголовке. Я чаще всего ограничиваюсь одним title. Как-то спокойно отношусь к тому, что релевантность маленькая окажется :-).
Теперь создаем файл интерфейса (*,shtml). Начало его выглядит так:
<html><head>
<title><!--#echo var="$title" --></title>
<meta name="description" content="<!--#echo var="$description"
-->">
<meta name="keywords" content="<!--#echo var="$keywords"
-->">
</head>
Далее оформляем внешний вид - вешаем баннеры, вставляем счетчики, добавляем новости и т.д. Наконец в том уголке, где должна быть статья, пишем
<!--#include virtual="$file" -->
Теперь для радикального изменения дизайна всего сайта достаточно изменить лишь наш файл интерфейса.
Нюансы
В зависимости от ситуации а так же различного программного обеспечения может
быть разным синтаксис написания имен переменных. Если вы все сделали как тут
написано и ничего не вышло, попробуйте следующее:
Вставьте строку <!--#printenv --> и посмотрите, есть ли вообще у вас хоть какие-то переменные. Если есть, но использовать их не получается, попробуйте другой способ написания:
"name"
"$name"
$name
"${name}"
"$(name)"
Один из них сработает.
Если у вас не работает даже printenv, Возможно, вам сначала нужно сделать из своего компьютера сервер. Самый простой способ - установить программу Small Http Server. Проста в установке и использовании, инструкция на русском языке. После установки сможете тестировать на своем компе CGI, SSI, PHP и т.д.
« Назад