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