Гибкость настройки шаблонов страниц обеспечивается возможности вставки в шаблон различных элементов данных - таких как, например, баннеры, заголовки страниц, анонсы новостей - с помощью переменных.
Для вставки переменных в шаблон страницы используется выпадающий список вверху окна с шаблоном.
Достаточно просто выбрать из списка необходимую переменную, и она будет вставлена в код страницы.
В шаблоне страницы доступна вставка следующих типов переменных: «общие объекты»; «последние новости, статьи»; «группы баннеров»; «меню»; «объекты, привязанные к странице». Переменные таких типов как «Последние новости, статьи», «группы баннеров» и «меню» создаются пользователями, остальные присутствуют в системе по умолчанию.
Переменные раздела «Последние новости, статьи
» представляют собой список всех созданных до этого момента анонсов новостных страниц, для которых указан тип анонса «Последние N-записей на другой странице» (подробней об этом читайте в соответствующем разделе руководства).
В коде страницы переменная анонса новостей выглядит как
{anonses id=№№}
, где №№ - id анонса.
Для удобства идентификации переменных лучше давать подобным анонсам максимально развернутые имена, так же можно ориентироваться на идентификатор анонса (цифры после id в заголовке анонса). Важно помнить, что анонс, после того, как вы вставите его в шаблон страницы будет выводится только на тех страницах, которые указаны в шаблоне новостей на вкладке «Правила формирования блоков».
Переменные раздела «Группы баннеров
» представляют собой список всех созданных до этого момента групп баннеров (подробней об этом читайте в соответствующем разделе руководства).
{ banner id=№№}
, где №№ - id группы баннеров.
Для удобства идентификации переменных лучше давать группам баннеров максимально развернутые имена, так же можно ориентироваться на идентификатор группы баннеров (цифры после id в заголовке).
Переменные раздела «Меню
» представляют собой список всех созданных до этого момента меню (подробней об этом читайте в соответствующем разделе руководства).
В коде страницы переменная шаблона выглядит как
{ menu id=№№}
, где №№ - id меню.
Для удобства идентификации переменных лучше давать меню максимально развернутые имена, так же можно ориентироваться на идентификатор меню (цифры после id в заголовке). Важно помнить, что меню будут выводится только на тех страницах, которые указаны на вкладке «Общие свойства» шаблона меню.
Рассмотрим теперь переменные группы «Общие объекты », т.е. переменные доступные для вставки в шаблон страницы «по умолчанию».
Переменная | Назначение |
---|---|
{ page_title} | Заголовок страницы. Соответствует заголовку, указанному в поле "Название" в форме создания/редактирования страницы (см. соответсвующий раздел руководства), совпадает с названием страницы в структуре сайта. Используется для вывода заголовка в тексте страницы. |
{ page_full_title} | Полный заголовок страницы. Соответствует заголовку, указанному в поле "Полный заголовок" в форме создания/редактирования страницы (см. соответсвующий раздел руководства). Обычно используется в качестве тега |
{ page_notags_title} | { page_full_title}, из которого вырезаны все html теги |
{ page_content} | Выводит содержание страницы. Для текстовой страницы это будет текстовое содержание страницы, для новостных - анонс новостей, для страниц каталога - список элементов и т.д. |
{ page_info} | Описание страницы. Соответствует заголовку, указанному в поле "Описание" в форме создания/редактирования страницы (см. соответсвующий раздел руководства). |
{ page_meta} | Метатеги страницы. Соответствует заголовку, указанному в поле "Слова для раскрутки " в форме создания/редактирования страницы (см. соответсвующий раздел руководства). В отличие от других переменных выводит не просто данные, а сразу тег . |
{ page_css} | Подключает ссылки на доп. стили. Необходим, когда на сайте есть модули "форум", "сервер личных сообщений" |
{ firm_name} | Название сайта. Задается в настройках - в админ панели. |
{ firm_slogan} | Слоган сайта. Задается в настройках - в админ панели |
{ body_onload} | Системная переменная, используется для вывода вызова скриптов при загрузке . Вызывается в теле тега - . Влиять на эту переменную пользователь в системе не может. Для инициализации вызова собственных скриптов, вставте код вызова непосредственно в шаблон после переменной { body_onload}. Для удобства вставки инициализации скрипта в шаблоны нескольких страниц, можно вынести этот код в отдельную баннерную группу и настроить в шаблоне вызов баннеров переменной - . |
{ javascript} | Системная переменная, используется для вывода вызова скриптов. Вызывается внутри тега - { javascript}. Влиять на эту переменную пользователь в системе не может. Для инициализации вызова собственных скриптов, вставте код вызова непосредственно в шаблон после переменной { javascript}. Для удобства вставки инициализации скрипта в шаблоны нескольких страниц, можно вынести этот код в отдельную баннерную группу и настроить в шаблоне вызов баннеров переменной - { javascript} { banner id=№№}. |
{ parent_title} | Если страница является подстраницей, выводит название "родительской" страницы. Используется для составление сложных заголовков страниц и вывода навигации типа "хлебные крошки". |
{ language_switcher id=0} | Переключатель языков |
Когда браузер запрашивает от веб-сервера документ, он также пересылает на сервер техническую информацию об определённых параметрах браузера и операционной системы. Веб-сервер в свою очередь одновременно с документом возвращает некоторые свои характеристики. Таким образом, браузер и веб-сервер обмениваются данными, которые называются переменные окружения. Эти переменные можно применять в своих целях и отображать их на веб-странице.
При использовании SSI общий синтаксис вывода определенной переменной окружения будет следующий.
Некоторые переменные с их описанием перечислены в табл. 1. Заметьте, что все имена пишутся заглавными символами. Хотя это условие и необязательно, именно такая форма записи является традиционной и устоявшейся.
Переменная | Описание |
---|---|
DOCUMENT_ROOT | Путь к корневой папке сайта. Для локального веб-сервера значение может принимать вид z:/home/сайт/www, а в других случаях зависит от операционной системы сервера и используемого программного обеспечения. |
GATEWAY_INTERFACE | Версия CGI (Common Gateway Interface, общий шлюзовый интерфейс). Значение обычно равно CGI/1.1 . |
HTTP_ACCEPT | Типы файлов, которые способен принять браузер. В качестве значения возвращается список поддерживаемых MIME-типов разделенных между собой запятой, например: text/html, application/xhtml+xml . |
HTTP_CONNECTION | Тип соединения браузера с веб-сервером. Так, значение keep-alive означает, что браузер поддерживает постоянное соединение с сервером. При этом в течение одного сеанса соединения разрешено делать несколько запросов. Повторного соединения в таком случае уже не происходит. |
HTTP_HOST | Доменное имя сайта. Обычно различают имена с префиксом www (www..ru). Переменная вернёт тот адрес сайта, который указан в адресной строке браузера. |
HTTP_REFERER | Адрес страницы, с которой пользователь перешел на данный сайт, он еще называется реферер. |
HTTP_USER_AGENT | Идентификатор используемого браузера и операционной системы. В качестве значения возвращается строка, содержащая ключевые слова. Например, следующая строка Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0.2) Gecko/20100101 Firefox/6.0.2 говорит, что пользователь использует браузер Firefox 6.0.2 под операционной системой Windows 7. |
QUERY_STRING | Запрос, который указан в адресной строке после вопросительного знака (?). Обычно пишется в форме «переменная=значение», где переменные разделяются между собой амперсандом (&).?id=5&slv=34 будет возвращено значение id=5&slv=34 . |
REMOTE_ADDR | IP-адрес посетителя сайта. |
REQUEST_METHOD | Метод отправки данных на сервер. По умолчанию применяется метод GET. |
REQUEST_URI | Адрес запрашиваемого документа. Отсчёт ведётся от корня сайта, т.е..html вернется значение 1.html . |
SERVER_ADDR | IP-адрес компьютера, на котором размещается сайт. |
SERVER_ADMIN | Адрес электронной почты администратора сайта. |
SERVER_NAME | Имя сервера. |
SERVER_PORT | Порт, по которому ожидается получение данных. |
SERVER_PROTOCOL | Протокол для получения и отправки данных. Значение обычно равно HTTP/1.1 . |
SERVER_SOFTWARE | Программное обеспечение установленное на сервере. Для веб-сервера Apache возвращается номер версии (Apache/2.2.4 ), а также версия PHP (PHP/5.3.3 ). |
В примере 1 показано использование переменных окружения для отображения на веб-странице требуемой информации.
Пример 1. Вывод значения переменной DOCUMENT_ROOT
Путь к корневой папке сайта:
В результате выполнения примера будет выведена следующая строка: Путь к корневой папке сайта: /home/сайт/www .
Значения переменных окружения можно посмотреть с помощью программы на PHP, используя функцию phpinfo(), как показано в примере 2.
Пример 2. Использование phpinfo()
В результате выполнения программы будет выведена таблица с разными параметрами, в том числе и переменными окружения в разделе «Apache Environment» (рис. 1).
Рис. 1. Apache Environment
Также можно написать программу на PHP, которая будет выводить все переменные окружения в виде таблицы (пример 3)..
Пример 3. Вывод переменных окружения
\n\n
$a | $b |
В дополнение к этому Вы можете также использовать следующие специальные предопределенные переменные, которые являются уместными только в шаблонах HTML.
Переменные для использования только в шаблонах страницы раздела:
Эти переменные могут использоваться только в шаблонах страницы раздела. Они допустимы во всех HTML-основанных выходных форматах (Справка HTML, Броузерная справка, eBook и Справка Visual Studio / MS Help 2.0).
Переменная |
|
<%DOCTYPE%> |
Вставляет правильный тэг DOCTYPE в начале страниц вывода HTML. Эта переменная является основной во всех шаблонах и не должна быть удалена. Если Вы удалите ее, то Вы получите сообщение об ошибках от компилятора. |
<%DOCCHARSET%> |
Вставляет правильную информацию набора символов в мета тэги в начале страниц вывода HTML. Эта переменная является основной во всех шаблонах и не должна быть удалена. Если Вы удалите ее, то Вы получите сообщение об ошибках от компилятора. |
<%STYLESHEET%> |
Вставляет ссылку на таблицу стилей CSS, содержащую всю информацию стилей для вашего проекта. Эта переменная является основной во всех шаблонах и не должна быть удалена. Если Вы удалите ее, то Вы получите сообщение об ошибках от компилятора. |
<%TOPIC_HEADER%> |
Вставляет заголовок текущего раздела, если он существует. Если текущий раздел не имеет никакого заголовка, значение этой переменной - нуль. Это может отличаться от заголовка раздела, вставленного с <%TOPIC_TITLE%> . |
<%TOPIC_HEADER_TEXT%> |
Вставляет заголовок текущего раздела как простой текст. Это особенно полезно, если ваши проектные заголовки отличаются и длиннее, чем заголовки Содержания, которые вставлены с <%TOPIC_TITLE%> . Это используется прежде всего для оптимизации механизма поиска, для которой Вы вставили бы это в мета тэг description , как это:
|
<%TOPIC_TEXT%> |
Вставляет основной текст раздела, то есть весть раздела, который отредактирован и отформатирован в вашем проекте в редакторе Help & Manual. Это - самая важная переменная - если Вы проигнорируете ее, то ваши разделы будут пусты! |
<%TOPIC_BREADCRUMBS%> |
Генерирует ряд "ссылок навигации" следа крошки к разделам выше текущего раздела в дереве Содержания. Эта переменная пуста в разделах верхнего уровня. В разделах второго уровня и ниже переменная генерирует ряд ссылок в формате Ссылка1> Ссылка2 > Ссылка3 ... Текущий раздел не включен в ряд. Если Вы хотите поместить текущий заголовок раздела в конце следа крошки, Вы можете сделать это с переменной <%TOPIC_TITLE%> (см. ниже). Переменная следа крошки пуста в разделах в секции Невидимые разделы. Эта переменная имеет соответствующую пару условия: |
Переменные для использования только в Броузерной справке:
Все оставшиеся переменные уместны только в Броузерной справке (HTML):
Глобальные переменные для всех шаблонов Броузерной справки:
Переменная |
|
<%HREF_TOP_PAGE%> |
|
<%HREF_CONTENT_PAGE%> |
|
<%HREF_INDEX_PAGE%> |
|
<%HREF_SEARCH_PAGE%> |
Переменные только для шаблона Размещения набора фреймов:
Переменная |
|
<%HREF_CONTENT_PAGE_DYN%> |
|
<%HREF_CONTENT_PAGE_STATIC%> |
|
<%NAVIGATION_SCRIPT%> |
Вставляет навигационный сценарий, требуемый главным фреймом. |
Переменные только для шаблона Содержания:
Переменная |
|
Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной фичей, то вам данная статья будет не интересна.
Итак, тема с переменными в стилях уже затерта до дыр, т.к. они давным давно существуют в препроцессорах. Это удобно, я уже плохо представляю себе написание стилей без возможности сохранить где-то определенное значение (цвет, величину, название шрифта, тип маркера у списка, всё что может придти в голову...). Однако препроцессоры не могут дать нам той гибкости, которую дают нативные переменные в CSS, и скоро вы поймете, почему.
Для начала нужно понять, как объявлять и использовать переменные. Переменные объявляются в селекторах:
:root {
--body-background: #ccc;
}
body {
background-color: var(--body-background);
}
Как видно из листинга выше, переменные объявляются двумя дефисами перед именем:
--variable-name
Чтобы использовать переменную, необходимо воспользоваться функцией var . Она имеет 2 параметра. Это, естественно, имя переменной, а вторым необязательным параметром идёт значение свойства, которое необходимо использовать в случае отсутствия переменной.
На этом набор новых возможностей с приходом переменных, разумеется, не заканчивается. Имея переменные в арсенале CSS, мы получаем большую гибкость в написании стилей. Например, теперь чтобы составить медиазапрос для экранов <320px в ширину, не нужно переопределять свойство целиком. Достаточно изменить значение переменной. Т.е.
Title {
--wrapper-width: 50%;
width: var(--wrapper-width);
}
@media (max-width: 320px) {
--wrapper-width: 100%;
}
Всё! Этого достаточно, чтобы свойство width
изменило свое значение!
Если CSS способен отслеживать изменения своих переменных, это значит, что с этим можно взаимодействовать различными способами.
Что насчёт JavaScript?
Управляя аттрибутом style, можно изменить стиль, прибегая к минимальным затратам усилий. Приведу грубый пример на React.Title {
--background: blue;
background-color: var(--background);
}
changeColor() {
this.setState({
style: {"--background": "green"}
});
}
Теперь по клику на элемент с классом title будет меняться цвет фона у элемента. Круто? Ещё бы! Не нужно добавлять новый класс, переопределять свойство или делать другие действия, способствующие изменению фонового цвета у элемента.
Ремарка
Если кто-то не знаком с React или кому-то просто непонятно, что произошло. Мы просто средствами JavaScript изменили аттрибут style у элемента, изменив значение переменной
--background
Используя переменные, изменять css извне стало проще, методов использования можно придумать массу, а мы пойдем дальше.
Области видимости
Нужно сказать пару слов об области видимости CSS переменных, здесь всё просто. Объявленная переменная доступна всем селекторам дочерних элементов данного селектора. Т.е. в листинге ниже использовать переменную --b в тэге html будет нельзя. А вот переменная --a в body и всех дочерних элементах будет работать без проблем (если её конечно не переопределят где-то ниже).Html {
--a: #ccc;
}
body {
--b: #a3a3a3;
}
(я знаю, что цвета в примерах скучные, но я плохо помню цвета по hex-коду:))
Переменные и calc
Как и любое числовое значение свойства, вы можете использовать переменную в функции calc .Title {
--title-width: 300px;
width: calc(var(--title-width) + 150px);
}
Круто! Особенно если учесть что переменную --title-width
, можно менять как внутри CSS, так и извне.
Заметьте, что величину мы обязаны положить в переменную. Дописать px , % , rem и т.д. к вызванной переменной у нас не получится. Однако ничто не мешает нам умножить с помощью функции calc значение на единицу в необходимой нам величине.
Title { --title-width: 300; /* так не сработает */ width: var(--title-width)px; /* так сработает */ width: calc(var(--title-width) * 1px); }