Přejít na hlavní obsah

Jak připojit Pug k HTML

  • Stanislava Jelínek
  • Praxe

Pug - je to šablonizátor, který pomáhá vývojářům zjednodušit a urychlit proces vytváření webových stránek. Umožňuje vám použít pohodlnou a expresivní syntaxi k popisu struktury HTML kódu. Pokud chcete vědět, jak připojit Pug k HTML a začít jej používat ve svých projektech, pak jste na správné adrese!

Chcete-li začít s Pug, budete jej muset nainstalovat. Můžete to udělat pomocí správce balíčků npm spuštěním příkazu:

npm install pug

Po instalaci budete muset otevřít nový soubor a uložit jej s příponou .pug. V tomto souboru budete moci popsat strukturu vaší webové stránky pomocí syntaxe Pug.

Chcete-li připojit Pug k HTML, budete muset kompilovat soubor Pug do HTML kódu. K tomu použijte následující příkaz:

Po provedení tohoto příkazu, Pug zkompiluje váš soubor do HTML a vytvoří nový soubor s názvem název souboru.html. Nyní můžete tento soubor otevřít v prohlížeči a vidět výsledek.

Instalace Pug

Chcete-li připojit Pug k vašemu projektu, musíte postupovat podle následujících kroků:

1.Zkontrolujte, zda máte nainstalovaný Node.js. Jeho přítomnost můžete zkontrolovat zadáním příkazu node-v na příkazovém řádku. Pokud Node.js není nainstalován, Stáhněte si jej a nainstalujte z oficiálních stránek.
2.Otevřete příkazový řádek a přejděte do kořenové složky projektu.
3.Spusťte příkaz npm init pro inicializaci nového projektu. To vám umožní spravovat závislosti ve vašem projektu.
4.Nainstalujte Pug spuštěním příkazu npm install pug .
5.Nyní můžete ve svém projektu použít Pug. Vytvořte nový soubor s příponou .pug a začněte psát kód Pug.

Zde je jednoduchý příklad použití Pug:

p| Привет, мир!

Toto je Kód Pug, který bude kompilován do následujícího HTML:

Привет, мир!

Instalace Pug vám tedy umožňuje používat tento šablonizér ve vašem projektu a výrazně usnadnit vývoj HTML kódu.

Krok 1. Instalace Node.js

Node.js je runtime JavaScript, které vám umožňuje vyvíjet serverovou část webových aplikací. Pug je jedním z populárních šablon pro Node.js.

Chcete-li nainstalovat Node.js, postupujte takto:

1. Přejděte na oficiální web Node.js na adrese https://nodejs.org.

2. Stáhněte si instalační program Node.js pro váš operační systém (Windows, macOS, Linux) a spusťte jej.

3. Při výběru nastavení podle vlastního uvážení postupujte podle pokynů instalačního programu. Ve výchozím nastavení musíte nastavit Node.js a npm (Node Package Manager).

4. Po dokončení instalace, zkontrolujte, že Node.js byl úspěšně nainstalován otevřením terminálu (příkazového řádku) a zadáním příkazu node -v. Pokud máte verzi Node.js, takže instalace byla úspěšná.

Gratuluji, úspěšně jste nainstalovali Node.js! Nyní jste připraveni pokračovat v práci se Šablonovačem Pug.

Krok 2. Instalace Pug

Než začnete Pug používat, musíte jej nainstalovat do počítače. Chcete-li to provést, postupujte podle pokynů níže:

  1. Nainstalujte Node.js Přejděte na oficiální web Node.js na adrese https://nodejs..org / a stáhněte si nejnovější verzi LTS pro váš operační systém. Nainstalujte Node.js podle pokynů instalátoru.
  2. Nainstalujte Pug přes npm Otevřete příkazový řádek (terminál) a zadejte příkaz: npm install pug zahájí proces instalace Pug prostřednictvím správce balíčků npm. Počkejte na dokončení instalace.
  3. Zkontrolujte instalaci Chcete-li se ujistit, že je Pug úspěšně nainstalován, spusťte na příkazovém řádku následující příkaz: pug --version

Nyní je Pug připraven k použití. Budeme pokračovat s nastavením projektu a vytvořením prvního souboru Pug.

Nastavení projektu

Chcete-li připojit pug k HTML v projektu, musíte postupovat podle následujících kroků:

  1. Nainstalujte pug spuštěním příkazu "npm install pug" na příkazovém řádku.
  2. Vytvořte soubory s příponou .pug, kde bude umístěn váš značkovací kód.
  3. Nakonfigurujte sestavení projektu tak, aby soubory .pug byly kompilovány do souborů .html. To lze provést například pomocí sběrače projektů, jako je Webpack.
  4. Připojte zkompilované soubory .html k vašemu projektu pomocí značek nebo uvnitř značky v souboru index.html.

Po dokončení těchto kroků bude váš projekt nakonfigurován tak, aby fungoval s pug, a budete moci využít jeho výkonné funkce k vytvoření dynamického značení HTML.

Krok 3. Vytvoření složky pro projekt

Než začnete s Pug, musíte vytvořit speciální složku pro váš projekt. To vám umožní uspořádat soubory a zdrojový kód vašeho projektu v pohodlnějším formátu.

Vytvořte novou složku v počítači a pojmenujte ji tak, aby odpovídala vašemu projektu. Můžete ji například nazvat "my-pug-project".

V této složce budete vytvářet a ukládat všechny soubory související s vaším projektem, včetně Pug souborů, CSS souborů a dalších.

