FANDOM


90210-infobox-light

Örnek bir bilgi kutusu.

90210-infobox-light

Bilgi kutuları dergi makalelerinde bilgi notları veya kenar çubukları gibidir; Sayfanın konusunun bir özetini sunmak için tasarlanmıştır. Önemli noktaları düzenli ve hızlı bir şekilde okunabilir biçimde sunarlar. Bilgi kutuları genellikle bir toplulukta tutarlılık oluşturmak için şablonlar kullanılarak yapılır.

Fandom, Taşınabilir Bilgi Kutuları denilen bilgi kutularını kodlamak için, bu sayfanın ayrıntılandırdığı farklı cihazlarda iyi görüntülenmelerini sağlamak için tutarlı bir yol geliştirdi. Bir makalede bir bilgi kutusunu kullanma biçiminizde hiçbir değişiklik yoktur; bunun yerine, değişiklikler şablon sayfasına nasıl yazıldığını etkiler. Fandom, Taşınabilir Bilgi Kutuları toplulukları için standart, ortak pratik kullanım için güvenli ve istikrarlı olduğunu düşünüyor.

Ayrıca mevcut bilgi kutularının taşınmasına yardımcı olacak bir araç da yaratılmıştır. Bununla ilgili daha fazla bilgiyi Yardım:Bilgi kutusu taşıma altında bulabilirsiniz ve adım adım tam bir adım Yardım:Bilgi kutusu taşıma/Örnekler bölümünde bulunabilir.

Kullanışlı bağlantılar


Bir makaleye bilgi kutusu nasıl eklenir

VE-portableinfobox

Taşınabilir Bilgi Kutularını Görsel Düzenleyici'ye Ekleme.

VE-portableinfobox

Bir makaleye, editörün yerleşik araçlarıyla veya editörün kaynak modunu kullanarak, diğer herhangi bir şablonla aynı şekilde ekleyebilirsiniz. Görsel Düzenleyici içinde, Taşınabilir Bilgi Kutuları 'Ekle' açılır menüsündeki Bilgi Kutusu seçeneği ile hızlı bir şekilde eklenebilir.

Bu arada, kaynak modda, genellikle sözdizimini şablonun dokümantasyonundan kopyalayarak (normalde şablon sayfasının altına bulunur) kopyalayıp, bir makaleye yapıştırarak, istenen bilgileri sağlamak için eşittir işaretlerinden sonra gelen kelimeleri değiştirerek başlarsınız. Örneğin:

{{bilgi kutusu karakter
 | başlık        = Daisy
 | resim         = Örnek.jpg
 | resim_altyazı = Daisy, blowing in the wind
 | pozisyon      = Yüce çiçek
 | yaş           = 2 ay
 | durum         = Aktif
 | yükseklik     = 5 inç
 | ağırlık        = 20 gram
}}

Taşınabilir Bilgi Kutuları ile bu, diğer tüm şablonlarla aynı şekilde çalışır. Bununla birlikte, şablon sayfa işaretlemesi aşağıda ayrıntılı olarak gösterildiği gibi biraz farklıdır.

Bir bilgi kutusu nasıl oluşturulur

Tutorialinfobox

Kış geliyor...

Tutorialinfobox

İlk önce, istediğiniz adla yeni bir şablon başlatın. Bunu yapmak için, "Şablon:[seçtiğiniz adı]" (yeni bir şablon: Örnek) başlıklı yeni bir sayfa oluşturun. Geçmişte masaları ve divleri kullanmış olabilirsiniz, şimdi bilgi kutusu etiketlerini kullanıyoruz. Bir başlık ve bir resim içeren bir 'yığılmış' bilgi kutusuyla başlayacağız:

<infobox layout="stacked">
  <title source="isim"><default>{{PAGENAME}}</default></title>
  <image source="resim" />
</infobox>

Bu wiki metin, şablonunuza name ve image değişkenlerini' title ve image öğelerini kullanmasını söyleyecektir. Ek olarak, bir kullanıcı bir ad/görüntü/vb. belirtmediğinde değeri kullanılacak olan default etiketini sağlayabilirsiniz.

Şimdi ek bilgi içeren iki alana daha ihtiyacımız var, o halde bir tane ekleyelim:

<data source="sezon"><label>Sezon</label></data>

Kaynak ilk olarak ayarlanmış son bir alan ekledikten ve İlk görüldü olarak etiketledikten sonra, aşağıdakilerle sonuçlanır:

