Manual:How to make a MediaWiki skin/es

¡Crear una apariencia es una excelente manera de familiarizarse con el funcionamiento interno de MediaWiki y de iniciar sus contribuciones al proyecto Wikimedia! Si estás familiarizado con las tecnologías front-end de CSS, JavaScript y JSON, ¡puedes crear una apariencia de MediaWiki! No es necesario saber PHP, pero puede ser útil si deseas hacer algo avanzado.

Aunque no es esencial, te ayudará si estás familiarizado con LESS CSS. Este tutorial asume que has instalado una versión funcional de MediaWiki y estás ejecutando la versión de desarrollo actual, si no es así, se recomienda que lo haga primero.

Si usted tiene una apariencia existente utilizando PHP BaseTemplate, esta guía no es para ti. Por favor, consulta Manual:Cómo hacer un skin para MediaWiki/Migrar skins basadas en SkinTemplate a SkinMustache en su lugar.

Preparación
El desarrollo de skins será mucho más fácil si se está familiarizado con las plantillas Mustache.

Como mínimo, debe estar familiarizado con los siguientes conceptos básicos de Mustache que se describen en el siguiente ejemplo:

Un skin es responsable de la representación del contenido visible para el usuario: el HTML dentro de la etiqueta BODY. Está restringido para editar cualquier cosa dentro del HEAD. El código se generará automáticamente para el skin, de modo que éste pueda centrarse en la presentación. Si necesita modificar el HEAD esto se considera fuera del alcance de la skin, por favor use Hooks, extensiones o configuración para hacerlo, vea las Preguntas Frecuentes para las mejores prácticas sobre cómo hacerlo.



Primeros pasos
Para comenzar a crear tu primera apariencia, te recomendamos dos opciones.



Opción 1 - Bifurca la apariencia de ejemplo
La apariencia de ejemplo https://github.com/wikimedia/mediawiki-skins-Example proporciona los elementos esenciales para la implementación de una apariencia. Clona el repositorio en tu carpeta de apariencias asegurándote de que la carpeta se llame "Example" y agrega lo siguiente a tu LocalSettings.php:

Si todo va de acuerdo al plan, tu apariencia debería estar disponible en la página Special:Preferences de tu wiki.



Opción 2 - Usa el laboratorio de apariencias
La herramienta de Laboratorio de Apariencias te permite configurar una apariencia con CSS y plantillas básicas. Una vez que te sientas cómodo, puede hacer clic en "download as ZIP" (descargar como ZIP), que compilará el código repetitivo necesario para tu apariencia. Ojalá que el repositorio resultante sea fácil de navegar. Cuando hayas descargado el ZIP, colócalo en tu carpeta de apariencias de MediaWiki y actualiza LocalSettings.php con lo siguiente:

Si todo va de acuerdo al plan, tu apariencia debería estar disponible en la página Special:Preferences de tu wiki.



Opción 3 - Desde la línea de comandos
Cuando hayas descargado el ZIP colócalo en tu carpeta de skins de MediaWiki y actualiza LocalSettings.php con lo siguiente:



¡Hazlo saber!
Hacer una apariencia con otras personas será más divertido y también mucho más fácil. Una vez que tengas algo utilizable, considera publicarlo en GitHub o. Once the code is publicly available, you should [ create a skin page] (make sure you change the title!) to let people know you are open for collaboration!

Configurar una página wiki tiene muchos otros beneficios. You'll be able to handle bug reports in Phabricator or GitHub issues and receive patches from other volunteers in the MediaWiki community. Alguien también debería poder ayudarte a configurar la traducción.

Mustache
In 1.35 we added support for Mustache in skins. We found using Mustache to be very helpful in the development of the Skin:Minerva and Skin:Vector skins as it allows you to separate data from presentation. Mustache partials can be used to reuse templates. To use a partial Partial.mustache in MediaWiki, simply add them to the folder you are working in and reference them using in the master template 'skin.mustache'.

The data sent to Mustache templates is relatively flexible. If something is missing, you can use PHP to add data by extending the ::getTemplateData function.