Doporučuje se také vytvořit samostatnou složku pro soubory Pug. Můžete ji nazvat " pug " nebo nějak jinak, aby odpovídala účelu složky.

Než začnete pracovat na projektu, ujistěte se, že jste vytvořili správnou strukturu složek a vložili všechny potřebné soubory do příslušných složek.

Krok 4. Inicializace projektu

Po instalaci Pug je nutné inicializovat projekt, aby bylo možné použít jeho funkčnost ve svém HTML souboru.

Chcete-li to provést, musíte vytvořit nový soubor s příponou .pug a uložit jej do složky projektu.

V tomto souboru můžete zadat počáteční šablonu pro projekt, nastavit proměnné, použít podmíněné operátory a další.

Poté, Chcete-li použít vytvořený soubor Pug v HTML, musíte otevřít soubor HTML a přidat následující řádek:

include název souboru.pug

Místo "název souboru" musíte zadat název dříve vytvořeného souboru Pug.

Nyní bude Pug připojen k HTML a všechny změny provedené v souboru Pug se automaticky zobrazí v HTML.

Gratuluji, úspěšně jste proinicializovali projekt a jste připraveni použít Pug ve svém HTML souboru!

Krok 5. Vytvoření souboru layout.pug

Chcete-li vytvořit soubor layout.pug, který bude obsahovat sdílenou šablonu stránky, musí být dodrženy následující kroky:

  1. Vytvořte nový soubor s názvem layout.pug.
  2. Otevřete soubor layout.pug v textovém editoru.
  3. Vložte následující kód do souboru:

doctype html

html(lang="ru")

head

meta(charset="UTF-8")

title Můj web

link(rel="stylesheet", href="style.css")

body

header

h1 Můj web

section

footer

p © 2025 moje stránky

p Všechna práva vyhrazena.

Tento kód nastavuje základní strukturu stránky, včetně záhlaví, metadat, stylů CSS a celkového rozvržení stránky.

Poznámka: nahraďte "můj web" názvem vašeho webu a zadejte správnou cestu k souboru style.css, pokud je to nutné.

Použití Pug v HTML

Chcete-li použít Pug v HTML, musíte postupovat podle následujících kroků:

  1. Nainstalujte Pug pomocí správce balíčků, jako je npm: npm install pug.
  2. Vytvořit soubor s příponou .pug a napsat do něj kód v syntaxi Pug.
  3. Zkompilovat soubor Pug do HTML pomocí příkazu, například, pug index.pug.
  4. Použít přijatý HTML kód ve svém projektu.

Příklad kódu na Pug:

doctype htmlhtml(lang='en')headtitle My Pug Pagebodyh1 Hello, Pug!p This is my first Pug template.

Po kompilaci tohoto kódu v HTML získáte následující výsledek:

My Pug Page
Hello, Pug!
This is my first Pug template.

Použití Pug v HTML tedy umožňuje výrazně zjednodušit a urychlit proces psaní a podpory kódu. Pro použití Pug v HTML je nutné provést několik kroků, které zahrnují instalaci Pug, psaní kódu v syntaxi Pug, kompilaci souboru Pug v HTML a použití přijatého kódu v projektu.

Krok 6. Připojení Pug k HTML

Pro připojení Pug k HTML je třeba provést několik kroků:

  1. Instalace Pug: npm install pug
  2. Vytvořit soubor s příponou .pug a napsat do něj kód: doctype html html (lang= "cs") head title Moje stránka body h1 Ahoj Pug! p je ukázkový text. V tomto příkladu je vytvořena jednoduchá HTML stránka s nadpisem a odstavcem.
  3. Převést Pug na HTML: pomocí příkazu: pug název souboru.pug ve výsledku vytvoří soubor s příponou .html, který bude obsahovat kompilovaný kód Pug ve formátu HTML.
  4. Připojte výsledný soubor HTML k vašemu projektu: vytvořte prázdný soubor HTML a přidejte do něj následující kód: DOCTYPE html < html lang="ru" >< head >< meta charset="UTF-8" >< meta name="viewport" content="width=device-width, initial-scale=1.0" >< title >Moje stránka < /title >< /head >< body >< include src="https://mksegment.ru/c/%D0%B8%D0%BC%D1%8F-%D1%84%D0%B0%D0%B9%D0%BB%D0%B0.html" >< /body >< /html >Místo " název souboru.HTML " zadejte cestu k dříve vytvořenému souboru HTML z Pug.

Nyní máte hotovou HTML stránku vytvořenou pomocí Pug!

Krok 7. Převod Pug na HTML

V předchozích krocích jsme nakonfigurovali projekt a vytvořili hlavní soubor Pug. Nyní je čas jej převést na HTML.

K tomu je třeba použít balíček Pug CLI, který nám umožňuje kompilovat soubory Pug do HTML.

Nainstalujte Pug CLI spuštěním následujícího příkazu v terminálu:

npm install -g pug-cli

Po instalaci přejděte do adresáře se svým projektem a pomocí následujícího příkazu zkompilujte soubor Pug:

pug index.pug

Tím se vytvoří soubor index.html, jehož obsah bude generován z vašeho Pug souboru.

Nyní můžete otevřít soubor index.html v libovolném prohlížeči a vidět výsledek vaší práce. Pokud jste provedli změny v souboru Pug, jednoduše opakujte příkaz pro kompilaci a aktualizujte stránku v prohlížeči.

Gratuluji! Úspěšně jste převedli Pug na HTML a jste připraveni jej použít ve svém projektu.

Čtěte také