Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

MODX — Версия для слабовидящих

Известно, что всем государственным и муниципальным образовательным учреждениям обязательно иметь помимо основной версии сайта ещё и версию для слабовидящих (соответствующий закон вступил в силу с начала 2016 года). В связи с этим я решил написать этот краткий урок, из которого вы узнаете, как создать версию сайта для слабовидящих, используя MODX Revolution.

Что понадобится

  • Терпение.
  • MODX Revolution.
  • Сниппет Switch из официального репозитория.

Принцип работы

Здесь всё очень просто. Когда человек заходит на сайт, он может переключиться на версию для слабовидящих, перейдя по ссылке (например, site.ru/set-theme/vision). По адресу этой ссылки находится ресурс, на котором вызывается сниппет, записывающий в cookies название версии сайта (у меня это — vision). Затем происходит перенаправление на главную страницу. Когда человек в следующий раз зайдёт на любую страницу, на ней вызывается сниппет, который в зависимости от значения, записанного нами ранее в cookies, отдаёт те или иные файлы стилей.

Если человек хочет вернуться на основную версию сайта, он опять может перейти по специальной ссылке (например, site.ru/set-theme/reset). После этого произойдёт перенаправление на главную, где наш сниппет опять вернёт необходимые файлы стилей.

Switch

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

Файл стилей

При разработке оформления сайта для слабовидящих необходимо придерживаться ГОСТ 52872-2012, но для начала можно просто скопировать текущий файл стилей и сделать оформление более контрастным, а также увеличить кегль и размер элементов. В моём случае я взял файл стилей основной версии (например, default.css) и скопировал его в новый файл (и назвал vision.css).

Чанк Head

Обычно чанк для вывода head-раздела я называю Head. Подключаю файлы стилей я данным образом:

<link rel="stylesheet" media="all" href="[[!switch?
    &get=`[[!quasiTheme]]`
    &c1=`vision`
    &do1=`vision.css`
    &default=`default.css`
]]" />

Если в cookies браузера установлена тема vision, то подключается vision.css, в любом другом случае — default.css.

Сниппеты

quasiTheme

Данный незамысловатый сниппет выводит название темы (в моём случае я использовал vision для версии для слабовидящих и любое другое (default или пустое значение) — для основной версии).

return $modx->getOption('theme', $_SESSION, 'default');

quasiThemeControl

Данный сниппет вызывается на ресурсах для смены оформления и записывает в cookies название темы оформления.

$theme = $modx->getOption('set', $scriptProperties, false);
$referer = $modx->getOption('HTTP_REFERER', $_SERVER, '');
if ($theme) {
	$_SESSION['theme'] = $theme;
	$modx->sendRedirect($referer);
}

Ресурсы

Есть два ресурса, при переходе на любой из которых происходит запись в cookies названия темы и последующее перенаправление на страницу, с которой пришёл посетитель.

Vision

Здесь вызывается сниппет quasiThemeControl для установки темы для слабовидящих. Псевдоним данного ресурса ([[*alias]]) в моём случае — vision.

[[!quasiThemeControl? &set=`[[*alias]]`]]

Default

Здесь вызывается сниппет quasiThemeControl для установки основной темы. Псевдоним данного ресурса ([[*alias]]) в моём случае — default.

[[!quasiThemeControl? &set=`[[*alias]]`]]

Примеры

Данный способ я реализовал на сайте вологодского строительного колледжа.

Комментарии