The SkinJson skin can be added to a MediaWiki development instance, to inspect the data available to skins. 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.

The data available, and in which MediaWiki versions it is available is documented on SkinMustache.php.



Haz tu apariencia traducible (i18n)
In skin.json under ValidSkinNames, you can use the `messages` option to define translatable message keys. These keys should correspond to entries inside the i18n/en.json folder. Once registered for the skin, these will be available in your template with a prefix.

For example in the example below, the message "sitetitle" can be rendered in a Mustache template using:

See Localisation for more information on why this is important.

Rendering template partials
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. 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. These files must exist in the same folder as the skin.mustache file or a subfolder of the directory containing skin.mustache.

Template partials are a great way to break up your skin to make it more readable. No template partials are predefined and available by default, however you can look at existing skins using SkinMustache for inspiration.

Read more about Mustache template partials.

Logo.mustache
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.

From the code block mentioned above, the following line is responsible to show the logo `icon`:

This line assumes that, there is a key  in the array. So in your LocalSettings.php file, if there is a line similar as, then the logo/icon image will be displayed. The default MediaWiki  exports a   key in the  array.

So to show the logo you need to update the LocalSettings.php and add a key.

Rendering menus with Mustache
All menus are structured in the same format (PortletData). A generic Menu.mustache template partial, added to the same folder as skin.mustache can therefore be used to generate a menu. However, when using this partial you'll need to tell it which menu to generate HTML for.

Inside skin.mustache the following would render the languages and views menu.

Rendering dropdown or sub-menus
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. This is a little trickier, however, but understanding the way the elements are stored can help.

The first sidebar element — typically containing the main page link and other MediaWiki links, is rendered via the  call. Subsequent menus, however, are stored in the  array, and can be rendered by calling this.

For example, one may use the following syntax: Which, when CSS is applied to hide "dropdown-content" until "mw-dropdown-title" is hovered over, thus creating a dropdown menu.

Disabling the table of contents
In MW 1.38, you can remove the table of contents from the article body and position it outside the content area. To disable the table of contents generation, add the following to skin.json:

The array-sections template key can be used for rendering the table of contents.

More examples
To see examples of template partials that can be used in your project, you can look through the examples in the Wikimedia skins labs.



Valores predeterminados
A skin at minimum requires a single style ResourceLoader module defined in your skin's skin.json file. It will look a bit like this:

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 MediaWiki core php documentation. Features can be an array of keys (opt-in policy) or in MW 1.36 an associative array (opt-out policy, recommended). If you are not sure, please omit the features key to use the recommended defaults.

CSS / LESS
The skin.json is a manifest of all the assets your skin uses. Under the `ResourceModules` key you should find the style module for your skin listed under `skins.example`. Here, under the "styles" key you can add LESS or CSS files. They will be loaded in the order they are listed. With LESS you can use statements in the same folder. More information about what's possible can be found in Developing_with_ResourceLoader.

When using images you should be able to use relative URIs to access the image assets.

MediaWiki Skin Variables
MediaWiki skin variables have been originally introduced in MW 1.35, recent development enabled them to work for wide use since MW 1.41. The available value list is in sync with latest Codex design tokens (demo site).


 * Quickly implement design – For skin designers skin variables offer a way to quickly implement design choices by setting values in a flat list. Through them designers can change fundamental properties like typography (font family, font size, etc.), colors, breakpoints, borders, sizing, spacing or z-indizes. This straightforward list is grouped by CSS properties. It must be located in folder and file 'resources/mediawiki.less/mediawiki.skin.variables.less' in order to be picked up by ResourceLoader. The naming scheme follows the MediaWiki variables naming convention.
 *  Neutral defaults  – If a skin doesn't specify certain values, the system will automatically use the defaults from MediaWiki's own 'mediawiki.skin.defaults.less'. Those values are representing a basic HTML look.
 *  Customize  – While you can't modify the variable names, you could define additional ones in separate skin specific files. In every Less file, you can import the skin's values by only
 *  Centralization benefits  – All the variables definition for the Wikimedia default theme and all the naming is centralized in order to
 * Establish a consistent naming convention for clarity and uniformity
 * Ensure compatibility across various skins and extensions
 * Provide insights into potential gaps or areas of improvement based on common usage patterns

