View source for Manual:How to make a MediaWiki skin/ru

<languages/>
Создание темы оформления - отличный способ познакомиться с внутренним устройством MediaWiki и внести свой вклад в движение Викимедиа!
<span class="mw-translate-fuzzy">Если вы знакомы с front-end технологиями CSS, JavaScript и JSON, вы можете создать скин MediaWiki! Знать PHP необязательно, но это может помочь, если вы хотите сделать что-нибудь продвинутое.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">There is no need to know PHP, but it may help if you want to do anything advanced.</span>

Хотя это и не обязательно, но будет полезно, если вы знакомы с [http://lesscss.org/ LESS CSS].
Это руководство предполагает, что вы [[Special:MyLanguage/Manual:Installation guide|установили рабочую версию MediaWiki]] и используете '''[[Special:MyLanguage/Download#Development_releases|текущую версию]]''', если нет, рекомендуется сначала сделать это.

<span lang="en" dir="ltr" class="mw-content-ltr">If you having an existing skin using the PHP BaseTemplate, this guide is not for you.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Please see [[Special:MyLanguage/Manual:How to make a MediaWiki skin/Migrating SkinTemplate based skins to SkinMustache|Manual:How to make a MediaWiki skin/Migrating SkinTemplate based skins to SkinMustache]] instead.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Preparation ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Skin development will be a lot easier with a familiarity with [https://mustache.github.io Mustache templates].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
At minimum, you should be familiar with the following Mustache basics described in the example below:
</div>

<syntaxhighlight lang="html">
{{ str }} <!-- renders escaped string -->
{{{ html-str }}} <!-- renders RAW HTML -->

<!-- accesses data inside an associative array of the form { 'key' => 'hello' } -->
{{#array-data}} 
{{ key }} <!-- renders hello -->
{{/array-data}}

<!-- for boolean values -->
{{#is-talk-page}}
<!-- conditional rendering if is-talk-page is true -->
{{/is-talk-page}}
</syntaxhighlight>
<span lang="en" dir="ltr" class="mw-content-ltr">A skin is responsible for the rendering of user-visible content - the HTML inside the BODY tag.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">It is restricted from editing anything inside the HEAD.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Code will be automatically generated for the skin, so that the skin can focus on presentation.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If you need to modify the HEAD this is considered outside the scope of the skin, please use Hooks, extensions or configuration to do that [[Special:MyLanguage/Manual:How to make a MediaWiki skin#I want to change elements in the head of the HTML page|see the FAQ]] for best practices on how to do that.</span>

<span id="Getting_started"></span>
== Начало работы ==

Для того чтобы начать создавать свою первую тему оформления, мы рекомендуем два варианта.

<span id="Option_1_-_Fork_Example_skin"></span>
=== Пункт 1 - сделайте ответвление(форк) от стиля оформления взятого для примера ===
<span lang="en" dir="ltr" class="mw-content-ltr">The Example skin https://github.com/wikimedia/mediawiki-skins-Example provides the bare bones implementation of a skin.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Clone the repository in your skins folder making sure the folder is called "Example" and add the following to your LocalSettings.php:</span>

<syntaxhighlight lang="php">
wfLoadSkin( 'Example' );
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
If all has gone to plan your skin should be available on the Special:Preferences page of your wiki.
</div>

<span id="Option_2_-_Use_the_skins_lab"></span>
=== Пункт 2 - используем "лабораторию" стилей ===
<span lang="en" dir="ltr" class="mw-content-ltr">The [https://skins.wmflabs.org/#/add skins lab tool] allows you to setup a skin with basic CSS and templates.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Once you feel comfortable, you can click "download as ZIP" which will compile the necessary boiler plate for your skin.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Hopefully the resulting repository is easy to navigate.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">When you have downloaded the ZIP place it in your MediaWiki skins folder and update LocalSettings.php with the following:</span>

<syntaxhighlight lang="php">
wfLoadSkin( 'FolderName' );
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
If all has gone to plan your skin should be available on the Special:Preferences page of your wiki.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Option 3 -  From the command line ===
</div>
<syntaxhighlight lang="php">
cd mediawiki/skins

npm install mediawiki-skins-cli

npx create-mw-skin SkinName

cd SkinName
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">When you have downloaded the ZIP place it in your MediaWiki skins folder and update LocalSettings.php with the following:</span>

<syntaxhighlight lang="php">
wfLoadSkin( 'SkinName' );
</syntaxhighlight>

<span id="Let_people_know!"></span>
=== Дайте людям знать! ===
<span lang="en" dir="ltr" class="mw-content-ltr">Making a skin will be more fun with other people and much easier too! Once you have got something usable, please consider publishing it to GitHub or {{ll|Gerrit}}.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Once the code is publicly available, you should [{{canonicalurl:Skin:My new skin|action=edit&preload=Template:Skin/Sample&venoscript=1}} create a skin page] (make sure you change the title!) to let people know you are open for collaboration!</span>

<span lang="en" dir="ltr" class="mw-content-ltr">Setting up a wiki page has many other benefits.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">You'll be able to handle bug reports in [[Phabricator]] or GitHub issues and receive patches from other volunteers in the MediaWiki community.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Somebody should also be able to help you setup translation.</span>

<span id="Mustache"></span>
== Усы ==
<span lang="en" dir="ltr" class="mw-content-ltr">In 1.35 we added support for Mustache in skins.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">We found using Mustache to be very helpful in the development of the [[Special:MyLanguage/Skin:Minerva|Skin:Minerva]] and [[Special:MyLanguage/Skin:Vector|Skin:Vector]] skins as it allows you to separate data from presentation.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Mustache partials can be used to reuse templates.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">To use a partial Partial.mustache in MediaWiki, simply add them to the folder you are working in and reference them using {{>Partial}} in the master template skin.mustache.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">The data sent to Mustache templates is relatively flexible.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If something is missing, you can use PHP to add data by extending the {{ll|Manual:SkinMustache.php|SkinMustache}}::getTemplateData function.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">The [https://github.com/jdlrobson/mediawiki-skins-skinjson SkinJson] skin can be added to a MediaWiki development instance, to inspect the data available to skins.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Note that arrays are prefixed "array-", booleans are prefixed with "is-" and objects are prefixed "data-" to help you conceptualize the data you are working with.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
The data available, and in which MediaWiki versions it is available is documented on [[Special:MyLanguage/Manual:SkinMustache.php|SkinMustache.php]].
</div>

<span id="Making_your_skin_translateable_(i18n)"></span>
=== Сделайте ваш стиль оформления переводимым (i18n) ===
<span lang="en" dir="ltr" class="mw-content-ltr">In skin.json under ValidSkinNames, you can use the `messages` option to define translatable message keys.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">These keys should correspond to entries inside the i18n/en.json folder.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Once registered for the skin, these will be available in your template with a prefix <code>msg-</code>.</span>

<syntaxhighlight lang="json">
"example": {
	"class": "SkinMustache",
	"args": [ {
			"name": "example",
			"messages": [
				"sitetitle",
				"search",
				"tagline",
				"navigation-heading"
			]
	} ]
}          
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">For example in the example below, the message "sitetitle" can be rendered in a Mustache template using:</span>

<syntaxhighlight lang="html">
<p>{{msg-sitetitle}}</p>
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
See [[Special:MyLanguage/Localisation|Localisation]] for more information on why this is important.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Rendering template partials ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">Template partials can be used to render different parts of the skin and to avoid the problem with having a large unmaintainable skin.mustache file.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">In the following example, the skin renders the contents of the templates in the 3 files with the filenames Logo.mustache, Content.mustache and Footer.mustache.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">These files must exist in the same folder as the skin.mustache file or a subfolder of the directory containing  skin.mustache.</span>

<syntaxhighlight lang="html">
{{>subfolder/Logo}}
{{>Content}}
{{>Footer}}
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">Template partials are a great way to break up your skin to make it more readable.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">No template partials are predefined and available by default, however you can [https://codesearch.wmcloud.org/skins/?q=%7B&i=nope&files=.*.mustache&excludeFiles=&repos= look at existing skins using SkinMustache for inspiration].</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
Read more about [https://mustache.github.io/mustache.5.html#Partials Mustache template partials].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Logo.mustache ====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Following code block is being used to show the site logo in the Example skin and you will also see the same if you create the skin from the SkinLabs.
</div>

<syntaxhighlight lang="php">
<!-- Logo.mustache -->
<div id="p-logo" class="mw-portlet" role="banner">
    <a href="{{link-mainpage}}">
    {{#data-logos}}
        {{#icon}}<img src="{{.}}" width="40" height="40">{{/icon}}
        {{#wordmark}}<img src="{{src}}" width="{{width}}" height="{{height}}">{{/wordmark}}
        {{^wordmark}}<h1>{{msg-sitetitle}}</h1>{{/wordmark}}
    {{/data-logos}}
    </a>
</div>
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">From the code block mentioned above, the following line is responsible to show the logo `icon`:</span> 
<syntaxhighlight lang="php">
{{#icon}}<img src="{{.}}" width="40" height="40">{{/icon}}
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">This line assumes that, there is a key <code>icon</code> in the array {{ll|Manual:$wgLogos|$wgLogos}}.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">So in your LocalSettings.php file, if there is a line similar as {{phpi|1=$wgLogos = [ 'icon' => "$wgResourceBasePath/resources/assets/wiki.png" ];}}, then the logo/icon image will be displayed.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">The default MediaWiki <code>LocalSettings.php</code> exports a <code>1x</code> key in the {{phpi|$wgLogos}} array.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">So to show the logo you need to update the LocalSettings.php and add a key <code>icon</code>.</span>

{{note|1=<span lang="en" dir="ltr" class="mw-content-ltr">If you want to change the logo do not just replace the default logo with a new one in the <code>resources/assets/wiki.png</code> path.</span> <span lang="en" dir="ltr" class="mw-content-ltr">Because it will be changed to default, when you update the MediaWiki.</span> <span lang="en" dir="ltr" class="mw-content-ltr">The recommended way to change the logo is to add a new logo image file and add that path to the LocalSettings.php.</span>}}

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Rendering menus with Mustache ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">All menus are structured in the same format ([[Special:MyLanguage/Manual:SkinMustache.php#PortletData|PortletData]]).</span>
<span lang="en" dir="ltr" class="mw-content-ltr">A generic Menu.mustache template partial, added to the same folder as skin.mustache can therefore be used to generate a menu.</span>

<syntaxhighlight lang="html">
<nav id="{{id}}" class="{{class}}" title="{{html-tooltip}}"
    aria-labelledby="{{id}}-label">
    <input type="checkbox" aria-labelledby="{{id}}-label" />
    <h3 id="{{id}}-label" {{{html-user-language-attributes}}}>{{label}}</h3>
    <div class="mw-portlet-body">
        <ul {{{html-user-language-attributes}}}>
            {{{html-items}}}
        </ul>
        {{{html-after-portal}}}
    </div>
</nav>
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
However, when using this partial you'll need to tell it ''which'' menu to generate HTML for.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Inside skin.mustache the following would render the languages and views menu.
</div>

<syntaxhighlight lang="html">
{{! Switch template context to data for all menus }}
{{#data-portlets}}
    {{! Access the menu called "languages" }}
    {{#data-languages}}
    {{>Menu}}
    {{/data-languages}}
    {{! Access the menu called "views" }}
    {{#data-views}}
    {{>Menu}}
    {{/data-views}}
{{/data-portlets}}

</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
====Rendering dropdown or sub-menus====
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">Skin designers can also use the Mustache syntax to create dropdown menus from the elements previously found in the sidebar of the Vector and MonoBook skins.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">This is a little trickier, however, but understanding the way the elements are stored can help.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">The first sidebar element — typically containing the main page link and other MediaWiki links, is rendered via the <code>{{#data-portlets-sidebar.data-portlets-first}}</code> call.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Subsequent menus, however, are stored in the <code>{{#data-portlets-sidebar.array-portlets-rest}}</code> array, and can be rendered by calling this.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">For example, one may use the following syntax:</span>
<syntaxhighlight lang="html">
	{{#data-portlets-sidebar.array-portlets-rest}}
    <div class="mw-dropdown-title"><span>{{label}}</span>
    <div class="dropdown-content">{{>Portlet}}</div></div>  
    {{/data-portlets-sidebar.array-portlets-rest}}
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
Which, when CSS is applied to hide "dropdown-content" until "mw-dropdown-title" is hovered over, thus creating a dropdown menu.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Disabling the table of contents ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">In MW 1.38, you can remove the table of contents from the article body and position it outside the content area.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">To disable the table of contents generation, add the following to skin.json:</span>
<syntaxhighlight lang="json">
{
    "ValidSkinNames": {
        "notocskin": {
            "class": "SkinMustache",
            "args": [
                {
                   "name": "notocskin",
                   "toc": false
                }
            ]
        }
    }
}
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
The array-sections template key can be used for rendering the table of contents.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== More examples ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
To see examples of template partials that can be used in your project, you can look through the examples in [https://github.com/jdlrobson/skins.wmflabs.org/tree/main/src/starter-template the Wikimedia skins labs].
</div>

<span id="Scripts_and_styles"></span>
== Скрипты и стили ==

<span id="Defaults"></span>
=== По умолчанию ===
<span lang="en" dir="ltr" class="mw-content-ltr">A skin at minimum requires a single style ResourceLoader module defined in your skin's skin.json file.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">It will look a bit like this:</span>

<syntaxhighlight lang="json">
 "ResourceModules": {
     "skins.example": {
         "class": "ResourceLoaderSkinModule",
         "features": { "normalize": true },
          "styles": [ "resources/skins.example.less" ]
      }
 },
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">The features key allows you to use useful boiler plate defaults for a variety of things including i18n and normalize which are documented in the [https://doc.wikimedia.org/mediawiki-core/master/php/classMediaWiki_1_1ResourceLoader_1_1SkinModule.html#details MediaWiki core php documentation].</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Features can be an array of keys (opt-in policy) or in MW 1.36 an associative array (opt-out policy, recommended).</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If you are not sure, please omit the features key to use the recommended defaults.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== CSS / LESS ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">The skin.json is a manifest of all the assets your skin uses.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Under the `ResourceModules` key you should find the style module for your skin listed under `skins.example`.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Here, under the "styles" key you can add LESS or CSS files.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">They will be loaded in the order they are listed.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">With LESS you can use {{cssi|@import}} statements in the same folder.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">More information about what's possible can be found in [[ResourceLoader/Developing_with_ResourceLoader|Developing with ResourceLoader]].</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
When using images you should be able to use relative URIs to access the image assets.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== MediaWiki Skin Variables ====
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">'''MediaWiki skin variables''' originally introduced in MW 1.35, [[phab:T332541|were  enabled for wide use]] since MW 1.41.</span><br>
<span lang="en" dir="ltr" class="mw-content-ltr">The list of values available is in sync with latest {{ll|Codex}} [https://doc.wikimedia.org/codex/latest/design-tokens/overview.html design tokens (demo site)].</span>

[[File:MediaWiki Skin Variables Architecture.png|alt=Skin variables architecture in MediaWiki|frameless|660x660px]]
* '''<span lang="en" dir="ltr" class="mw-content-ltr">Quickly implement design</span>''' – <span lang="en" dir="ltr" class="mw-content-ltr">For skin designers skin variables offer a way to quickly implement design choices by setting values in a flat list.</span> <span lang="en" dir="ltr" class="mw-content-ltr">Through them designers can change fundamental properties like typography (font family, font size, etc.), colors, breakpoints, borders, sizing, spacing or z-indexes.</span> <span lang="en" dir="ltr" class="mw-content-ltr">This easy to use list is grouped by CSS properties.</span> <span lang="en" dir="ltr" class="mw-content-ltr">It must be located in folder and file 'resources/mediawiki.less/mediawiki.skin.variables.less' for ResourceLoader to pick it up.</span> <span lang="en" dir="ltr" class="mw-content-ltr">The naming scheme follows the {{ll|CSS#Variable naming|MediaWiki variables naming convention}}.</span>
* '''<span lang="en" dir="ltr" class="mw-content-ltr">Neutral defaults</span>''' – <span lang="en" dir="ltr" class="mw-content-ltr">If a skin doesn't specify certain values, the system will fall back to use the defaults from MediaWiki's own 'mediawiki.skin.defaults.less'.</span> <span lang="en" dir="ltr" class="mw-content-ltr">Those values are representing a basic HTML look.</span>
* '''<span lang="en" dir="ltr" class="mw-content-ltr">Customize</span>''' – <span lang="en" dir="ltr" class="mw-content-ltr">While you can't modify the variable names, you could define additional ones in separate skin specific files.</span> <span lang="en" dir="ltr" class="mw-content-ltr">In every Less file, you can import the skin's values by only <code>@import 'mediawiki.skin.variables.less';</code></span>
* '''<span lang="en" dir="ltr" class="mw-content-ltr">Centralization benefits</span>''' – <span lang="en" dir="ltr" class="mw-content-ltr">All the variables definition for the Wikimedia default theme and all the naming is centralized in order to</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">Establish a consistent naming convention for clarity and uniformity</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">Ensure compatibility across various skins and extensions</span>
** <span lang="en" dir="ltr" class="mw-content-ltr">Provide insights into potential gaps or areas of improvement based on common usage patterns</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
Skin authors are encouraged to familiarize themselves with these updates to maximize the potential of their skins.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
====== Use in core, skins and extensions Less files ======
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
In order to use mediawiki.skin.variables.less variables aka design tokens you must include an import statement on top of your Less file.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Example usage:
</div>

<syntaxhighlight lang="less">
@import 'mediawiki.skin.variables.less';

/* Links */
a {
	color: @color-link;
}

a:visited {
	color: @color-link--visited;
}

a:active {
	color: @color-link--active;
}
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
An important detail is, that '''only variables specified in <code>mediawiki.skin.defaults.less</code> can be reassigned with skin specific values''' in the skin's <code>mediawiki.skin.variables.less</code> file.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Note that, Vector 2022, Vector legacy and MinervaNeue skins are using the two default Codex themes for Wikimedia user-interfaces, which are also represented on the Codex documentation site.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Over [https://codesearch-beta.wmcloud.org/search/?q=%27mediawiki.skin.variables.less%27&files=&excludeFiles=&repos= 45 different skins and extensions] use the skin variables in MW 1.41 already.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Responsive skins / adding a meta viewport ====
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
If you are building a responsive skin, make sure to use the responsive skin option when declaring your skin in skin.json.
</div>

<syntaxhighlight lang="json">
{
    "ValidSkinNames": {
        "my-responsive-skin": {
            "class": "SkinMustache",
            "args": [
                {
                   "name": "my-responsive-skin",
                   "responsive": true
                }
            ]
        }
    }
}
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
==== Making skins compatible with languages that are right-to-left (RTL) ====
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">The scripts of certain languages e.g. Hebrew are in right to left rather than left to right.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">This presents a problem for skin developers, where interfaces are flipped e.g. in Vector the sidebar is on the left rather than the right.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">In MediaWiki it's also possible to use a different language for the skin and the content.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">For example, in [[Special:Preferences]] you can set your language to Hebrew while retaining the content in English.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">Writing skins that work well in RTL is a large topic out of scope for this document, but if you need to test your skin in RTL you should update LocalSettings.php to change your content language:</span>

<syntaxhighlight lang="php">
$wgLanguageCode = "he";
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">As a skin developer you should keep in mind two things:</span>

* <span lang="en" dir="ltr" class="mw-content-ltr">Any CSS written for your skin will be flipped automatically via the [[Special:MyLanguage/CSSJanus|CSSJanus]] tool without any work required from you, however you may need to disable some of those transformations (see [[Special:MyLanguage/ResourceLoader/Architecture#Flipping|Flipping]]).</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">Any HTML you render that can be translated should be marked up with the [https://developer.mozilla.org/docs/Web/HTML/Global_attributes/dir dir HTML attribute]].</span> <span lang="en" dir="ltr" class="mw-content-ltr">For your convenience SkinMustache provides the html-user-language-attributes template variable which can be used like so:</span>

<syntaxhighlight lang="html">
<div
  {{{html-user-language-attributes}}}
>
</div>
</syntaxhighlight>

<span lang="en" dir="ltr" class="mw-content-ltr">for a user who has set their language to Hebrew in preferences, produces the following HTML:</span>

<syntaxhighlight lang="html">
<div
  dir="rtl" lang="he"
>
</div>
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Images ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">You can extend {{ll|Manual:$wgLogos}} with any data you choose to.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">This will allow site admins to configure images as they choose, but you must always conditionally render them.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
In cases where images must be hardcoded for some reason, and cannot use a CSS background-image or wgLogos, you will need to [[#Extending data|extend the data sent to the template]]
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== JavaScript ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">JavaScript code in skins, runs in an environment where you can rely on the `mw` and `jQuery` objects having been loaded.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">We recommend using [[ResourceLoader/Package_files]] which will allow you to require file assets.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
For information on the available API and libraries see [https://doc.wikimedia.org/mediawiki-core/master/js/ core JS documentation].
</div>

<span id="More_advanced"></span>
== Дополнительно ==
<span lang="en" dir="ltr" class="mw-content-ltr">More advanced information will provided on an as requested basis.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Please ask a question on the talk page to accelerate the addition of documentation!</span>

=== i18n ===
<span lang="en" dir="ltr" class="mw-content-ltr">Messages defined in i18n/en.json can be passed directly to your Mustache template by inclusion in skin.json.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Note, that you can use [https://github.com/wikimedia/mediawiki/blob/master/languages/i18n/en.json any messages defined inside MediaWiki core].</span>

{| class="wikitable"
|+
!skin.json
!i18n/en.json
!skin.mustache
|-
|<syntaxhighlight lang="json">
{
    "ValidSkinNames": {
        "mymustacheskin": {
            "class": "SkinMustache",
            "args": [
                {
                   "name": "mymustacheskin",
                   "messages": [
                        "createaccount"
                    ]
                }
            ]
        }
    }
}
</syntaxhighlight>
|<syntaxhighlight lang="json">
{
        "@metadata": {
                "authors": []
        },
        "skinname-mymustacheskin": "My Mustache Skin",
        "mymustacheskin-hello": "Hello"
}
</syntaxhighlight>
|<syntaxhighlight lang="html">
<div>
    {{msg-mymustacheskin-hello}} <!-- prints hello in the current language -->
</div>
</syntaxhighlight>
|}

<div lang="en" dir="ltr" class="mw-content-ltr">
=== Extending data ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The data available is documented on [[Special:MyLanguage/Manual:SkinMustache.php|SkinMustache.php]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
If you need to add additional data for rendering inside your skin's template that cannot be served by messages (as in the i18n section) e.g. raw HTML or complex data structures you must use a dedicated PHP class and extend the SkinMustache::getTemplateData method.
</div>

<syntaxhighlight lang="php">
<?php

class MySkin extends SkinMustache {
    
    /**
     * Extends the getTemplateData function to add a template key 'html-myskin-hello-world'
     * which can be rendered in skin.mustache using {{{html-myskin-hello-world}}}
     */
    public function getTemplateData() {
        $data = parent::getTemplateData();
        $data['html-myskin-hello-world'] = '<strong>Hello world!</strong>'; // or $this->msg('msg-key')->parse();
        return $data;
    }
}
</syntaxhighlight>

<span id="Default_styling_via_the_ResourceLoaderSkinModule_class"></span>
=== Стиль по умолчанию через класс ResourceLoaderSkinModule ===
<span lang="en" dir="ltr" class="mw-content-ltr">All skins should define a single style module with the class [[Special:MyLanguage/Manual:ResourceLoaderSkinModule|ResourceLoaderSkinModule]].</span>
<span lang="en" dir="ltr" class="mw-content-ltr">The module defines various default styles to take care of MediaWiki internals.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If you want, you can disable these features and provide your own styles.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Define features as an empty object to tie yourself into the recommended MediaWiki defaults.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">A {{ll|Manual:ResourceLoaderSkinModule|list of support features}} is provided in our docs.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">Example ResourceLoaderSkinModule that disables the logo feature but enables several others:</span>

<syntaxhighlight lang="json">
{
    "skins.vector.styles": {
                        "class": "ResourceLoaderSkinModule",
                        "features": {
                                "normalize": true,
                                "elements": true,
                                "content": true,
                                "logo": false,
                                "interface": true,
                                "legacy": true
                        },
                        "targets": [
                                "desktop",
                                "mobile"
                        ],
                        "styles": [ "resources/skins.vector.styles/skin.less" ]
                }
    }
}
</syntaxhighlight>

<span id="Integrating_with_other_extensions"></span>
=== Интеграция с другими расширениями ===
<span lang="en" dir="ltr" class="mw-content-ltr">Extensions should integrate with you, not the other way round! Try to forget about extensions when writing your skin.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">[[User:Jdlrobson/Skins for extension developers|Skins for extension developers]] is provided for extension developers to ensure they get the best compatibility.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">The starter templates in [[#Getting_started|Getting_started]] will render all possible UI elements.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If you omit certain pieces of data you may break support with extensions.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">For certain extensions you may want to tweak the styles of the default UI elements, notably [[Special:MyLanguage/Extension:Echo|Extension:Echo]].</span>
<span lang="en" dir="ltr" class="mw-content-ltr">To do this you will need to read {{ll|Manual:$wgResourceModuleSkinStyles}}.</span>

<span id="Changing_menu_content"></span>
=== Изменение меню ===
<span lang="en" dir="ltr" class="mw-content-ltr">The composition of menus can be changed by using hooks.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">For example [https://github.com/wikimedia/Vector/blob/master/includes/Hooks.php#L137 in Vector], the [[Special:MyLanguage/Manual:Hooks/SkinTemplateNavigation|SkinTemplateNavigation hook]] is used to relocate the watch star icon.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">When doing this, remember to check the skin being operated on, to avoid side effects in other skins.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== I want to change elements in the head of the HTML page ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">Skin developers should not concern themselves with modifying anything in the HEAD of a document.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Modifications of the HEAD are better served via extensions and configuration inside LocalSettings.php.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">The following links may be helpful:</span>

* {{ll|Manual:$wgAppleTouchIcon}}
* {{ll|Manual:$wgFavicon}}
* {{ll|Manual:Hooks/OutputPageBodyAttributes}}
* {{ll|Manual:$wgSkinMetaTags}}

<div lang="en" dir="ltr" class="mw-content-ltr">
=== I am writing an extension that needs to style itself differently depending on the skin ===
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">Extensions can make use of '''skin styles''' to ship skin-specific styles using the skinStyles key.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">See {{ll|Manual:$wgResourceModuleSkinStyles}}.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== VisualEditor compatibility ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
To ensure compatibility with VisualEditor please see [[Extension:VisualEditor/Skin requirements|these guidelines]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Building skins for 1.35 ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">In 1.35 support for building skins was not as straightforward as in 1.36.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If you wish to build a skin for 1.35, using template data provided in 1.36, you  will need to extend the SkinMustache  PHP class.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">[[gerrit:c/mediawiki/skins/Example/+/655299|A polyfill for the Example skin is provided]].</span>

<span id="Your_feedback_is_important"></span>
== Важна ваша обратная связь ==
<span lang="en" dir="ltr" class="mw-content-ltr">If something is not easy, we'd like to make it easier, so your feedback is important.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If you run into problems, then please [[Special:MyLanguage/How to report a bug|file a bug report]] in the [[phab:project/view/4795/|MediaWiki core skin architecture project]] in [[Special:MyLanguage/Phabricator|Phabricator]], and we'll try and find an elegant solution.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">Please feel free to ask a question on the talk page.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">There is no such thing as a stupid question.</span>

[[Category:Skinning{{#translation:}}]]