MediaWiki/Мобильная версия
Мобильная версия сайта - это версия максимально облегчённая и компактная, которая загружается быстро и отображает всю необходимую информацию даже на малых экранах. Расширение MobileFrontend предоставляет как раз такую возможность для движка MediaWiki. Вместе с многочисленными модулями это расширение сперва содержало в себе и тему оформления Minerva Neue (Минерва - римская богиня мудрости), для которой и с которой она вместе и разрабатывалась, но потом они разделились и теперь их нужно устанавливать отдельно.
Итак, для того чтобы к существующей теме добавить мобильную:
- Скачиваем MobileFrontend и распаковываем содержимое в каталог extensions/MobileFrontend/
- Скачиваем Minerva Neue и распаковываем содержимое в каталог skins/MinervaNeue/. Ранее эта тема была включена в расширение и распространялась сразу вместе с ним.
- Добавляем в конец файла LocalSettings.php строки:
# Set mobile skin wfLoadExtension( 'MobileFrontend' ); $wgMFAutodetectMobileView = true; wfLoadSkin( 'MinervaNeue' ); $wgMFDefaultSkinClass = 'SkinMinerva';
Специальные страницы
- MediaWiki:Mobile.css - страница CSS правил, применяемых только для мобильной версии. Эти правила дополняют или переопределяют правила темы Минерва. Пример замены фона на зелёный:
body, .header, .mw-body, .post-content {
background-color: #A8E4A0
}
- Special:MobileMenu (Служебная:Мобильное_меню) - страница для настройки меню мобильной версии, аналог
MediaWiki:Sidebar, однако пока что нет возможности её редактировать и меню придётся настраивать, редактируя непосредственно файлы темы Минерва.
Общие рекомендации
Класс nomobile
С помощью класса nomobile можно помечать те блоки, которые должны скрываться в мобильной версии. Например:
<div class="nomobile">Содержимое этого блока будет показано только экранах рабочих станций, но скрыто на мобильных устройствах.</div>
Особые правила для разных разрешений экрана
Применение следующих правил для класса main-page-box зависит от разрешения экрана до 720 пикселей и более:
@media all and ( min-width: 720px ) { /* для больших экранов*/
.main-page-box{
margin: 15px;
}
}
@media all and ( max-width: 719px ) { /* для малых экранов*/
.main-page-box{
margin: 5px;
}
}
Изменение меню
Общая информация по настройке
Пока что страница Special:MobileMenu предназначена для других расширений и мобильное меню не удастся изменить также легко как и меню темы для стационарного вида (что делается на странице MediaWiki:Sidebar).
MinervaNeue как отдельная тема (MediaWiki 1.30+)
Добавление пункта меню
Рассмотрим как можно добавить в меню пункт "свежие правки" (recent changes). Добавить можно либо в основное меню, где каждому пункту сопоставлено изображение, либо в область ссылок сайта (конфиденциальность, описание сайта и т.п.), расположенного ниже основного меню.
Основное меню
1) Кладём в папку /skins/MinervaNeue/resources/skins.minerva.mainMenu.icons/ файл recentchanges.svg - изображение этого пункта в векторном формате SVG (Создать или отредактировать его можно, например в Inkscape).
2) Добавляем изображение в список изображений меню в файле skin.json (добавляемая строка выделена):
"skins.minerva.mainMenu.icons": {
"class": "ResourceLoaderImageModule",
"selector": ".mw-ui-icon-minerva-{name}:before",
"images": {
"login": "resources/skins.minerva.mainMenu.icons/login.svg",
"home": "resources/skins.minerva.mainMenu.icons/home.svg",
"logout": "resources/skins.minerva.mainMenu.icons/logout.svg",
"nearby": "resources/skins.minerva.mainMenu.icons/nearby.svg",
"profile": "resources/skins.minerva.mainMenu.icons/profile.svg",
"random": "resources/skins.minerva.mainMenu.icons/random.svg",
"settings": "resources/skins.minerva.mainMenu.icons/settings.svg",
"watchlist": "resources/skins.minerva.mainMenu.icons/watchlist.svg",
"recentchanges": "resources/skins.minerva.mainMenu.icons/recentchanges.svg",
"contributions": "resources/skins.minerva.mainMenu.icons/contributions.svg"
}
},
Положение в списке не имеет значения, главное, чтобы после вставленного значения была запятая, если после идут ещё значения. В конце списка запятой не должно быть.
3) В файле SkinMinerva.php (includes/skins/) в функцию getDiscoveryTools() добавляем ещё один пункт меню:
// new menu item: Special:Recentchanges $menu->insert( 'recentchanges' ) ->addComponent( $this->msg( 'recentchanges' )->escaped(), SpecialPage::getTitleFor( 'recentchanges' )-> getLocalUrl( array( 'returnto' => $returnToTitle ) ), MobileUI::iconClass( 'recentchanges', 'before' ), array( 'data-event-name' => 'recentchanges' ) );
Область ссылок
В файле SkinMinerva.php в функцию getSiteLinks() добавляем ещё один пункт меню:
// new menu item: Special:Recentchanges $menu->insert( 'recentchanges' ) ->addComponent( $this->msg( 'recentchanges' )->escaped(), SpecialPage::getTitleFor( 'recentchanges' )-> getLocalUrl( array( 'returnto' => $returnToTitle ) ) );
Minerva встроенная в MobileFrontend (ранние версии)
Сначала тема Minerva распространялась вместе с MobileFrontend и находилась в каталоге расширения по адресу \includes\skins\. Сквозной поиск по файлам расширения MobileFrontend приводит исследователя к следующим значимым местам:
- \includes\skins\minerva.mustache - шаблон HTML фрагмента описывающего схему всей страницы
- \includes\skins\MinervaTemplate.php - основной файл расширения, где за меню отвечает функция getMainMenuHtml()
- \includes\skins\SkinMinerva.php - файл со множеством функций, из которых для нас представляют особый интерес:
- getMenuData() - отвечает за создание меню и последовательность его элементов
- getDiscoveryTools() - формирует список ссылок с иконками
- getSiteLinks() - формирует список ссылок под основным блоком меню
- \resources\mobile.mainMenu\images\ - изображения, используемые в меню
- \resources\mobile.mainMenu\icons.less - описание используемых в меню изображений, сопоставление файлов и переменных
Добавление пункта меню
Рассмотрим как можно добавить в меню пункт "свежие правки". Добавить можно либо в основное меню, где каждому пункту сопоставлено изображение, либо в область ссылок сайта (конфиденциальность, описание сайта и т.п.), расположенного ниже основного меню.
Основное меню
1) Кладём в папку extensions\MobileFrontend\resources\mobile.mainMenu\images\ файл recentchanges.png - изображение этого пункта размером 48х48 пикселей (или больше, система автоматически уменьшит) в формате png с прозрачным фоном.
2) В файле icons.less (\resources\mobile.mainMenu\) подключаем это изображение:
/* Icon for recentchanges */
.mw-ui-icon-recentchanges {
.m-background-image('images/recentchanges.png');
}
3) В файле SkinMinerva.php в функцию getDiscoveryTools() добавляем ещё один пункт меню:
// new menu item: Special:Recentchanges $menu->insert( 'recentchanges' ) ->addComponent( $this->msg( 'recentchanges' )->escaped(), SpecialPage::getTitleFor( 'recentchanges' )-> getLocalUrl( array( 'returnto' => $returnToTitle ) ), MobileUI::iconClass( 'recentchanges', 'before' ), array( 'data-event-name' => 'recentchanges' ) );
Область ссылок
В файле SkinMinerva.php в функцию getSiteLinks() добавляем ещё один пункт меню:
// new menu item: Special:Recentchanges $menu->insert( 'recentchanges' ) ->addComponent( $this->msg( 'recentchanges' )->escaped(), SpecialPage::getTitleFor( 'recentchanges' )-> getLocalUrl( array( 'returnto' => $returnToTitle ) ) );
Произвольная ссылка на стационарную и мобильную версии
Чтобы разместить в произвольном месте темы мобильной версии ссылку на стационарную нужно в SkinMinerva.php в выбранное место добавить код:
// Link to desktop view $url = $_SERVER["REQUEST_URI"] . '&mobileaction=toggle_view_desktop'; $msg = $this->msg( 'mobile-frontend-view-desktop' ); $menu->insert( 'desktop-view' )->addComponent( $msg->text(), $url );
Если это нужно сделать в меню см. соответствующий раздел на этой странице.
Аналогично для ссылки на мобильную версию нужно вставить следующий код:
// Link to mobile view $url = $_SERVER["REQUEST_URI"] . '&mobileaction=toggle_view_mobile'; $msg = $this->msg( 'mobile-frontend-view-mobile' ); $menu->insert( 'mobile-view' )->addComponent( $msg->text(), $url );
Используя этот алгоритм создания ссылок можно создать произвольную ссылку, где переменная $url хранит саму ссылку, а $msg - текст ссылки. Использование функции $this->msg() позволяет использовать текстовые сообщения, которые можно редактировать (и создавать) на страницах MediaWiki:Сообщение. В данном случае: MediaWiki:Mobile-frontend-view-desktop-mode. Если нужно указать свой текст ссылки, то лучше это делать не в коде, а либо в файле переводов (\MobileFrontend\i18n\ru.json), либо на странице сообщения MediaWiki:Mobile-frontend-view-desktop.
Если мы не хотим изменять имеющийся текст перевода (т.к. он может использоваться в других местах), но добавить новый, то меняем строчку с определением текста ссылки:
$msg = $this->msg( 'mobile-frontend-view-desktop-mode' );
И создаём новую страницу MediaWiki:Mobile-frontend-view-desktop-mode, где указываем желаемый текст.
Категории
По умолчанию блок категорий не отображается в мобильной версии. Можно включить отображение специальной кнопки "Категории". Для этого нужно в файле .../skins/MinervaNeue/includes/skins/SkinMinerva.php найти опцию OPTION_CATEGORIES и установить её в true (переменная $skinOptions в объявлении класса SkinMinerva). Другими словами найти строчку:
self::OPTION_CATEGORIES => true,
Если это не помогло, то в этом же файле найти функцию hasCategoryLinks() и закоментировать проверку вышеуказанной опции, чтобы функция сразу начала вывод катеригий (вернее кнопки для них). Тогда функция будет иметь вид:
private function hasCategoryLinks() {
//comment 'if' to enable category button
/*if ( !$this->getSkinOption( self::OPTION_CATEGORIES ) ) {
return false;
}*/
$categoryLinks = $this->getOutput()->getCategoryLinks();
if ( !count( $categoryLinks ) ) {
return false;
}
return !empty( $categoryLinks['normal'] ) || !empty( $categoryLinks['hidden'] );
}
Подвал
Ссылка на политику конфиденциальности
- Чтобы скрыть ссылку на политику конфиденциальности нужно добавить на страницу MediaWiki:Mobile.css следующее правило:
/* Скрываем ссылку "Конфиденциальность" */
.footer-places { display: none; }
Вставка произвольного HTML кода
Новая отдельная тема MinervaNeue
- В файле MinervaTemplate.php (/skins/MinervaNeue/includes/skins), в конце функции getSecondaryActionsHtml() перед командой return добавляем содержимое внешнего файла:
// Добавляем внешний HTML файл
$html .= file_get_contents('some-file.htm');
return $html . Html::closeElement( 'div' );
Если файл находится не в корне сайта, то нужно указать относительный путь к нему, учитывая заглавные буквы. Так, если мы хотим добавить файл some-file.htm, который находится в каталоге темы Вектор, то указываем:
$html .= file_get_contents('skins/Vector/includes/some-file.htm');
Старая встроенная в MobileFrontend тема Minerva
- Чтобы добавить произвольный HTML код, в /extentions/MobileFrontend/includes/skins/MinervaTemplate.php ищем функцию getFooterHtml и после инициализации переменной
$footerдобавляем в неё внешний html файл:
$footer = '<div id="footer" class="post-content">';
$footer .= file_get_contents('some-file.htm');
При этом файл должен лежать в корне сайта. Если, например, мы хотим все внешние HTML блоки хранить в каталоге html-blocks, то строка подключения должна выглядеть так:
$footer .= file_get_contents('html-blocks/some-file.htm');
Полезные ссылки
- Как сделать облегчённую тему оформления на основе темы Vector
- Советы по оформлению мобильной версии
- http://adaptivator.ru - сервис онлайн проверки адаптивности сайта к различным мобильным устройствам
