Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Необходимый минимум SSI

Alexey Godovnik

Наряду с неоспоримыми достоинствами бесплатного хостинга, есть и существенные недостатки. Больше всего меня раздражает отсутствие SSI. Если и вас тоже, сообщаю: Выход есть! И довольно простой, как в поговорке про все гениальное.

Для тех, кто не в курсе, поясняю. Вам наверняка хоть раз в жизни приходилось собирать мозаику. Ну, или хотя бы соединять вместе несколько частей в одно целое. В этом и заключается идея SSI - собирать свой сайт из HTML-фрагментов. Для чего это нужно? Как правило, на каждом сайте некоторые детали присутствуют на всех страничках сайта. У меня, например, таким является оглавление слева. И web-мастеры при создании новых документов просто переписывают их туда. А если вдруг захочется изменить внешний вид, приходится вносить изменения во все файлы. А если сайт содержит много информации, то реконструкция сайта превращается в тягомотину. Можно, конечно, использовать фреймы (про них рассказано в "HTML за полчаса", но у них есть свои недостатки.

Предлагаемый мною способ, конечно, далек от совершенства, но он лучше, чем ничего, да и не так уж плох (на мой субъективный взгляд).

Итак, все дело в следующем: как вы знаете (а если не знаете, то я с удовольствием вас информирую), в HTML документ можно встраивать скрипты, написанные на различных языках. Один из них - JavaScript - довольно прост (о нем рассказано в статье Основы JavaScript) и имеет то преимущество, что его понимают все браузеры, а для выполнения используются ресурсы компютеров ваших посетителей.

Так вот, скрипт на JavaScript не обязательно встраивать в HTML документ, что бы там ни было написано в инструкции по его использованию. Он может располагаться в отдельном файле, следовательно, на него можно ставить ссылку/сноску из любого другого документа, следовательно, его можно написать только один раз и использовать в неограниченном количестве документов.

Наши файлы-кусочки будут иметь содержание

document.write('ваш HTML-код');

или

document.write("ваш HTML-код");

количество таких записей неограничено, внутри кавычек/апострофов вы пишете строчку с вашим HTML. Естественно, что если вам надо использовать кавычки, вы берете первый вариант, а если апострофы, то второй. Файл с кусочком встраиваемого HTML сохраняете в виде name.js, где вместо name используете любую комбинацию цифр и латинских букв.

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

<script language="JavaScript" src=source></script>

,где 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 и т.д.

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

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
Аноним
+1 / -0
Мне нравитсяМне не нравится
15 декабря 2005, 18:01:45
Текст хороший. Просто и ясно. Только один момент. Про <!--#include virtual="$file" --> понятно, а вот (я новичок, уж извините) про то, как вложить файл по другому - непонятно. Объясняю. 1. Как сделать так, чтобы файл вставлялся не просто на страницу, а только по событию. Например, нажимаешь на рисунок или на текст и куда надо (не вместо того, на что нажимаешь, а именно куда надо) вставляется файл. 2. Файл не просто вставляется, а еще и убирается первый, а вместо него вставляется второй. Это можно сделать только при помощи слоев или как?
2.
Аноним
Мне нравитсяМне не нравится
2 июня 2005, 17:44:42
Все работает!Спасибо за доступно изложенный материал!
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог