HTML'den Pug'a (Jade)

Nasıl çalışır?

Elinizde hazır bir HTML sayfası ya da tasarımcının verdiği bir parça var, projeniz ise Express veya başka bir Node.js sunucusunda Pug şablonu kullanıyor. HTML'i sol panele yapıştırın; Pug karşılığı sağ panelde hemen oluşur. Örneğin <div class="kart" id="siparis"> satırı .kart#siparis olur: sınıfı ya da kimliği olan div için etiket adı yazılmaz, çünkü Pug'da varsayılan etiket zaten div'dir. Diğer öznitelikler parantez içine girer: a(href='/', target='_blank'). Tek satırlık metin etiketin yanında kalır (p Merhaba), kalın ya da bağlantılı karışık metin | ile başlayan satırlara bölünür. script, style ve pre içeriği harfi harfine korunur. Sonuç satırı kaç etiketin kaç Pug satırına dönüştüğünü söyler.

Bu araç html to pug, html to jade, html to pug converter aramalarıyla da biliniyor.

Pug (Jade) nedir?

Pug, Node.js dünyasında yaygın bir HTML şablon dilidir. Kapanış etiketi yazılmaz; hangi öğenin hangisinin içinde olduğunu satır başındaki girinti belirler. Değişken, döngü ve koşul yazılabildiği için Express gibi sunucularda sayfa üretmek için kullanılır. 2016'ya kadar adı Jade idi; eski projelerde .jade uzantılı dosyalar bu yüzden görülür.

Sınıf ve kimlik kısaltması nedir?

Pug'da bir etiketin sınıfı nokta, kimliği diyez ile etiket adının hemen yanına yazılır: section.icerik#ana. Etiket adı hiç yazılmazsa Pug o satırı div sayar; yani .kart tek başına <div class="kart"> demektir. Nokta kısaltması yalnızca harf, rakam, tire ve alt çizgi taşıyabilir; iki nokta ya da eğik çizgi içeren sınıflar parantez içindeki class özniteliğine yazılır.

HTML ile Pug arasındaki fark nedir?

HTML her öğeyi açılış ve kapanış etiketiyle çevreler; tarayıcı doğrudan okur. Pug ise aynı yapıyı girintiyle anlatır, kapanış etiketi yoktur ve sınıf, kimlik gibi sık yazılan parçalar kısalır. Pug dosyası tarayıcıya gitmeden önce sunucuda derlenip HTML'e dönüşür; karşılığında şablona değişken, döngü ve ortak parça eklemek kolaylaşır. Kısacası HTML çıktının kendisidir, Pug o çıktıyı üreten tariftir.

Çeviride dikkat edilecek üç nokta

Boşluk: Pug, satırlar arasına boşluk koymaz. "Merhaba <b>dünya</b>" gibi karışık metinde kelime arasındaki boşluk kaybolmasın diye araç boşluğu | satırının sonunda bırakır. Çıktıyı elle düzenlerken bu satır sonu boşluklarını silmeyin.

Diyez ve süslü parantez: Pug metin içinde #{...} ve #[...] yazımını kod olarak çalıştırır. HTML'inizde "#{" geçiyorsa araç onu \#{ olarak kaçırır; Pug bunu düz metin olarak basar.

Özel karakterli sınıflar: Tailwind'in md:flex ya da w-1/2 gibi sınıfları Pug'un nokta kısaltmasına sığmaz. Araç bunları class='md:flex' özniteliğine taşır; Pug iki yazımı birleştirip aynı class değerini üretir.

Ters yön neden yok?

Pug'dan HTML'e çeviri, Pug derleyicisinin kendisini gerektirir; o da JavaScript ayrıştırıcısıyla birlikte tarayıcıya yüklenince 2 MB sınırını aşıyor. Bu yüzden sayfa yalnız HTML'den Pug'a çevirir.

Pug dosyanızı HTML'e çevirmeniz gerekiyorsa projenizde pug paketinin derleme komutunu kullanın; aynı dosya sunucu tarafında zaten bu şekilde işleniyor.

Kapanmamış etiketler

Tarayıcılar kapanmamış etiketi hoş görür, Pug ise yapıyı yalnızca girintiden okur. Araç kapanmamış etiketin içeriğini kaybetmeden okur, ama iç içe yapıyı tahmin etmek zorunda kalır. Böyle bir durumda sonuç satırına "kapanmamış etiket var" uyarısı eklenir; çıktıdaki girintiyi kontrol edin.

Sık sorulanlar

Jade ile Pug aynı şey mi?

Evet. Jade şablon dili 2016'da ticari marka sorunu yüzünden Pug adını aldı. Sözdizimi büyük ölçüde aynıdır; bu aracın ürettiği çıktı hem güncel Pug sürümlerinde hem eski Jade dosyalarında çalışan temel yazımı kullanır.

Öznitelik değerindeki &amp; neden & oldu?

Pug, öznitelik değerini sayfaya yazarken kendisi kaçırır. HTML'deki &amp; olduğu gibi bırakılsaydı Pug onu bir kez daha kaçırır ve sayfada &amp;amp; çıkardı. Araç değeri çözülmüş haliyle yazar; derlenen HTML sizin orijinal kodunuzla aynı olur.

Yorumlar korunuyor mu?

Evet. HTML yorumu // ile başlayan Pug yorumuna çevrilir ve derlenen sayfada yine HTML yorumu olarak görünür. Yorumun sayfaya hiç çıkmamasını istiyorsanız // işaretini //- olarak değiştirin.

Kodum bir sunucuya gönderiliyor mu?

Hayır. HTML'i ayrıştıran kütüphane de Pug yazıcısı da tarayıcınızda çalışır; yapıştırdığınız kod bu sayfadan hiçbir yere gitmez.