FANDOM


Bazı özel kodlar oluşturma için topluluğunuz veya Kendi hesabınız mi? Bu sayfa, size bazı yararlı detaylar vermek için genel bakış sayfamızdan biraz daha ileri gider.

Yine de başlamadan önce hangi sayfaların özelleştirilebileceğini kontrol etmek isteyeceksiniz. Topluluğunuz için bazı JavaScript yazmayı planlıyorsanız, Fandom Destek ile iletişime geçerek açık olmasını istemeniz gerekir. Sonunda, JavaScript inceleme süreci ile kendinizi tanımak istersiniz.

Sayfaya özgü özelleştirme

CSS

Makalelerdeki <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, boşluk, sütun ve diğer özel karakterlerin alt çizgi ile değiştirildiği page- [makale adı]'dır.

JavaScript

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

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

CSS ve JS'yi belirli topluluklara uygulama

Kişisel CSS öğenizde, hesabınızı belirli wikilere bakma biçiminde şekillendirmenizi sağlayacak diğer CSS seçicilerin önüne bir sınıf ekleyebilirsiniz.

Bu sınıf, bir topluluğun veritabanı adı'na dayanır, URL'yi değil - genellikle, ancak her zaman aynı değildir. Format:

.wiki-[veri tabanı ismi]

veya eğer İngilizce olmayan bir wiki:

.wiki-[dil kodu][veri tabanı ismi]

Örneğin, Sithpedi'nin arka planının bir kısmını sizin için kırmızı görünmek istiyorsanız, bunu global.css dosyanıza ekleyin:

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

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

Düzen yüklemesi

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

  1. Fandom'un çekirdek kodu
  2. yerel topluluk kodu
  3. kişisel kod

Her seviyede, yükleme sırası önce Common, sonra Wikia. Bunun anlamı, Common.css içinde .class {color: red} demenizdir, ancak Wikia.css'de .class{color: green}, .class yeşil olacaktır. Ve kişisel CSS son olduğundan, oraya koyduğunuz her şey, yerel wiki seçimlerini geçersiz kılar.

Ayrıca, CSS alma veya fontlar nasıl alınır — ve wikinizin hem Common.css hem de Wikia.css vardır - bu içe aktarma işlemlerinin Common.css en üstünde olması gerekir.

FANDOM CSS Importing Best Practices

Bu çizelge, uygun yükleme sırasını gözlemlerken Common.css'yi Wikia.css ile birleştirmenin en iyi yolunu bulmanıza yardımcı olacaktır.

Eğer wikinizin CSS'sini basitleştirmek istiyorsanız, Common.css içeriğini Wikia.css'ye kopyalayabilirsiniz. Ancak, yaptığınız zaman yükleme emrinin esaslarına uymanız gerekir. Yakındaki akış çizelgesini takip edin, iyi olacaksınız!

JS için, yükleme sırası özellikle en iyi MediaWiki:ImportJS nasıl kullanılacağına karar verirken önemlidir. ImportJS en son yüklediğinden, bir Dev Wiki betiğinin özelleştirmesini Common.js veya Wikia.js içine koyabilir, ancak betiğin kendi dosyasını ImportJS içine alabilirsiniz. Tam JS yükleme sırası şudur:

  1. Common.js
  2. Wikia.js
  3. Common.js yoluyla içe aktarılan betikler
  4. Wikia.js yoluyla içe aktarılan betikler
  5. ImportJS

Son olarak, açık olanı unutmayın: sayfalar yukarıdan aşağıya doğru yüklenir. Bu, bir sayfanın tepesinde yapılan bildirimlerin en alttakiler tarafından geçersiz kılınabileceği anlamına gelir.

CSS'de !important

CSS yükleme düzenleri nedeniyle, bazen bir CSS kuralının uygulandığından emin olmak için !important özelliğini kullanmanız gerekebilir. Ancak, belirli (aşırı derecede spesifik) CSS seçicilerin kullanılmasıyla mümkün olduğunda !important'dan kaçınılmalıdır.

Önbellek sorunları

