MediaWiki/Мобильная версия

Материал из СисадминВики (SysadminWiki.ru)
< MediaWiki(перенаправлено с «Мобильная версия»)
Перейти к: навигация, поиск

Мобильная версия сайта - это версия максимально облегчённая и компактная, которая загружается быстро и отображает всю необходимую информацию даже на малых экранах. Расширение MobileFrontend предоставляет как раз такую возможность для движка MediaWiki. Вместе с многочисленными модулями это расширение сперва содержало в себе и тему оформления Minerva Neue (Минерва - римская богиня мудрости), для которой и с которой она вместе и разрабатывалась, но потом они разделились и теперь их нужно устанавливать отдельно.

Итак, для того чтобы к существующей теме добавить мобильную:

  1. Скачиваем MobileFrontend и распаковываем содержимое в каталог extensions/MobileFrontend/
  2. Скачиваем Minerva Neue и распаковываем содержимое в каталог skins/MinervaNeue/. Ранее эта тема была включена в расширение и распространялась сразу вместе с ним.
  3. Добавляем в конец файла 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');

Полезные ссылки

Источник — «https://sysadminwiki.ru/w/index.php?title=MediaWiki/Мобильная_версия&oldid=2761»