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.