Bazı özel kodlar topluluğunuz için veya kendi hesabınız için oluşturmak mı? Bu sayfa, size bazı yararlı ayrıntılar sunmak için genel bakış sayfamızdan biraz daha ileri gider.

Başlamadan önce, özelleştirme için hangi sayfaların kullanılabileceğini gözden geçirmek isteyeceksiniz. Topluluğunuz için bir JavaScript yazmayı planlıyorsanız, Fandom Desteği ile iletişime geçerek açılmasını istemeniz ve JavaScript inceleme sürecini öğrenmeniz gerekir.

Sayfaya özel özelleştirme

CSS

Maddelerdeki <body> HTML öğesi, sayfanın adını temel alan benzersiz bir tanımlayıcı içerir. Örneğin, bu yardım sayfasında, sınıf .page-Yardım_Gelişmiş_CSS_ve_JS şeklindedir.

Genel biçim .page-[madde adı] şeklindedir, burada boşluklar, iki nokta üst üste ve diğer özel karakterler alt çizgilerle değiştirilir.

JavaScript

MediaWiki:Common.js sayfasında, JavaScript'i belirli sayfalara uygulamak için bir anahtar kullanın:

switch (mw.config.get('wgPageName')) {
    case 'sayfa adı':
        // Buradaki JS "sayfa adı" ile uygulanacaktır
        break;
    case 'başka bir sayfa':
        // Buradaki JS "başka bir sayfa" ile uygulanacaktır
        break;
}

CSS ve JS'yi belirli topluluklara uygulama

Kişisel CSS'nizde, hesabınızın belirli vikilere bakışını şekillendirmenize izin verecek diğer CSS seçicilerin önüne bir sınıf ekleyebilirsiniz.

Bu sınıf, bir topluluğun veritabanı adını temel alır, URL'ye değil, genellikle aynı olan ancak her zaman aynı değildir. Biçim şu şekildedir:

.wiki-[veritabanı adı]

veya İngilizce olmayan bir viki ise:

.wiki-[dil kodu][veritabanı adı]

Örneğin, Sithpedi'nin arka planının bir kısmının size kırmızı görünmesini istiyorsanız, bunu global.css sayfanıza ekleyin:

.wiki-starwars #WikiaMainContent { background-color:red; }

JavaScript için, belirli bir topluluğu tanımlamak için wgDBname kullanılabilir.

Yükleme sırası

Hem CSS hem de JS için genel yükleme sırası şöyledir:

  1. Fandom'un temel kodu
  2. yerel topluluk kodu
  3. kişisel kodu

Her seviyede, yükleme sırası önce Common, ardından Wikia şeklindedir. Bu, Common.css'de .class { color: red }, ancak Wikia.css'de .class { color: green } dediyseniz, .class yeşil olacaktır. Kişisel CSS en son olduğu için, oraya ne koyarsanız koyun her zaman yerel vikinin seçimlerini geçersiz kılar.

Ayrıca CSS içe aktarıyorsanız veya yazı tipleri iseniz ve vikinizde hem Common.css hem de Wikia.css varsa, içe aktarımların Common.css sayfasının en üstünde olması gerekir.

JS için, yükleme sırası özellikle en iyi nasıl MediaWiki:ImportJS kullanılacağı düşünüldüğünde önemlidir. ImportJS en son yüklendiği için, bir Dev Wiki betik özelleştirmenizi Common.js veya Wikia.js ile koyabilirsiniz, ancak betiğinin kendisinin ImportJS'de içe aktarılmasını sağlayabilirsiniz. Tam JS yükleme sırası şöyledir:

  1. Common.js
  2. Wikia.js
  3. Common.js aracılığıyla içe aktarılan betiklef
  4. Wikia.js aracılığıyla içe aktarılan betiklef
  5. ImportJS

Son olarak, bariz olanı hatırlayın: sayfalar yukarıdan aşağıya yüklenir. Bu, bir sayfanın üst kısmında yapılan bildirimlerin, alttakiler tarafından geçersiz kılınabileceği anlamına gelir.

CSS'de !important

CSS yükleme sıralamaları nedeniyle, bir CSS kuralının uygulandığından emin olmak için bazen !important özelliğini kullanmanız gerekebilir. Ancak !important mümkün olduğunda belirli (hatta aşırı spesifik) CSS seçiciler kullanılarak kaçınılmalıdır.

Önbelleğe alma sorunları

İnternetten indirdiğiniz her dosya önbellek alır. Normalde bu harika çünkü hem kendi cihazınız hem de Fandom sunucuları için trafiği azaltır, ancak tasarım değişikliklerini test etmek söz konusu olduğunda sorun olabilir. Siz önbelleğinizi atlayın, değişikliklerinizin etkili olması biraz zaman alabilir.

