MediaWiki/Внешний вид/Vector

Для темы Вектор (Vector) существует собственная страница CSS стилей MediaWiki:Vector.css изначально пустая.

Добавление произвольного HTML кода

Вплоть до MediaWiki 1.35 пока ещё не существует лёгкого пути адаптации тем оформления. За исключением бокового меню и системных сообщений все изменения необходим вносить прямо в исходный код темы. В результате все внесённые изменения (кроме упомянутых двух типов) теряются с каждым обновлением. Пока единственным решением немного облегчающим ситуацию является хранение желаемых изменений в отдельных HTML файлах. Тогда в коде темы необходимо только подключить эти файлы в VectorTemplate.php (skins/Vector/includes/).

Ниже приведены некоторые примеры добавления произвольного HTML кода в различные места темы. Код может отличаться в различных версиях Медиавики.

MediaWiki 1.35

Ссылка логотипа

Чтобы изменить ссылку логотипа поменяем возвращаемый функцией buildSidebar() массив:

return [
	'has-logo' => $this->isLegacy,
	'html-logo-attributes' => Xml::expandAttributes(
		Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
			'class' => 'mw-wiki-logo',
			'href' => Skin::makeMainPageUrl(),
		]
	),
	'array-portals-rest' => array_slice( $props, 1 ),
	'data-portals-first' => $firstPortal,
	'data-portals-languages' => $languages,
];

Меняем строку 6 на следующую:

'href' => 'https://our.domain.org/',

Боковое меню. Добавление сторонней поисковой службы

Сохраняем код поисковой формы в 'custom-search.htm' (skins/Vector/includes/) и меняем в функции buildSidebar() строки:

case 'SEARCH':
   break;

на:

case 'SEARCH':
   /* custom search engines begins */
   $html = file_get_contents('custom-search.htm', FILE_USE_INCLUDE_PATH);
   $portal['html-items'] .= $html;
   $props[] = $portal;
   /* custom search engines ends */
   break;

Поисковое поле появится в месте, указанном на странице MediaWiki:Sidebar:

* SEARCH

Подвал. Произвольная строка

Строка в подвале - это область под основным содержимым страницы шириной в это содержимое (т.е. ширина окна минус ширина боковой панели). Необходимый код помещаем в файл 'custom-footer.htm' и находим строки:

private function getFooterData() : array {
   $skin = $this->getSkin();
   $footerRows = [];
   foreach ( $this->getFooterLinks() as $category => $links ) {

Меняем их на:

private function getFooterData() : array {
   $skin = $this->getSkin();
   $footerRows = [];

   /* custom footer row begins */
   $footerFile = file_get_contents('custom-footer.htm', FILE_USE_INCLUDE_PATH);
   $items[] = [
      'id' => "footer-item-custom",
      'html' => $footerFile,
   ];
   $footerRows[] = [
      'id' => "footer-custom",
      'className' => null,
      'array-items' => $items
   ];
   /* custom footer row ends */
   
   foreach ( $this->getFooterLinks() as $category => $links ) {

Подвал. Произвольный банер

Банер (иконка, пиктограмма) в подвале - это небольшое изображение вроде банера MediaWiki, ими могут быть также счётчики и ссылки на дружественные проекты. Чтобы добавить перед имеющимся банерами свои, добавим необходимы код в файл 'custom-icons.htm' и подключим его в этой же функции getFooterData():

$footerIcons = $this->getFooterIcons( 'icononly' );
if ( count( $footerIcons ) > 0 ) {
   $items = []; 
   foreach ( $footerIcons as $blockName => $blockIcons ) {

Меняем на:

$footerIcons = $this->getFooterIcons( 'icononly' );
if ( count( $footerIcons ) > 0 ) {
   $items = [];
 
   /*custom footer icons (counter, etc.) begins */
   $footerFile = file_get_contents('custom-icons.htm', FILE_USE_INCLUDE_PATH);
   $items[] = [
	  'id' => "footer-item-custom",
	  'html' => $footerFile,
   ];
   /* custom footer icons ends */

   foreach ( $footerIcons as $blockName => $blockIcons ) {

MediaWiki 1.31

Меняем ссылку логотипа

При нажатии на логотип, по умолчанию попадаем на Заглавную страницу. Настраивается это в главном файле темы, например VectorTemplate.php (ранее просто Vector.php) для темы Vector. Темы находятся в каталоге skins. Находим в файле фрагмент отвечающий за вывод логотипа:

<div id="p-logo" role="banner"><a class="mw-wiki-logo" href="<?php
   echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] )
   ?>" <?php
   echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
   ?>></a></div>

и меняем его на свой, указав в title нужную всплывающую подсказку:

<!-- Change link from logo-->
<div id="p-logo" role="banner">
   <a class="mw-wiki-logo" href="http://mywiki.org" title="На главную страницу"></a>
</div>

Адаптируемость под ширину окна

Тема Vector адаптируется под широкие окна. Если широта экрана достигает 982 px или превышает это значение, то применяется CSS из файла screen-hd.less.

Так, если мы переместили поисковую строку в боковую панель под логотип, то нужно указать её длину для узких окон и широких. Для этого добавляем в файл components/common.less

div#p-search {
   width: 140px;
}

а в screen-hd.less добавляем:

div#p-search {
   width: 150px;
}

Добавляем раздел в боковое меню

1) Опишем добавляемый раздел в отдельном HTML файле sidebar_extra.html:

<div class="portal" role="navigation" id="p-tb" aria-labelledby="p-tb-label">
	<h3 id="p-tb-label">Семантика</h3>
	<div class="body">
		<ul>
			<li><a href="/wiki/Special:Properties" title="Семантические свойства">Все свойства</a></li>
			<li><a href="/wiki/Special:SearchByProperty" title="Поиск по семантическим свойствам">Поиск по свойству</a></li>
			</ul>
	</div>
</div>

2) В файле VectorTemplate.php добавим в раздел описания боковой панели <div id="mw-panel"> строки:

<!-- Add more links to sidebar -->
<?php include('sidebar_extra.html'); ?>

Меняем цвет фона

Чтобы внесённые изменения не утратились с обновлением темы их лучше вносить на странице MediaWiki:Vector.css. При таком подходе настройки сохранятся в базе данных и при замене файлов темы не потеряются. Если же мы хотим изменить фон для всех сайтов в вики семействе, которые используют один набор файлов, но разные базы данных, то лучше вносить изменения в файлы.

MediaWiki:Vector.css

Изменяем фон вики на зелёный

html, body, #mw-page-base, #mw-head, #mw-head-base, #mw-panel, #footer, #p-logo  {
	background-color: #CFC; 
}

Файлы темы Вектор

CSS таблицы темы Vector находятся в каталоге components. Для изменения фона страницы и меню слева нужно отредактировать в файле common.less правило:

body {
	background-color: @menu-background-color;
}

Например, для задания светло-зелёного фона:

body {
	background-color: #a8e4a0;
}

Для изменения фона верхнего меню в файле navigation.less меняем правило #mw-page-base, заменяя:

#mw-page-base {
	height: 5em;
	background-position: bottom left;
	background-repeat: repeat-x;
	/* This image is only a fallback (for IE 6-9), so we do not @embed it. */
	background-image: url('images/page-fade.png');
	.vertical-gradient(@body-background-color, @menu-background-color, 50%, 100%);
	background-color: @body-background-color;
}

на

#mw-page-base {
	height: 5em;
	background-color: #ffdb58;
}

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

• VectorLight - создание облегчённой версии темы Вектор.