Skin authors are encouraged to familiarize themselves with these updates to maximize the potential of their skins.

An important detail is, that only variables specified in 'mediawiki.skin.defaults.less' can be reassigned with skin specific values in the skin's 'mediawiki.skin.variables.less' file.

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.

Over 45 different skins and extensions use the skin variables in MW 1.41 already.

Responsive skins / adding a meta viewport
If you are building a responsive skin, make sure to use the responsive skin option when declaring your skin in skin.json.

Making skins compatible with languages that are right-to-left (RTL)
The scripts of certain languages e.g. Hebrew are in right to left rather than left to right. 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.

In MediaWiki it's also possible to use a different language for the skin and the content. For example, in Special:Preferences you can set your language to Hebrew while retaining the content in English.

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:

As a skin developer you should keep in mind two things:


 * Any CSS written for your skin will be flipped automatically via the CSSJanus tool without any work required from you, however you may need to disable some of those transformations (see Flipping).
 * Any HTML you render that can be translated should be marked up with the dir HTML attribute]. For your convenience SkinMustache provides the html-user-language-attributes template variable which can be used like so:

for a user who has set their language to Hebrew in preferences, produces the following HTML:

Images
You can extend with any data you choose to. This will allow site admins to configure images as they choose, but you must always conditionally render them.

In cases where images must be hardcoded for some reason, and cannot use a CSS background-image or wgLogos, you will need to extend the data sent to the template

JavaScript
JavaScript code in skins, runs in an environment where you can rely on the `mw` and `jQuery` objects having been loaded. We recommend using ResourceLoader/Package_files which will allow you to require file assets.

For information on the available API and libraries see core JS documentation.



Más avanzado
More advanced information will provided on an as requested basis. Please ask a question on the talk page to accelerate the addition of documentation!

i18n
Messages defined in i18n/en.json can be passed directly to your Mustache template by inclusion in skin.json. Note, that you can use any messages defined inside MediaWiki core.

Extending data
The data available is documented on SkinMustache.php.

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.

Default styling via the ResourceLoaderSkinModule class
All skins should define a single style module with the class ResourceLoaderSkinModule. The module defines various default styles to take care of MediaWiki internals. If you want, you can disable these features and provide your own styles. Define features as an empty object to tie yourself into the recommended MediaWiki defaults. A list of support features is provided in our docs.

Example ResourceLoaderSkinModule that disables the logo feature but enables several others:



Integración con otras extensiones
Extensions should integrate with you, not the other way round! Try to forget about extensions when writing your skin. Skins for extension developers is provided for extension developers to ensure they get the best compatibility. The starter templates in Getting_started will render all possible UI elements. If you omit certain pieces of data you may break support with extensions.

For certain extensions you may want to tweak the styles of the default UI elements, notably Extension:Echo. To do this you will need to read.



Cambios del contenido del menú
The composition of menus can be changed by using hooks. For example in Vector, the SkinTemplateNavigation hook is used to relocate the watch star icon. When doing this, remember to check the skin being operated on, to avoid side effects in other skins.

I want to change elements in the head of the HTML page
Skin developers should not concern themselves with modifying anything in the HEAD of a document. Modifications of the HEAD are better served via extensions and configuration inside LocalSettings.php.

The following links may be helpful:



I am writing an extension that needs to style itself differently depending on the skin
Extensions can make use of skin styles to ship skin-specific styles using the skinStyles key. See.

Building skins for 1.35
In 1.35 support for building skins was not as straightforward as in 1.36. 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. A polyfill for the Example skin is provided.



Tus comentarios son importantes
If something is not easy, we'd like to make it easier, so your feedback is important. If you run into problems, then please file a bug report in the mediawiki core skin architecture project in Phabricator, and we'll try and find an elegant solution.

Please feel free to ask a question on the talk page. There is no such thing as a stupid question.