Este artigo é um guia de instalação de código no Fandom.
Importações de CSS no Fandom[]
No Fandom, o CSS @import pode importar com eficiência uma coleção de folhas de estilo para:
- minificá-las e aumentar o desempenho
- parecer mais limpo
- cache de forma consistente
Considere os exemplos abaixo.
Exemplos de uso de @import[]
À esquerda, há um exemplo de várias importações usando a regra @import clássica. À direita está como você pode mesclá-las em um único comando, que irá minificá-las, aumentando assim o desempenho:
- Várias importações - bagunçado e 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 */
- Uma importação - limpo e 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.
Posicionamento das regras de CSS @import[]
As regras de importação de CSS devem ser declaradas no início da página, antes de qualquer outra regra. Caso contrário, elas não funcionarão. Aqui está um exemplo do posicionamento correto:
- Posicionamento errado
-
/* CSS */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
- Posicionamento correto
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* CSS */
Também é possível importar CSS usando páginas de JavaScript através de importArticles (saiba mais).
Importações de JavaScript no Fandom[]
A declaração importArticles foi projetada para importar scripts em massa com eficiência:
- para acelerar o desempenho,
- fazer com que seu código pareça mais limpo,
- combinar várias solicitações HTTP em uma única transferência de dados,
- e permitir que vários scripts sejam carregados e executados mais rapidamente
Se você esteve instalando vários scripts diferentes, seu arquivo de JavaScript provavelmente acumulou declarações de importação desnecessárias.
Exemplos de uso de importArticles[]
Se o seu arquivo de JavaScript tiver várias linhas de código que dizem importScript, importScriptPage ou importArticles, você pode combiná-las! Considere o exemplo abaixo. À esquerda está um exemplo de como seu arquivo de JavaScript pode estar atualmente. À direita está como você pode melhorar esse código.
- Várias importações - bagunçado e 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');
- Uma importação - limpo e 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 como importar JavaScript[]
Nota: Neste exemplo, preste muita atenção ao posicionamento das vírgulas e outros sinais de pontuação. Para as pessoas que não estão familiarizadas com programação (e até mesmo aquelas que estão!), um erro comum ao escrever código é acidentalmente excluir, esquecer ou colocar no lugar errado símbolos críticos como vírgulas ou aspas. Isso pode causar um erro de sintaxe que quebra o código. Siga cuidadosamente a convenção mostrada aqui ao usar importArticles.
Uma outra abordagem é usar MediaWiki:ImportJS. Mas há muito mais para explorar de importArticles do que apenas isso!
Marcações HTML e wikitexto no Fandom[]
Como mudar para o modo fonte e fazer seu código parecer mais limpo.
O modo fonte é projetado para lidar com códigos HTML complexos em um artigo, permitindo reduzir a quantidade de código indesejado que às vezes é adicionado automaticamente. O modo fonte é a melhor maneira de editar se você estiver usando predefinições ou tags HTML como <span>, <p> e <div>.
Aqui estão algumas dica úteis:
- Quando você ver
na área de edição do modo visual, isso se refere a uma predefinição ou conteúdo com código que não é suportado ou muito complexo para o editor visual lidar. No modo fonte, você verá este conteúdo na íntegra. - Quando você ver
na área de edição do modo visual, isso se refere a um comentário. No modo fonte, você verá este conteúdo como <!-- -->. - O MediaWiki possui uma linguagem especial chamada wikitexto para tornar a edição mais fácil. Esta linguagem é suportada no modo visual e não irá quebrar tão fácil quanto HTML.
- Algumas tags HTML como
<u>ou<s>são suportadas no modo visual. - Você só pode editar predefinições no modo fonte.