İnternetten indirdiğiniz her dosya önbellek alır. Normalde bu harikadır çü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 atlama sürece değişikliklerin yürürlüğe girmesi biraz zaman alabilir.

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

Popüler JavaScript parçaları

Bazı betikler hakkında bir fikir edinmek için, diğerleri yararlı bulabileceklerini veya deneyeceklerini yazdıklarını, Fandom Developers Wiki'deki JS Geliştirmelerinin listesine (İngilizce) bakın.

JavaScript'i çoğalt

Birçok betik aynı sayfada birden çok kez çalıştırıldığında sorun yaşayabilir. Kodu, bir kez belirli bir kod parçasının çalıştığı şekilde yazdığınızdan emin olun. Aynı JS'yi birden fazla dosyaya yapıştırmaktan kaçının çünkü çakışma olabilir ve sizin ve diğer ziyaretçileriniz için kafa karıştırıcı hatalara neden olabilir.

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

Özel CSS ve JS, aşağıdaki komutları kullanarak geçici olarak devre dışı bırakılabilir. Komut, URL’nin sonuna eklenmelidir (örnek: https://community.fandom.com/tr/Özel:Rastgele?usesitecss=0. [Aşağıdaki örnek, Topluluk Merkezi'ndeki CSS sitesini devre dışı bırakır]).

Birden fazla komut gerekirse, soru işareti yerine (?), ikincisi için bir ve işareti (&) koyun, üçüncü ve dördüncü komutlar (varsa) (örnek: https://community.fandom.com/tr/wiki/Özel:Rastgele?usesitecss=0&useuserjs=0. [Aşağıdaki örnek, Topluluk Merkezi ve kişisel JS'deki site CSS'yi devre dışı bırakır]).

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

Command Role
?useusercss=0 Kişisel CSS sayfalarınıza eklenen tüm CSS’leri devre dışı bırakır.
?useuserjs=0 Kişisel JS sayfalarınıza eklenen tüm JS’leri devre dışı bırakır.
?usesitecss=0 Wikinin MediaWiki:Wikia.css sayfasına eklenen tüm CSS’leri devre dışı bırakır.
?usesitejs=0 Wikinin MediaWiki:Wikia.js sayfasına eklenen tüm JS’leri devre dışı bırakır.

CSS ve JS editörü hata kontrolü

CSS ve JS editörlerinde aktif hata kontrolü ("linting") ve sözdizimi vurgulama var:

  • Kod yazarken, sayfa sözdiziminde oluşmuş olabilecek hatalar hakkında size bilgi verecektir.
  • Her bayraklı sorunun çözülmesi gerekmediğini unutmayın; CSS (ve hatta JS) teknolojisi sürekli olarak gelişmektedir ve tarayıcıların hepsi aynı şekilde davranmamaktadır: bazı mesajlar işlem gerektirmeyebilir.

Genel hatalar

CSS issues
Hata Açıklama
@import paralel indirmeleri önler, bunun yerine <link> kullanın < Bağlantı etiketleri normal olarak CSS'yi içe aktarmak için kullanılır. Ancak, MediaWiki JS kullanmadan kendi link etiketlerinizi eklemenizi desteklemez, bu nedenle bu hata normalde yoksayılabilir. @import kullanmak tercih edilen yöntemdir.
Beklenen X, ancak Y bulundu Bu, bir mülk için geçersiz bir değer girdiğiniz anlamına gelir. Örneğin, color: örnek;'de örnek, renk özelliği için geçersiz bir değerdir, çünkü renk değildir.
!important kullanımı !important CSS'de genellikle bakımı zorlaştırabilir ve ayrıca kullanıcıların kişisel CSS'lerinde ayarları geçersiz kılmalarını zorlaştırabileceğinden kaçınılmalıdır. Doğru ve belirli seçiciyi kullanmak çoğu zaman !important kullanmaktan kaçınmanıza yardımcı olur.
Bilinmeyen özellik 'kod adı' Her ne kadar tüm CSS kodları araç tarafından tanınmasa da (CSS'nin kendisi sıklıkla güncellenen bir artformdur), bazı CSS kodları (İngilizce) hala bir cihaz için uygulandığında okunabilir. 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.