HTML | PUG

Məzmun

1. PUG nədir?
2. HTML kodlarınızı PUG-a çevirmək
3. Yüklənməsi
4. İstifadəsi
5. Faydalı mənbələr

Köhnə adı Jade olan Pug HTML kodlarının yazılışını sadələşdirən və aç-bağla etiket üsulundan xilas edən sintaksisdir (şablon mühərrikidir).

HTML-dən PUG-a çevrilmə

Gördüyünüz kimi HTML-də (sol tərəfdəki) nümunə kimi div teqindən istifadə etdik və heç bir böyükdür/kiçikdir işarəsi və bağlanma teqi olmadan sadə şəkildə yazıldı. Burada iç-içə teq funksiyasını intendation, yəni sətir buraxmanın köməyi ilə etdi (Python kimi). Kodlamada bu cür sətir buraxma kodu daha asan tətqiq etməyə imkan verir.

PUG-da olub HTML-də olmayan bir çox funksiya mövcuddur.

Dəyişənlər, şərt və dövr operatorları kimi. Məsələn:

Li etiketi

İndiki vaxtda bir çox alət kimi, Pug da terminalda yazılmış npm əmrindən istifadə edərək sisteminizə asanlıqla quraşdırıla bilən bir node paketidir. Bunu istənilən editorun və ya ƏS-in terminalında etmək olar. Əvvəlcə bunu

Windows terminalında göstərək.

Qeyd: Terminaldan npm (npm node paket idarəedicisidir və node.js yükləndikdə o da avtomatik olaraq yüklənir) əmrlərini işə salmaq üçün ilk öncə NodeJS yükləməlisiniz. Daha sonra CMD hissəsinə

npm i -g pug-cli

Kod sətrini əlavə edirsiniz. Daxil etdikdən sonra sizdə Pug və Pug-cli (komanda xətti interfeysi ) artıq yüklənmiş olur. Yükləndiyindən əmin olmaq üçün

pug --version

yazın. Ekranda qarşınıza pug və pug-cli versiyaları çıxacaq.

PUG versiyası

İndi gəlin Pug-da hər hansısa yazdığımız kodu HTML-ə kompayl edək:

Get Nail Mammadov’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

İlk öncə terminalda pug-examples adlı qovluq açaq və ardınca həmin qovluğa daxil olaq. (terminal vasitəsilə)

mkdir pug-examples
cd pug-examples

Və daha sonra həmin qovluq daxilində html qovluğu və index.pug faylı açaq.

mkdir html
echo.> index.pug (linux və macOs üçün touch index.pug)

İndi biz yazacağımız kodu pug-cli interfeysi tərəfindən görünməsinə icazə verməliyik. Yenə də eyni yni qovluğun içində yazırıq:

pug-examples>pug -w ./ -o ./html -P

Yuxarıdakı

-w Pug-a mövcud qovluqdakı hər şeyi izləməyi (watch)

-o ./html isə Pug-a html qovluğunda nəticəni (output) html formatında hazır etməyi

-P (prettify) isə həmin kodu səliqəyə salmağı əmr edir.

Terminalda ekrana belə bir nəticə çıxacaq:

watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

Gəlin indi yaratdığımız index.pug-a hər hansı seçdiyimiz editor vasitəsilə daxil olaraq pug sintaksisində kodumuzu yazaq.Məsələn,

doctype html
html(lang='en')
head
title Hello, World!
body
h1 Hello, World!
div.remark
p Pug rocks!

Yazdıqdan sonra onu pug.index kimi yaddaşda saxlayaq. Bu zaman pug-examples qovluğunda pug.index faylı və pug-examples qovluğunda yerləşən bayaq yaratdığımız html qovluğunun içində də render edilmiş index.html faylı yaranacaq.

Təbrik edirəm. Kompayl edilmiş kodumuz hazırdır :)

Qeyd: Eyni proses hər hansısa bir editorun (Visual studio məsələn) terminalında da eyni kodları daxil edərək aparıla bilər.

Faydalı mənbələr

Getting Started

BUTA.İO komandasının yazarı : Pərvin Hüseynov