Bu madde, Fandom çevresinde kod yükleme hakkında bir kılavuzdur.
Fandom'da CSS içe aktarma[]
Fandom'da, CSS @import bir stil sayfası koleksiyonunu aşağıdakilere verimli bir şekilde içe aktarabilir:
- onları küçültün ve performansı artırın
- daha temiz görün
- sürekli önbellek
Aşağıdaki örnekleri düşünün.
@import kullanımına örnekler[]
Solda, klasik @import kuralını kullanan birkaç içe aktarma örneği vardır. Sağ tarafta, onları küçültecek ve böylece performansı artıracak tek bir komutta nasıl birleştirebileceğiniz yer almaktadır:
- Birden çok içe aktarma, dağınık ve yavaş
-
@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 */
- Tek içe aktarma, temiz ve verimli
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* CSS */
Not: Ancak bu, sırayla diğer stil sayfalarını içe aktaran bazı stil sayfaları için iyi çalışmaz. Bu "üst" stil sayfaları, aynı @import ifadesinde diğer stil sayfaları ile birleştirilirse bozulabilir.
CSS @import kurallarının yerleştirilmesi[]
CSS içe aktarma kuralları, diğer kurallardan önce sayfanın başında belirtilmelidir. Aksi halde çalışmazlar. İşte doğru yerleşime bir örnek:
- Yanlış yerleştirme
-
/* CSS */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
- Doğru yerleştirme
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* CSS */
JavaScript sayfalarını kullanarak CSS'yi importArticles aracılığıyla içe aktarmak da mümkündür (daha fazlasını okuyun).
Fandom'da JavaScript içe aktarma[]
importArticles ifadesi içe aktarma betiklerini verimli bir şekilde toplu halde toplamak için tasarlanmıştır:
- performansı hızlandırmak için,
- kodunuzun daha temiz görünmesini sağlayın,
- birden çok HTTP isteğini tek bir veri aktarımında birleştirin,
- ve birden çok komut dosyasının daha hızlı yüklenmesine ve yürütülmesine izin verin
Birkaç farklı betik kuruyorsanız, JavaScript dosyanız muhtemelen gereksiz içe aktarma ifadeleri biriktirmiştir.
importArticles kullanımına örnekler[]
JavaScript dosyanızda importScript, importScriptPage veya importArticles diyen birkaç kod satırı varsa, bunları birleştirebilirsiniz! Aşağıdaki örneği düşünün. Solda, JavaScript dosyanızın şu anda nasıl görünebileceğinin bir örneği bulunmaktadır. Sağda, bu kodu nasıl geliştirebileceğiniz yer almaktadır.
- Birden çok içe aktarma, dağınık ve yavaş
-
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');
- Tek içe aktarma, temiz ve verimli
-
importArticles({ type: 'script', articles: [ 'u:dev:Script1.js', 'MediaWiki:Script2.js', 'u:dev:Script3/code.js', 'u:wiki:Page1.js', 'u:wiki:Page2.js' ] });
JavaScript'i içe aktarma hakkında notlar[]
Not: Bu örnekte, virgüllerin ve diğer noktalama işaretlerinin yerleştirilmesine çok dikkat edin. Programlamaya aşina olmayan (ve hatta bilenler!) için, kod yazarken yapılan yaygın bir hata, virgül veya tırnak işaretleri gibi kritik simgeleri yanlışlıkla silme, unutma veya yanlış yerleştirme. Bu, kodu bozan bir sözdizimi hatasına neden olabilir. importArticles kullanırken burada gösterilen kuralı dikkatle izleyin.
Diğer bir yaklaşım, MediaWiki:ImportJS kullanmaktır. Ancak importArticles için bundan daha fazla çok daha fazlası var!
Fandom'da HTML ve vikimetin işaretlemesi[]
Kaynak moduna nasıl geçilir ve kodunuzun daha temiz görünmesini sağlayın.
Kaynak modu, bir maddedeki karmaşık HTML kodlarını işlemek için tasarlanmıştır ve bazen otomatik olarak eklenen istenmeyen kod miktarını azaltmaya olanak tanır. Kaynak modu, şablonlar veya <span>, <p> ve <div> gibi HTML etiketleri kullanıyorsanız düzenlemenin en iyi yoludur.
İşte bazı faydalı ipuçları:
- Görsel modun düzenleme alanında
ifadesini gördüğünüzde, bu bir şablona atıfta bulunur. - Görsel modun düzenleme alanındaki içeriğin üzerinde
gördüğünüzde, desteklenmeyen veya görsel düzenleyicinin işleyemeyeceği kadar karmaşık bir kod içeriyor. Kaynak modunda, bu içeriği tam olarak göreceksiniz. - Görsel modun düzenleme alanında
ifadesini gördüğünüzde, bu bir yoruma atıfta bulunur. Kaynak modunda, bu içeriği <!-- -->olarak göreceksiniz. - MediaWiki'nin düzenlemeyi kolaylaştırmak için vikimetin adlı özel bir dili vardır. Bu dil görsel modda desteklenir ve HTML kadar kolay bozulmaz.
<u>veya<s>gibi bazı HTML etiketleri görsel modda desteklenir.- Şablonlar görsel düzenlemeye sahip değildir ve bunları yalnızca kaynak modunda düzenleyebilirsiniz (özel Bilgi Kutusu Oluşturucu dışında).
