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:
- minimizarlas y aumentar el rendimiento
- verse más limpio
- caché de manera consistente
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:
- para acelerar el rendimiento,
- hacer que el código parezca más limpio,
- combinar varias solicitudes HTTP en una sola transferencia de datos,
- y permitir que múltiples scripts se carguen y ejecuten más rápido
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.
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:
- Cuando veas
en el área de edición del modo visual, se refiere a una plantilla, o contenido con código que no está soportado o es demasiado complejo para que el editor visual lo maneje. En el modo fuente verás este contenido en su totalidad. - Cuando veas
en el área de edición del modo visual, se refiere a un comentario. En el modo fuente, verá este contenido como <!-- -->. - MediaWiki tiene un lenguaje especial llamado wikitexto para facilitar la edición. Este lenguaje está soportado en modo visual y no se romperá tan fácilmente como el HTML.
- Algunas etiquetas HTML como
<u>o<s>son soportadas en el modo visual. - Puedes editar plantillas sólo en el modo de fuente.