<infobox layout="stacked">
  <title source="isim"><default>{{PAGENAME}}</default></title>
  <image source="resim" />
  <data source="sezon"><label>Sezon</label></data>
  <data source="ilk"><label>İlk görüldü</label></data>
</infobox>

Artık çalışan bir bilgi kutusu almak için aşağıdaki parametreleri ekleyerek şablonu bir makalede kullanabiliriz:

{{Örnek
 |isim   = Eddard Stark
 |resim  = eddard.jpg
 |sezon = [[Seazon 1|1]]
 |ilk  = "[[Kış Geliyor]]"
}}

Değerleri gizleme

Değeri olmayan herhangi bir alan veya öğe otomatik olarak gizlenir. Bu, zorla gösterilen gruplar dışındaki tüm etiketler için geçerlidir (bkz. #Tüm grup öğelerini görüntülenmeye zorla). Tüm elemanlar boşaldığında, bilgi kutusunun kendisi görünmeyecektir. Bir resim etiketi içinde, mevcut olmayan görüntüler "redlink" göstermez ve dosya sayfası Özel:İstenenDosyalar içinde görünmez.

Bilgi kutusu düzenini nasıl değiştirirsiniz

Bu tür kodları kullanan bilgi kutuları, topluluğun özel teması öğelerine dayanarak otomatik olarak stillendirilir. Değişkenlerden herhangi biri boşsa, şablonun ilgili satırı gösterilmez ('varsayılan' etiketi kullanılmamışsa).

Düzen seçenekleri

Bilgi kutuları için iki alternatif düzen seçeneği mevcuttur:

Varsayılan (tablo) düzen
Etiketler değerlerin solunda görüntülenir
<infobox>
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12.17

Varsayılan (tablo) düzen

Screen Shot 2015-06-16 at 12.12.17
Yığılmış düzen
Etiketler değerlerin üzerinde görüntülenir.
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.10.54

"Yığılmış" düzeni

Screen Shot 2015-06-16 at 13.27.08


Özel temalar

Varsayılan bilgi kutusu teması iki şekilde geçersiz kılınabilir. Topluluğunuzun Özel:WikiÖzellikler sayfasında, Europa Bilgi Kutusu Teması başlıklı bir değişken var. Etkinleştirdiğinizde, bilgi kutularınız Wiki Navigasyon için seçtiğiniz renkleri TemaTasarımcı'da çeker.

Diğer seçeneğiniz de yerel topluluk CSS kullanmaktır. Infobox etiketindeki type, theme veya theme-source özelliklerini kullanmak, sınıfları kullanarak belirli bilgi kutusu şablonlarını hedeflemeyi kolaylaştıracak.

  • Type niteliği, bir bilgi kutusunun mantıksal türünü tanımlamak için kullanılır.
  • Theme özelliği, bilgi kutusu şablonu için özel bir CSS sınıfı belirtmek için kullanılır.
  • Theme-source özelliği, CSS sınıfını bir şablon parametresiyle değiştirmenize olanak sağlar.

Bu özniteliklerin ve temaların nasıl kullanılacağı hakkında daha fazla bilgi için, detaylı kılavuzlar da dahil olmak üzere bir bilgi kutusuyla, lütfen Yardım:Bilgi Kutuları/CSS bölümüne göz atın veya Örnek stiller ve temalar Taşınabilirlik Merkezi'nde göz atın.

Vurgu renkleri

Başlık rengi ve başlık arka planlarının ve metnin renkleri, vurgu rengi özelliği kullanılarak bilgi kutusu başına yeniden boyanabilir. theme-source gibi, kullanılan renk de accent-color-source (arka planlar için) ve accent-color-text-source (metin için) belirtilen şablon parametresinin değeridir.

Örnek olarak: bilgi kutusu şablonu accent-color-source="bkg" olarak bildirirse, makalenin bilgi kutusu bkg = #FFF olarak bildirirse, başlıkların ve başlıkların arka plan rengi #FFF (beyaz rengin HEX değeri). Bu şekilde beyan edilen renkler #FFF veya #FFFFFF HEX biçiminde olmalıdır, yoksa renklendirme sessizce başarısız olur.

Aksan renkler, varsayılanların yanı sıra temalar kullanılarak bildirilen renkleri geçersiz kılar.

Bu ayrıca varsayılan renk için bir parametre içerir, bu nedenle accent-color-default="#FFF" tüm başlıkların ve başlıkların arkaplanlarının rengini ve accent-color-text-default="#000000", altıgen biçimleri kullanarak varsayılan metin rengini ayarlayarak benzer şekilde çalışır.

Öğe başına stil

Bir bilgi kutusundaki ayrı öğeler, HTML sonuçlarının içinde, veri öznitelikleri olarak bilinen CSS seçicileri ile gösterilmelerini sağlayan işaretleyicileri içerebilir.

  • source girişine sahip tüm Taşınabilir Bilgi Kutusu öğeleri şimdi data-source="ATK" gibi bir veri özniteliğinde bu parametre adıyla HTML olarak işleyecektir. Bu, tek tek öğeleri stilize etmek ve tanımlamak için .pi-item[data-source=ATK] gibi CSS veya jQuery seçicileri yazmanıza olanak sağlar. type ile birlikte kullanıldığında, bunun nth-of-type stil seçimine olan gereksinimini ortadan kaldırması ve tasarım ve etkileşim için diğer olasılıkları açması gerekir.
  • Yeni isim parametresi, bir kaynak girişini kabul edip etmeme konusunda açıkça eleman seçimine izin verir, <title>, <group>, <group>, <data>, <header>, <image> ve <navigation> belirlenmesi de dahil. veri kaynağı veri özniteliği gibi, <data name="bar">, .pi-item[data-item-name=bar] olarak seçilebilir.

Birden fazla görüntü veya video nasıl kullanılır

Infoboxtabs

Sekmeki resimler.

Infoboxtabs

Bir bilgi kutusundaki bir konumda birden fazla görüntü kullanmak için, yalnızca bir <gallery> etiketini iletebilirsiniz.

{{Örnek
 |isim   = Eddard Stark
 |resim  = <gallery>
Eddard 1.jpg|Eddard at üstünde
Eddard 2.jpg|Eddard bir evin içinde
Eddard 3.jpg|Eddard bir cenaze arabası
</gallery>
}}

Bir bilgi kutusuna video eklemek için, sadece bir resimdeki gibi <image> etiketini kullanın. Görüntü yerine bir video eklendiğinde, bilgi kutusunda oynatma ikonu ve süre bilgisine sahip bir küçük resim gösterilir ve videoya tıklandığında bir video oynatıcı açılır. Birden fazla video eklemek istiyorsanız, her videoya yeni bir <image> etiketi ekleyin.

Veriler nasıl gruplanır

Advancedinfobox

Olağandışı düzenler ve eylem halindeki gruplar.

Advancedinfobox

Artık basit bir bilgi kutusu oluşturduğunuza göre, daha gelişmiş seçeneklerin nasıl kullanılacağını öğrenebilirsiniz. Aşağıdaki bölümde sağda görülen bilgi kutusunun nasıl oluşturulacağını gösteriyoruz.

Bu bilgi kutusu üç <data> alanıyla, ardından tek <title> ve <image> alanlarıyla başlar. Gördüğünüz gibi, <title> alanı ilk alan olmak zorunda değildir.

<infobox layout="stacked">
  <data source="önc"><label>Önceki</label></data>
  <data source="eşz"><label>Eşzamanlı</label></data>
  <data source="sonraki"><label>Sonraki</label></data>
  <title source="sim" />
  <image source="resim" />
</infobox>

Grup etiketleri içindeki bilgileri gruplandırma

<group> alanı, alanları birlikte gruplamanıza ve bir başlık vermenize olanak sağlar. Unutmayın: bildirilen ancak değeri olmayan alanlar görünmez. Bu kural aynı zamanda gruplar için de geçerlidir. Bir grup içindeki alanların hiçbiri (başlık etiketi dışındaki) bir değere sahip değilse, o grubun tamamı görünmez.

<infobox layout="stacked">
  <data source="önc"><label>Önceki</label></data>
  <data source="eşz"><label>Eşzamanlı</label></data>
  <data source="sonraki"><label>Sonraki</label></data>
  <title source="isim" />
  <image source="resim" />
  <group>
    <header>Detaylar</header>
    <data source="çatışma"><label>Çatışma</label></data>
    <data source="tarih"><label>Tarih</label></data>
    <data source="yer"><label>Yer</label></data>
    <data source="sonuç"><label>Sonuç</label></data>
  </group>
</infobox>

Gruplar için yatay düzen

Screen Shot 2015-06-16 at 13.27.08

Yatay gruplama.

Screen Shot 2015-06-16 at 12.10.54
PI-Collapse

Dikey bir liste yerine, <group> alanları, tüm içeriğin yan yana tek satırda görüntülendiği yatay bir düzene sahip olabilir. Bu, grup etiketine layout="horizontal" niteliğini ekleyerek elde edilebilir.

<group layout="horizontal">
   ...
</group>

Gruplar için akıllı düzen

Yatay düzene benzer (katı, yapısal satırlar sağlar) "akıllı" düzendir. Bu, veri alanlarının tek bir grupta bir satırdan diğerine akmasına izin verir. Alanların sayısı belirlenen bir sınıra ulaştığında, bir sonraki veri alanı yeni bir satırda görünecektir. Satırdaki öğeler mevcut tüm genişlikleri doldurmak için ayarlanır.

Akıllı grupları kullanmak için row-items="3" (veya limiti ayarlayan başka bir numara) ekleyin. Akıllı gruptaki tüm öğeler varsayılan olarak yatay düzeni kullanır, bu nedenle akıllı grupları kullanıyorsanız bu özelliği eklemeniz gerekmez. Bununla birlikte, akıllı bir gruptaki yatay ve dikey veri alanlarını, layout="default" özniteliğini ayrı ayrı bir <data> etiketi ekleyerek karıştırmak mümkündür.

Belirli bir veri alanının tek bir alandan daha fazla yer kaplamasını sağlamak için <data> etiketinde span="2" özelliğini kullanın.

<infobox>
  <title source="isim" />
  <image source="resim" />
  <group row-items="3">
    <header>Detaylar</header>
    <data source="çatışma"><label>Çatışma</label></data>
    <data source="tarih"><label>Tarih</label></data>
    <data source="yer"><label>Yer</label></data>
    <data source="sonuç" layout="default"><label>Sonuç</label></data>
  </group>
</infobox>

Tüm grup öğelerini görüntülenmeye zorla

show="incomplete" kullanarak, boş olmasa bile tüm boş olmadıkça tüm grup öğelerini göstermeye zorlayabilirsiniz - sonra grup hiç oluşturulmuyor.

<group layout="horizontal" show="incomplete">
  <header>Savaşçılar</header>
  <data source="taraf1" />
  <data source="taraf2" />
</group>

Şimdi hepsini bir araya getirerek, son şablon koduna geldik:

<infobox layout="stacked">
  <data source="önceki"><label>Önceki</label></data>
  <data source="eşzamanlı"><label>Eşzamanlı</label></data>
  <data source="sonraki"><label>Sonraki</label></data>
  <title source="isim" />
  <image source="yardım" />
  <group>
    <header>Detaylar</header>
    <data source="çatışma"><label>Çatışma</label></data>
    <data source="tarih"><label>Tarih</label></data>
    <data source="yer"><label>Yer</label></data>
    <data source="sonuç"><label>Sonuç</label></data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Savaşçılar</header>
    <data source="taraf1" />
    <data source="staraf" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Komutanlar</header>
    <data source="komutanlar1" />
    <data source="komutanlar2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Kuvvet</header>
    <data source="kuvvet1" />
    <data source="kuvvet2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Kayıplar</header>
    <data source="kayıp1" />
    <data source="kayıp2" />
  </group>
  <data source="civilian"><label>Sivil kayıplar</label></data>
</infobox>

Şimdi bir makalede kullanabiliriz:

{{Savaş
 |önceki      = [[Battle of Fair Isle]]
 |eşzamanlı   = [[Siege of Old Wyk]]
 |sonraki     = [[Siege of Pyke]]
 |isim        = [[Siege of Great Wyk]]
 |resim       = Stannis Great Wyk.png
 |çakışma     = [[Greyjoy Rebellion]]
 |tarih       = 289 AL
 |yer         = [[Great Wyk]], the [[the Iron Islands]]
 |sonuç       = [[Iron Throne]] victory
 |taraf1      = [[File:Greyjoy.png|20px|link=House Greyjoy]] [[House Greyjoy]]
 |taraf2      = [[File:Baratheon.png|20px|link=House Baratheon]] [[Iron Throne]]
 |komutanlar1 = Bilinmiyor
 |komutanlar2 = Lord [[Stannis Baratheon]]
 |kayıp1      = Bilinmiyor
 |kayıp2      = Bilinmiyor
}}

Daraltabilir gruplar

PI-Collapse

Etkinleştirilebilir katlanabilir gruplar.

<group> etiketine collapse="open" veya collapse="closed" ekleyerek gruplar daraltılabilir. Bu, grup başlığı satırını tıklanabilir kılar (grubu genişletmek ve daraltmak için) ve grup ilk önce sırasıyla açılmaya veya kapanmaya başlar.

<group collapse="closed">
  <header>Görünümler</header>
  <data source="filmler" />
  <data source="komediler" />
</group>

Not: İçeriği içeren bir başlık satırı, bunun çalışması için hemen grup etiketini takip etmelidir.

Paneller

PortableInfobox-Panel-Orc
PortableInfobox-Panel-Orc

Veri öğeleri ve gruplar artık masaüstünde ve mobil görünümlerde daha fazla esneklik ve daha akıllı veri gösterimi sağlayan sekmeli panellerde yapılandırılabilir. Her <panel> - <infobox> öğesinin kökü olarak - etiketlenebilir (ile Sekme ayarlamak için <label>) ve bir ya da daha fazla <section> öğelerini ayarlayın. Aksi takdirde <infobox> çocuğu olabilecek herhangi bir öğe <section> öğesinin bir çocuğu olabilir. Bu, bilgi kutularını daha dinamik bir şekilde yapılandırırken, karmaşayı ve sayfalardaki bilgi kutusu gruplarının gerekliliğini azaltmalıdır.

<section> etiketi bir sekmenin içeriğini gösterir. Tıklanabilir geçiş, bir <label> etiketiyle temsil edilir. Belirtilmezse, sıfır temelli dizinlerine göre etiketler varsayılandır; Bir paneldeki tüm sekmeler etiketlenmemişse, sanki gruplarmış gibi bilgi kutuda yer alırlar.

Gelişmiş seçenekler

Biçimlendirme

Verilerinize bazı ek bilgiler eklemek isterseniz (bazı simgeler, kategoriler eklemek gibi) veya iletilen değerleri işlemek için, alan biçimlendirmesi bunu yapmanızı sağlar.

  • Format etiketi kullanıldığında, source= içinde verilen değişken daha sonra format etiketi içinde belirtildiği şekilde biçimlendirilir veya değiştirilir. Bu amaçla, parametrenin üçlü ayraç içinde sağlanması gerekir; örneğin, source="miktar" için {{{miktar}}} genişlikli iç kısma gelin.
  • source= içinde verilen değişken boşsa, düğüm default etiketinde verilen değeri verir (veya default etiketi yoksa belirtildi). default içeriği, ayrıştırıcı işlevler için hiçbir zaman kullanılamaz; örneğin, {{{miktar}}} parameter parameter parameter parameter parameter parameter parameter "Varsayılan değer" değil, "varsayılan biçim" anlamına gelebilir.

Birkaç örnek kullanım durumları:

  • Ekstra metin ekleme: <format>${{{miktar}}}</format>
  • Bir sayfayı bağlamak: <format>[[{{{bölge}}}]]</format>
  • Bir kategoriye bağlama: <format>[[:Kategori:{{{araba türü}}}]]</format>
  • Bir sayfayı kategorilere ayırma: <format>[[Kategori:{{{araba türü}}}]]</format>

Örneğin, bir {{para simgesi}} şablon ekleyebiliriz:

<data source="miktar">
  <label>Miktar</label>
  <format>{{{miktar}}} {{para simgesi}}</format>
</data>

Sağa gösterilen etki aşağıdaki sözdizimi ile elde edilebilir:

Field mutators

Fields with formatting

Field mutators
<header>Satın almak için fiyat</header>
<data source="pazarlık_etmek">
  <label>Pazarlık ile Fiyat</label>
  <format>{{{psatın}}} {{para simgesi}}</format>
</data>
<data source="satın">
  <label>Fiyatsız fiyat</label>
  <format>{{{satın}}} {{para simgesi}}</format>
</data>
<data source="sat">
  <label>Satılacak fiyat</label>
  <format>{{{sat}}} {{para simgesi}}</format>
</data>
<data source="ağırlık">
  <label>Ağırlık</label>
  <format>{{{ağırlık}}} {{ağırlık simgesi}}</format>
</data>

Ayrıştırıcı işlevler

Ayrıştırıcı işlevler herhangi bir bilgi kutusuna eklenebilir. Ancak, parametre, etiket veya veri kaynağı herhangi bir metin içermiyorsa sonuçlar otomatik olarak gizlenir.

Template code
<data source="seviye">
  <label>Sıra</label>
  <format>Orc {{#switch:{{{level}}}
         |1=peon
         |2=grunt
         |grunt
  }}</format>
  <default>Orc</default>
</data>

Switch ifadesindeki boş dizgiyi test etmek mantıklı olmaz; örneğin, |=(bilinmeyen sıra), çünkü bu zaten default etiketi ile kaplıdır.

Örnekler

Daha fazla yardım ve geri bildirim

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