Önbelleğinizi atlamak işe yaramazsa, herhangi bir sayfanın URL'sinin sonuna ?debug=1 ekleyerek kodunuzda hata ayıklamayı deneyebilirsiniz. Kodunuzda hata ayıklamak, kodun son eklenen betiklerin ve/veya stil sayfalarının yüklenmesini neredeyse %100 garanti edeceği anlamına gelir.

Popüler JavaScript parçacıkları

Yararlı bulabileceğiniz veya denemek isteyebileceğiniz bazı betikleri hakkında fikir edinmek için, Fandom Developers Wiki'deki JS Geliştirmelerinin listesine bakın.

Yinelenen JavaScript

Birçok betik, aynı sayfada birden çok kez çalıştırılırsa sorun yaşayabilir. Kodu öyle bir şekilde yazdığınızdan emin olun ki, belirli bir kod parçası yalnızca bir kez çalıştırılır. Aynı JS'yi birden çok dosyaya yapıştırmaktan kaçının, çünkü bu muhtemelen sizin ve diğer ziyaretçiler için çelişecek ve kafa karıştırıcı hatalara neden olacaktır.

CSS/JS'yi geçici olarak devre dışı bırakma

Özel CSS ve JS, aşağıdaki komutlar kullanılarak geçici olarak devre dışı bırakılabilir.

Komutlar URL'nin sonuna eklenmelidir (örnek: https://community.fandom.com/tr/wiki/%C3%96zel:Rastgele?usesitecss=0. [Aşağıdaki örnek site CSS'sini devre dışı bırakır]).

Birden fazla komut gerekiyorsa, soru işareti (?) yerine, ikinci, üçüncü ve dördüncü komutlar için bir ve işareti (&) koyun (olması durumunda) (örnek: https://community.fandom.com/tr/wiki/%C3%96zel:Rastgele?usesitecss=0&useuserjs=0. [Aşağıdaki örnek site CSS'sini ve kişisel JS'yi devre dışı bırakır]).

İşte tüm CSS/JS komutlarının bir tablosu.

Komut Rol
?useusercss=0 Kişisel CSS sayfalarınıza eklenen tüm CSS'yi devre dışı bırakır.
?useuserjs=0 Kişisel JS sayfalarınıza eklenen tüm JS'yi devre dışı bırakır.
?usesitecss=0 Vikinin MediaWiki:Wikia.css sayfasına eklenen tüm CSS'yi devre dışı bırakır.
?usesitejs=0 Vikinin MediaWiki:Wikia.js sayfasına eklenen tüm JS'yi devre dışı bırakır.
?safemode=1 Tüm özel CSS ve JS'yi site genelinde ve kişisel olarak devre dışı bırakın.

Not: ?usesitecss=0 ve ?usesitejs=0 şu anda vikiler üzerinde çalışmamaktadır. Bu, gelecekte bir ara düzeltilmesi beklenen bilinen bir hatadır. ?useusercss=0 ve ?useuserjs=0 komutları kısmen çalışır, küresel kişisel kodu devre dışı bırakır, ancak yerel kişisel kodu devre dışı bırakmaz.

CSS ve JS düzenleyici hata denetimi

CSS ve JS editörlerinde etkin hata denetimi ve sözdizimi vurgulama var:

  • Siz kodu yazarken, sayfa söz diziminde meydana gelmiş olabilecek tüm hataları size bildirecektir.
  • İşaretlenen her sorunun çözülmesi gerekmediğini unutmayın; CSS (ve hatta JS) teknolojisi sürekli gelişiyor ve tarayıcıların hepsi aynı şekilde davranmıyor: bazı mesajlar işlem gerektirmeyebilir.

Genel sorunlar

CSS sorunları
Sorun Açıklama
@import prevents parallel downloads, use <link> instead Bağlantı etiketleri normalde CSS'yi içe aktarmak için kullanılır. Ancak MediaWiki, JS kullanmadan kendi bağlantı etiketlerinizi eklemeyi desteklemez, bu nedenle bu hata normalde göz ardı edilebilir. @import kullanmak tercih edilen yöntemdir.
Expected X but found Y Bu, bir özellik için geçersiz bir değer girdiğiniz anlamına gelir. Örneğin, color: foo; içinde foo, bir renk olmadığı için color özelliği için geçersiz bir değerdir.
Use of !important !important, bakımını ve ayrıca kullanıcıların kişisel CSS'lerinde ayarları geçersiz kılmalarını zorlaştırdığı için CSS'de genellikle kaçınılmalıdır. Çoğu zaman, doğru ve özel seçiciyi kullanmak !important kullanmaktan kaçınmanıza yardımcı olur.
Unknown property 'codename' Araç tarafından CSS kodunun tamamı tanınmasa da (CSS'nin kendisi sıkça güncellenen bir sanat formu olduğundan), belirli CSS kodları bir sayfadaki belirli nesneler (Örneğin, mix-blend-mode: color-dodge;).

Ayrıca bakınız

Daha fazla yardım ve geri bildirim

Community content is available under CC-BY-SA unless otherwise noted.