İçeriğinizi yazma

Markdown ve HTML biçimlendirmesi

DevSite'taki içeriklerimizin çoğu, düz metinde basitlik ve okunabilirlik için tasarlanmış bir yazı biçimi olan Markdown ile yazılmıştır. DevSite, web'de görüntülemek için Markdown'ı otomatik olarak HTML'ye dönüştürür.

Yaygın HTML öğelerinin Google'a özgü Markdown karşılıklarını öğrenmek için go/g3mark-cheat adresindeki bilgi sayfasını kullanın. Google'ın Markdown'ı (CommonMark olarak da bilinir) ile ilgili tüm dokümanlara buradan erişebilirsiniz.

Aşağıda birkaç örnek verilmiştir:

HTML Markdown
<b>bold text</b>
<strong>bold text</strong>		 **bold text**
<i>italic text</i>
<em>italic text</em>		 *italic text*
<h2>Heading 2</h2>
<h3>Heading 3</h3>		 ## Heading 2
### Heading 3
<a href="url.com">Link</a> [Link](url.com)
<p>paragraph</p> Paragraph
<ol>
  <li>Ordered list first item</li>
  <li>Second item</li>
</ol>		 1. Ordered list first item
1. Second item
1. Third item
<ul>
<li>Unordered list first item</li>
  <ul>
    <li>Nested list item</li>
  </ul>
<li>Second item</li>
</ul>		 * Unordered list first item
    * Nested item (indent 4-spaces)
* Second item

Markdown yerine HTML'yi ne zaman kullanmalısınız?

Aşağıdakiler de dahil olmak üzere, Markdown ile yazmadığımız belirli öğeler vardır:

  • Dahil edilen dosyalar: Tüm dahil edilen dosyalar HTML dosyası olmalıdır ve bu nedenle Markdown ile yazılmış öğeler içermemelidir. Dahil etme dosyaları oluşturma hakkında bilgi için Sayfalarda içeriği yeniden kullanma başlıklı makaleyi inceleyin.

  • Tablolar: Markdown tablolarının biçimlendirilmesi ve bakımı zor olabilir. Bu nedenle, Markdown dosyalarında bile tablolar için HTML kullanırız.

  • Görseller: Görseller için HTML kullanmak, resim biçimi ve yerleşimi konusunda daha fazla esneklik sağlar. Görseller için DevSite Yayınlama Kılavuzu'na bakın.

  • Zippies: Devsite'ta genişletilebilir widget'lar olarak bilinen Zippies, HTML biçiminde olmalı ve <div> etiketiyle sarmalanmalıdır.

Sık kullanılan içerik biçimleri

Bağlantıların aynı sekmede mi yoksa yeni sekmede mi açılacağıyla ilgili bağlantı kurallarını uygulayın. Bir bağlantıyı yeni sekmede açmanız gerekiyorsa bağlantıyı aşağıdaki şekillerde biçimlendirebilirsiniz:

Markdown

[Accessible content](/style/accessibility){:target="_blank"}

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

Tablolar

Devsite'ın sunduğu tablo türleri ve bunlara karşılık gelen HTML'ler için Tablolar başlıklı DevSite Yayınlama Kılavuzu'na bakın.

İpuçları:

  • Tablonuzda kenarlık olmasını istemiyorsanız class="columns" simgesini kullanın.

  • Tablonuzda dolgu ve ayırma çizgileri (örneğin, bu sayfada) olmasını istiyorsanız class="columns extra-padding" kullanın ve içerik satırları arasında ayrı bir satırda <hr> etiketlerini kullanın.

Genişletilebilir zippy'ler

Workspace'te zippy'yi stilize etmek için arrow-icon sınıfını kullanırız. Aşağıda, Workspace için bir zippy (genişletilebilir widget) örneği verilmiştir:

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

Bu örneği kullanmak için aşağıdaki değişkenleri değiştirin:

  • UNIQUE_ZIPPY_ID: Zippy'ye doğrudan yönlendirebilmek için açıklayıcı ve benzersiz bir kimlik girin. Örneğin, direct-admin-access.
  • ZIPPY_HEADING: Kullanıcının zippy'yi genişletmeden önce görmesi gereken metni girin.
  • YOUR_CONTENT: Kullanıcının zippy genişletildiğinde görmesi gereken içeriği girin.

DevSite'ın genişletilebilir widget'ı hakkında daha fazla bilgi için DevSite Yayınlama Kılavuzu'ndaki Widget'lar: Genişletilebilir bölümüne bakın.

Paylaşılan içeriği dahil etme

İçeriği birden fazla sayfada yeniden kullanmak için, Composer'da snippet'leri birden fazla makalede kullanmanın DevSite sürümü olan include'ları kullanabilirsiniz.

İçerme dosyaları oluşturma ve içeriklerinize dahil etme konusunda yardım almak için Sayfalar arasında içeriği yeniden kullanma başlıklı makaleyi inceleyin.

Başlıklara özel bağlantı ekleme

DevSite, her başlık için bir HTML kimliği özelliği oluşturur. Başlık değişirse tutarlılığı korumak için başlık metninin yanına {:#your-id} ekleyerek başlığa özel bir bağlantı kimliği ekleyebilirsiniz. Örneğin:

## Apply filters to your search results {:#apply-filters}

İpucu: Bir dosyadaki tüm başlıklar için otomatik olarak özel bağlantı kimlikleri oluşturmak istiyorsanız Command (\⌘) + H (Windows'da Ctrl + H) tuşlarına basın. Mevcut özel bağlantı kimlikleri değiştirilmez.

Daha fazla bilgi için Header IDs ile ilgili DevSite yayınlama kılavuzuna bakın.