Bu Blogun Render Edebildiği Her Şey

Bu sayfa tahmin yürütmemek için var. Sitenin desteklediği her biçimlendirme özelliği, shortcode ve gömülü içerik, onu üreten işaretlemenin yanında burada render ediliyor. Bir uyarı kutusunun paragrafa uyup uymadığını ya da bir diyagramın koyu temada nasıl duracağını merak ettiğimde, gerçek bir yazının içinde denemek yerine bu sayfayı açıyorum.

Aynı zamanda bir test görevi görüyor: tema güncellemesinden sonra bir şey bozulursa önce burada bozulur.

Metin

Normal metin kalın, italik, ikisi birden, üstü çizili ve satır içi kod alabiliyor. Bağlantılar satır içi, referanslı ya da https://gohugo.io/ gibi çıplak olabilir — sonuncusu otomatik olarak bağlantıya çevriliyor.

Alışılmış setin ötesinde birkaç eklenti açık: vurgulanmış metin, eklenmiş metin, alt simgeyle H2O ve üst simgeyle 10⁶. Emoji de adıyla çalışıyor 🚀 🦃.

Dipnotlar¹ sayfanın altında duruyor ve iki yönlü bağlanıyor.

**kalın**, *italik*, ~~çizili~~, `kod`
==vurgu==, ++ekleme++, H~2~O, 10^6^
[satır içi](https://gohugo.io/), [referanslı][id], :rocket:
Bir dipnot[^1] ve tanımı.

Başlıklar

## ile #### arası başlıklar stillendirilmiş durumda; # yazının kendi başlığına ayrıldı. Yukarıdaki içindekiler yalnızca ## ve ###‘ten kuruluyor — uzun bir sayfada işe yarar kalması için.

Üçüncü seviye bir başlık

Dördüncü seviye bir başlık

Listeler

• Sırasız bir madde
• Bir tane daha
  • Bir seviye iç içe
  • Ve kardeşi
    • İki seviye derinde
• Tekrar üst seviyeye

1. Sıralı listeler kendilerini sayar
2. Böylece yeniden numaralandırma bedava
   1. İç içe sıralama baştan başlar
   2. Beklendiği gibi
3. Üçüncü

Görev listeleri onay kutusu olarak çıkıyor:

• Yazıları Ghost’tan taşı
• Temayı yeniden kur
• Daha sık yaz

Alıntılar ve uyarı kutuları

Düz bir alıntı:

Erken optimizasyon tüm kötülüklerin anasıdır.

Ve iç içe olanı, alıntı içinde alıntı için.

GitHub tarzı uyarılar kutu olarak render ediliyor:

hint shortcode’u aynı şeyi üretiyor, birkaç ek ton ve isteğe bağlı bir başlıkla:

> [!WARNING]
> GitHub uyarı sözdizimi.

{{% hint danger %}}
Shortcode sözdizimi, içinde **markdown** ile.
{{% /hint %}}

Kod

Satır içi kod paragrafın içinde durur. Çitli bloklar bir dil alır:

@Cacheable(value = "products", key = "#id")
public Product getProductById(Long id) {
    log.info("Fetching from DB...");
    return productRepository.findById(id).orElse(null);
}

Satır numaraları ve vurgulanan satırlar blok başına ayarlanıyor:

1
2
3
4
5
6
7

func main() {
    http.HandleFunc("/healthz", func(w http.ResponseWriter, r *http.Request) {
        w.WriteHeader(http.StatusOK)
        io.WriteString(w, "ok")
    })
    log.Fatal(http.ListenAndServe(":8080", nil))
}

Diff’lerin kendi renklendirmesi var:

- server.tomcat.max-threads=200
+ server.tomcat.threads.max=200

Dili belirtilmemiş blok vurgulanmadan kalıyor — kaynak koddan çok çıktı için uygun:

BUILD SUCCESSFUL in 4s
12 actionable tasks: 12 executed

Girintili blok da çalışıyor, ama çit daha okunaklı.

Tablolar

Hizalama, ayraç satırında sütun bazında ayarlanıyor.

Görseller

Düz bir markdown görseli, büyütmek için tıklayın:

image shortcode’u açıklama ekliyor ve genişlik/yükseklik veriyor, böylece sayfa yüklenirken zıplamıyor:

gallery birkaçını yan yana diziyor:

Üçü de public domain, kaynak Wikimedia Commons.

![alternatif metin](/images/x.png)

{{< image src="/images/x.png" alt="…" caption="…" >}}

{{% gallery cols="3" %}}
![Bir](/images/a.png)
![İki](/images/b.png)
{{% /gallery %}}

Terminal kayıtları

asciinema bir kaydı gömüyor. Gerçek metin olduğu için oynatıcıdan seçilip kopyalanabiliyor — ekran görüntüsünün aksine.

{{< asciinema cast="/casts/demo.cast" speed="1.3" >}}

Oynatıcının anladığı her seçenek geçirilebiliyor: autoplay, loop, speed, theme, cols, rows, idleTimeLimit, preload.

Diyagramlar

Çitli ```mermaid bloğu diyagrama dönüşüyor. Açık ve koyu temayı takip ediyor.

graph LR
    A[Tarayıcı] -->|HTTPS| B(Nginx)
    B --> C{Önbellekte mi?}
    C -->|evet| D[Redis]
    C -->|hayır| E[Spring Boot]
    E --> F[(PostgreSQL)]
    E -.->|write-through| D

Sıra diyagramları:

sequenceDiagram
    participant C as İstemci
    participant A as API
    participant S as S3
    C->>A: POST /files
    A->>S: presign PUT
    S-->>A: imzalı URL
    A-->>C: 201 + URL
    C->>S: PUT dosya
    S-->>C: 200

Ve Mermaid’in geri kalan kataloğu — durum, sınıf, pasta, Gantt, git grafiği:

pie showData
    title Zaman nereye gidiyor
    "Kod yazmak" : 45
    "Kod okumak" : 30
    "Toplantı" : 15
    "YAML ile boğuşmak" : 10

Kütüphane yalnızca diyagram içeren sayfalarda indiriliyor; sıradan bir yazı bunun hiçbirini yüklemiyor.

Matematik

Front matter’da math: true ayarlandığında KaTeX hem satır içi hem blok formülleri render ediyor. Satır içi: işlem başına amortize maliyet \(O(1)\), \(n\) elemanla.

Satır içi: \\(O(1)\\)

$$
E = mc^2
$$

Sekmeler

Sekmeler JavaScript olmadan çalışıyor — her panel kendi radyo düğmesiyle gösteriliyor, dolayısıyla script yüklenmese de ayakta kalıyor ve yazdırmada doğru çıkıyor.

brew install hugo

sudo snap install hugo --channel=extended

choco install hugo-extended

{{< tabs >}}
{{% tab "macOS" %}} içerik {{% /tab %}}
{{% tab "Linux" %}} içerik {{% /tab %}}
{{< /tabs >}}

Adımlar

Katlanabilir bölümler

title: "Bu Blogun Render Edebildiği Her Şey"
date: 2020-01-01T09:00:00+03:00
tags: ["Referans", "Hugo", "Markdown"]
coverLabel: "Referans"
math: true
showToc: true
TocOpen: true

Sütunlar

Butonlar ve rozetler

GitHub Hakkımda

Rozetler satır içinde durur: bu özellik yeni , şu beta , eski API ise kullanımdan kalktı .

Diğer gömülü içerikler

Hugo yaygın video ve sosyal gömülüleri için hazır shortcode’lar sunuyor. Servisten bir kimlik gerektirdikleri için burada render edilmiş değil, sözdizimi olarak listeleniyorlar:

{{< youtube w7Ft2ymGmfc >}}
{{< vimeo 146022717 >}}
{{< x user="SanDiegoZoo" id="1453110110599868418" >}}
{{< instagram BWNjjyYFxVx >}}

Tema birkaç tane daha ekliyor:

{{< figure src="/images/x.png" title="Açıklama" >}}
{{< video src="/video/demo.mp4" >}}
{{< audio src="/audio/track.mp3" >}}
{{< rawhtml >}}<div>Ne olursa</div>{{< /rawhtml >}}

Ham HTML ve nitelikler

Satır içi HTML doğrudan geçiyor; markdown’ın karşılığı olmayan şeyler için kaçış yolu bu: Ctrl + K, CSS, ve uzun yoldan ^üst/_alt simge.

Başlıklara veya bloklara nitelik iliştirilebiliyor:

Kendi id’si olan bir başlık

O başlık #ozel-capa olarak bağlanabiliyor.

Üç tire, yatay bir çizgi, bölümü kapatıyor.

Burada olmayanlar

Unuttuğum değil, bilerek almadığım iki şey:

• OpenAPI render’ı. Bir spesifikasyon tarayıcısı gömmek, bir iki sayfa için büyük bir görüntüleyici taşımak demek. Spesifikasyona bir bağlantı işi görüyor.
• Yorumlar. Bir servis, moderasyon ve birilerinin verisi gerekiyor. E-posta adresim hakkımda sayfasının altında.