Содержание

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

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

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

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

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

MediaWiki 1.41

В MediaWiki 1.41 тема Вектор имеет 2 режима: vector и vector-2022.

Убрать анимацию загрузки сайта в правом верхнем углу. На MediaWiki:Common.css добавить

/* Убираем индикатор анализатора */
.mw-indicator { display: none; }

vector: Код до и после бокового меню. В skins/Vector/includes/templates/LegacySidebar.mustache

{{!
  See @typedef SidebarData
}}
<div id="mw-panel" class="vector-legacy-sidebar">
  <div id="p-logo" role="banner">
    <a class="mw-wiki-logo" href="{{link-mainpage}}"
      title="{{msg-tooltip-p-logo}}"></a>
  </div>
        <hr>
        <p>Hello!</p>
  {{#data-portlets-first}}{{>LegacyMenu}}{{/data-portlets-first}}
  {{#array-portlets-rest}}{{>LegacyMenu}}{{/array-portlets-rest}}
  {{#data-portlets.data-languages}}{{>LegacyMenu}}{{/data-portlets.data-languages}}
        <hr>
        <p>Buy</p>
</div>

vector: Место для картинки. skins/Vector/includes/templates/skin-legacy.mustache

<div id="content" class="mw-body" role="main">
  <a id="top"></a>
  <div id="siteNotice">{{{html-site-notice}}}
  <span style="float:right;">ABCDEFGH</span>
  </div>
  {{>Indicators}}

vector-2022: Иконка после заголовка. В skins/Vector/includes/templates/PageToolbar.mustache

<div id="right-navigation" class="vector-collapsible">
    <nav aria-label="{{msg-views}}">
        {{#data-portlets}}{{#data-views}}{{>Tabs}}
        <img src="/w/images/picture_30x35.jpg"/>
        {{/data-views}}{{/data-portlets}}
    </nav>

vector-2022: Поисковый ввод перед футером. В /skins/Vector/includes/templates/Footer.mustache

<footer id="footer" class="mw-footer" role="contentinfo" {{{html-user-language-attributes}}}>
    <div><input type="text"></div>
    {{#data-info}}{{>Footer__row}}{{/data-info}}
    {{#data-places}}{{>Footer__row}}{{/data-places}}
    {{#data-icons}}{{>Footer__row}}{{/data-icons}}
</footer>

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 - создание облегчённой версии темы Вектор.

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

Содержание

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

MediaWiki 1.41

MediaWiki 1.35

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

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

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

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

MediaWiki 1.31

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

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

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

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

MediaWiki:Vector.css

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

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

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Навигация

Популярное

Инструменты