dev

Este artículo es una guía sobre la instalación de código alrededor de Fandom.

Importes CSS en Fandom

En Fandom, el CSS @import puede importar eficientemente una colección de hojas de estilo a:

Considere los ejemplos abajo.

Ejemplos del uso de @import

A la izquierda hay un ejemplo de varios importes usando el clásico @import. A la derecha está cómo se pueden fusionar en un solo comando, que las minimizará, aumentando así el rendimiento:

Multilples importes — desordenado y lento
@import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
@import url("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
/* CSS */
Un importe — limpio y eficiente
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/* CSS */

Note: That, however, would not work well for some stylesheets which import other stylesheets in their turn. Those "parent" stylesheets may break if combined with other stylesheets in the same @import statement.

Reglas de colocación del CSS @import

Las reglas de importación de CSS deben ser declaradas al principio de la página, antes de cualquier otra regla. De lo contrario no funcionarán. Aquí hay un ejemplo de la colocación correcta:

Colocación incorrecta
/* CSS */
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
Colocación correcta
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/* CSS */

También es posible importar CSS usando páginas de JavaScript a través de importArticles (leer más).

Importes de JavaScript en Fandom

La declaración importArticles está diseñada para importar scripts por lotes de manera eficiente:

Si ha estado instalando varios scripts diferentes, su archivo JavaScript probablemente ha acumulado declaraciones de importe innecesarias.

Ejemplos del uso de importArticles

Si tu archivo JavaScript tiene varias líneas de código que dicen importScript, importScriptPage, o importArticles, ¡puedes combinarlas! Considere el ejemplo siguiente. A la izquierda hay un ejemplo de cómo se ve actualmente tu archivo JavaScript. A la derecha está cómo podrías mejorar ese código.

Multilples importes — desordenado y lento
importScriptPage('Script1.js', 'dev');
importScript('MediaWiki:Script2.js');
importArticle({
  type: 'script',
  article: 'u:dev:Script3/code.js'
});
importScriptPage('Page1.js', 'wiki');
importScriptPage('Page2.js', 'wiki');
Un importe — limpio y eficiente
importArticles({
    type: 'script',
    articles: [
        'u:dev:Script1.js',
        'MediaWiki:Script2.js',
        'u:dev:Script3/code.js',
        'u:wiki:Page1.js',
        'u:wiki:Page2.js'
    ]
});

Notas sobre importes JavaScript

Nota: En este ejemplo, preste mucha atención a la colocación de las comas y otros signos de puntuación. Para las personas que no están familiarizadas con la programación (¡e incluso los que lo están!), un error común al escribir código es borrar, olvidar o extraviar accidentalmente símbolos críticos como comas o comillas. Esto puede causar un error de sintaxis que rompe el código. Siga cuidadosamente la convención que se muestra aquí al usar importArticles.

Otro método consiste en utilizar MediaWiki:ImportJS. ¡Pero hay mucho más sobre importArticles que sólo esto!

HTML y wikitexto en Fandom

Cómo cambiar al modo fuente y hacer que tu código se vea más limpio.

Cómo cambiar al modo fuente y hacer que tu código se vea más limpio.

El modo fuente está diseñado para manejar códigos HTML complejos en un artículo, permitiendo reducir la cantidad de código no deseado que a veces se añade automáticamente. El modo fuente es la mejor manera de editar si se utilizan plantillas, o etiquetas HTML como <span>, <p>, y <div>.

Aquí hay algunos consejos útiles:

See also