Глаза страшат, а руки делают

ШАГ 2


  • Корректная вставка меню с использованием условного оператора
  • Использование переменных окружения для определения условия

КОРРЕКТНАЯ ВСТАВКА МЕНЮ С ИСПОЛЬЗОВАНИЕМ УСЛОВНОГО ОПЕРАТОРА

В нашем «пупкинском» сайте есть меню, которое должно отображаться на каждой странице. Хотелось бы, чтобы страницы не ссылались сами на себя, а их собственный пункт меню как-нибудь отличался, например, цветом шрифта.

Для вставки разных вариантов кода существует условный оператор, точнее — даже три оператора, связанных между собой. Вот их полный синтаксис:

<!--#if expr = "условие_1" -->
код HTML
<!--#elif expr = "условие_2" -->
код HTML
<!--#else -->
код HTML
<!--#endif -->

Второй оператор, задающий дополнительное условие, и третий — для варианта без условия — не обязательны. Закрывающий оператор <!--#endif --> обязателен. Если нужно показать вставку только при каком-то условии, например, только если браузер — IE, то достаточно следующего:

<!--#if expr="$HTTP_USER_AGENT = /MSIE/ || $HTTP_USER_AGENT=/Microsoft/" -->
код HTML
<!--#endif -->

Что там наворочено в условии, будем обсуждать через несколько шагов. Сейчас вернёмся к принципу действия оператора. Дополнительных условий может быть несколько:

<!--#if expr = "условие_1" -->
код HTML
<!--#elif expr = "условие_2" -->
код HTML
<!--#elif expr = "условие_3" -->
код HTML
<!--#elif expr = "условие_4" -->
код HTML
<!--#endif -->

Теперь приступим к созданию меню. Ещё раз приведу его код:

<table width="600" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#800000"><tr>
<td>
<div class="txtmenu"><a href="index.html" class="lnkmenu">Главная</a></div></td>
<td>
<div class="txtmenu"><a href="aboutsite.html" class="lnkmenu">О сайте</a></div></td>
<td>
<div class="txtmenu"><a href="aboutme.html" class="lnkmenu">Обо мне</a></div></td>
<td>
<div class="txtmenu"><a href="links.html" class="lnkmenu">Ссылки</a></div></td>
<td>
<div class="txtmenu"><a href="javascript: alert('Еще не прикрутил');" class="lnkmenu">Гостевая книга</a></div></td>
</tr></table>

Чтобы создать «пустой» пункт меню, нам нужно записать код без ссылки.

<td><div class="txtmenu">Главная</div></td>

Что касается изменения цвета шрифта, это уже определено в стилях CSS:

.txtmenu {text-align: center; color: #FF8080; font-weight: bold; font-family: Arial;}
a.lnkmenu:link, a.lnkmenu:visited, a.lnkmenu:active {color: #FFC; text-decoration: none;}
a.lnkmenu:hover {color: #FF8080; text-decoration: none;}

ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ ОКРУЖЕНИЯ ДЛЯ ОПРЕДЕЛЕНИЯ УСЛОВИЯ

Теперь надо найти какое-то условие, которое бы идентифицировало каждую конкретную страницу. Это может быть, например, имя файла данной страницы. Но как его вытащить в директиву?

Для этого существуют так называемые переменные окружения. Полный их список можно найти в прилагающемся справочнике. Нам же потребуется одна из них — DOCUMENT_URI, которая содержит имя текущего документа.

ПРИМЕЧАНИЕ

Текущий документ — это та страница, которая выводится в браузер, поэтому DOCUMENT_URI любого вставного файла будет содержать имя файла главного документа.

Нужно учитывать, что DOCUMENT_URI содержит путь имени файла от корня и начинается со слэша. То есть, для файла http://froland.ru/index.html это будет /index.html, а для http://froland.ru/samodel/index.html — /samodel/index.html

Часто бывает удобнее пользоваться именем файла без пути. В данном случае — тоже. Поэтому сделаем вот так:

<!--#if expr = "$DOCUMENT_URI = /\/index.html/" -->

Сейчас буду всё объяснять.

Во-первых, нужно разъяснить интерпретатору, что DOCUMENT_URI — это переменная, а не просто некий набор символов. Для этого предваряем её спецсимволом $, который говорит о том, что все символы до пробела или другого спецсимвола составляют имя переменной.

Теперь разберёмся в «зубочистках», натыканных вокруг имени файла. Это регулярные выражения — система специальных символов и их комбинаций, с помощью которых задаётся шаблон для поиска нужных комбинаций в строках.

Нам нужно найти комбинацию «/index.htm». Поскольку в эту комбинацию входит слэш, который также используется в регулярных выражениях, нам нужно обозначить, что это не спецсимвол. Для этого предваряем его обратным слэшем: «\/index.htm». Теперь нужно задать поиск строки, в состав которой входила бы искомая комбинация. Для этого окружаем эту комбинацию слэшами: «/\/index.html/».

Условие сформировано: DOCUMENT_URI — это строка «/index.htm». Теперь загоняем его в оператор. В противном случае (если условие не подходит) выводим пункт со ссылкой:

<!--#if expr = "$DOCUMENT_URI = /\/index.html/" -->
<td><div class="txtmenu">Главная</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="index.html" class="lnkmenu">Главная</a></div></td>
<!--#endif -->

То же самое делаем для каждого пункта, кроме последнего: гостевой книги ещё не существует, а когда появится — там будет свой интерфейс.

<table width="600" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#800000"><tr>
<!--#if expr = "$DOCUMENT_URI = /\/index.html/" -->
<td><div class="txtmenu">Главная</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="index.html" class="lnkmenu">Главная</a></div></td>
<!--#endif -->
<!--#if expr = "$DOCUMENT_URI = /\/aboutsite.html/" -->

<td><div class="txtmenu">О сайте</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="aboutsite.html" class="lnkmenu">О сайте</a></div></td>
<!--#endif -->
<!--#if expr = "$DOCUMENT_URI = /\/aboutme.html/" -->

<td><div class="txtmenu">Обо мне</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="aboutme.html" class="lnkmenu">Обо мне</a></div></td>
<!--#endif -->
<!--#if expr = "$DOCUMENT_URI = /\/links.html/" -->

<td><div class="txtmenu">Ссылки</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="links.html" class="lnkmenu">Ссылки</a></div></td>
<!--#endif -->
<td><div class="txtmenu"><a href="javascript: alert('Еще не прикрутил');" class="lnkmenu">Гостевая книга</a></div></td>
</tr></table>

Если вы не поленились сделать подобные пробные странички, используя для вставок, как я вам коварно предложил, текстовые файлы, то, видимо, обнаружили, что меню не работает. Все пункты, кроме последнего — «безусловного» — остались без ссылок на всех страницах.

Всё дело в расширении .txt. Я случайно обнаружил, что условные операторы, написанные в текстовых файлах, не работают. Причём на разных серверах — один под UNIX, другой под Windows, и настроены оба, вроде бы, правильно. Стоит поменять расширение на .htm или .html, всё исправляется. Значит, в нашем случае необходимо пересохранить menu.txt как menu.htm и поменять запрос в каждой странице. Похоже, что моё описание этой фишки эксклюзивно. Про это я нигде ещё не вычитал.

Если у вас всё же заработали текстовые вставки, то, значит, дело в каких-то ещё не изведанных мной настройках сервера.

И всё же:

СОВЕТ

Никогда не задавайте расширения .txt вкладкам, в которых используются условные операторы.

Посмотреть скрипт в работе

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


Следующий шаг >>


 002261