Yapıştırmadan önce gözle kontrol etmeniz gereken şablonlar için Pug'dan HTML'e
Pug (ve eski Jade sözdizimi) açılı parantezleri girintiyle değiştirir. Bu hoş bir takas — ta ki yirmi satır iç içe etikete bakıp `nav.main-nav`'ın üç seviye yukarıda doğru kapanıp kapanmadığını hatırlamaya çalışana kadar. Alışılmış çözüm, Node kurulu bir makinede `pug` CLI'sıdır. Bu sayfa derleme adımını zaten açık olan sekmenizde yapar. Bir parça yapıştırın, `.pug` veya `.jade` dosyası yükleyin, düzenlerken sağda HTML'i okuyun. Derleme sayfa yüklendikten sonra yerelde çalışır — dönüşüm için hiçbir şey sunucuya gönderilmez. Bu tezgâhı tek seferlik «yapıştır ve umut et» dönüştürücülerden ayıran önizlemedir: ham işaretlemeyi bırakıp derlenmiş sayfanın oluşturulmuş görünümüne geçersiniz; HTML bir CMS'e, e-posta aracına veya ekip arkadaşının deposuna gitmeden önce düzen hatalarını yakalarsınız.
Görsel dönüşüm, girintiyi kafada okumaktan iyidir
Çoğu Pug HTML aracı bir metin kutusu ve indirme bağlantısı verir. Beş satırlık parça için yeter. Navigasyon işaretlemesini, kart ızgarasını veya karışık metin ve bağlantılı bir alt bilgiyi kontrol ederken yetmez. Burada kaynak ve çıktı aynı anda görünür. Girintiyi değiştirin, HTML paneli güncellenir, boşluk ve hiyerarşi önemliyse — yalnızca bir yerde `</div>` olup olmadığı değil — Öniz sekmesine geçin. Düzenleyicinin altındaki durum şeridi şablonun ayrışıp ayrışmadığını söyler. Ayrışmazsa, boş sessiz panel yerine kırılan satırda derleyici mesajını görürsünüz. Canlı HTML artı korumalı oluşturma — pratik fark budur. Sayfanın doğru görünüp görünmediğini başka bir uygulamada açmadan işaretlemeyi körü körüne dışa aktarmazsınız.
Zaman kaybetmemeniz için iki sınırı baştan söyleyelim. Bu araç yapıştırdığınız veya içe aktardığınız Pug'u tarayıcıda derler. Proje klasörü okumaz; `include`, `extends` ve harici partial'lar kapsam dışıdır. Aynı dosyadaki mixin'ler, koşullar, döngüler ve `style.` / `script.` blokları normal yerel derleme gibi davranır. Şablonun başında çok satırlı JavaScript yazıyorsanız — örneğin menü öğeleri dizisi — tek başına bir `-` satırı kullanın ve altına girintili JavaScript bloğunu yazın. Pug `-` sonrası yalnızca ilk satırı kod sayar; bu kalıp olmadan diziyi bir sonraki girintili satırda sürdürmek yaygın bir sözdizimi tuzağıdır; kuralı bilene kadar hata mesajı şifreli görünebilir.
Dönüştürücüye dönYalnızca kaynak değil, oluşturulan önizleme
Öniz sekmesi derlenmiş HTML'i korumalı bir iframe'de yükler. Başlıklar, listeler ve bağlantılar tarayıcının çizeceği gibi görünür — girinti tek başına bir bölümün doğru yerde olup olmadığını söylemediğinde işe yarar.
Sözdizimini düzeltirken yan yana
Solda Pug, sağda HTML. Küçük düzenlemeler — öznitelik yeniden adlandırma, sınıfta eksik nokta — kopyalamadan veya indirmeden önce hemen görünür.
Hızlı teslim için kurulum yok
Yalnızca bir bilette veya tek seferlik bir landing bloğu için işaretleme mi lazım? `npm install pug` ve yerel betiği atlayın. İçe aktarın, çevirin, kopyalayın, devam edin.
Pug'u HTML'e çevirin ve yalnızca etiketleri değil sayfayı doğrulayın
Yan yana düzenleme, derlenmiş HTML'in oluşturulan önizlemesi, kopya iş akışları için ham işaretleme ve dışa aktarma — kaynağınızı sunucuya yüklemeden.
Yapıştırmadan önce güvenebileceğiniz görsel dönüşüm
Düzen kasıtlı olarak sade: bir tarafta Pug girişi, diğerinde çıktı. Yazdıkça HTML paneli yenilenir. Belgeyi sayfa olarak görmek istediğinizde — navigasyon çubukları, kart ızgaraları, alt bilgi sütunları — girintili kısaltmadan yapı çıkarmak yerine Öniz'e geçin. Bu görsel geçiş, yalnızca açılı parantez çıktısına göz atarken kaçan hataları yakalar: eksik sarmalayıcı, yanlış öğedeki sınıf, bağlantının içinde olması gereken metnin yanında kardeş olarak durması. Öznitelikleri incelemek, CMS bloğu için parça kopyalamak veya mevcut dosyayla karşılaştırmak gerektiğinde ham HTML bir tık uzağınızdadır. Yalnızca önizleme veya yalnızca kaynakla kilitli değilsiniz; iş akışı şablonları gerçekten nasıl gözden geçirdiğinize uyar.
Bu sayfada Pug'u HTML'e nasıl çevirirsiniz?
Pug kaynağınızı ekleyin
Sol panele yapıştırın veya `.pug` / `.jade` dosyası için Yükle'yi kullanın. Girinti iç içe geçmeyi tanımlar — dosya içinde sekme ve boşluk tutarlı olmalı. Tamponlanmamış JavaScript (`-`) ile değişken veya dizi tanımlıyorsanız, çok satırlı kodu tek başına bir `-` satırının altına, betiği girintili yazın.
HTML'i okuyun ve Öniz'i açın
Sağ panel varsayılan olarak derlenmiş sayfanın oluşturulmuş önizlemesini gösterir. Gerçek etiketler için HTML'e geçin. Giriş panelinde hata varsa önce o satırı düzeltin; şablon ayrışana kadar önizleme ve dışa aktarma engellenir.
Kopyalayın, indirin veya playground'da devam edin
Hedef başka bir araç veya CMS HTML bloğuysa Kopyala'yı kullanın. İndir bir `.html` dosyası kaydeder. HTML önizle / görsel düzenle, yalnızca Pug'un ötesinde görsel düzenleme istediğinizde güncel çıktıyı ana sayfa playground'una gönderir.
Pug HTML çevirme: gerçekten karşılaşılan sorular
Gerçekten gördüğünüz HTML'e Pug'u çevirmeye hazır mısınız?
Yan yana düzenleme, oluşturulan önizleme, kopyalama ve indirme — ücretsiz, hesap gerekmez.
Pug HTML çevirme
- Pug ve HTML yan yana görsel dönüşüm
- Dışa aktarmadan önce derlenmiş HTML'in oluşturulan önizlemesi
- Kopyala, indir veya playground'da aç
- Yüklemeden sonra tarayıcıda yerel çalışma
Yalnızca kendi kendine yeten şablonlar — diskten `include` veya `extends` yok.
