Pugの基本的な書き方

HTML Pug

Pugの基本的な書き方

Pugの基本的な書き方は、HTMLをシンプルに書くためのテンプレートエンジンを使用する際に役立ちます。
基本的な構文は以下の通りです。

1. タグの記述

doctype html
html
  head
    title My Pug Template
  body
    h1 Hello, World!
    p This is a paragraph.

2. 属性の指定

a(href="https://example.com" target="_blank") Link to Example

3. クラスやIDの指定

div.class-name#id-name Content

4. ネスト

ul
  li Item 1
  li Item 2
  li Item 3

5. テキストの追加

p This is some text.

6. 変数の使用

- var name = "John"
p Hello, #{name}!

7. 条件分岐

- var isAuthenticated = true
if isAuthenticated
  p Welcome back!
else
  p Please log in.

8. ループ

- var items = ['Item 1', 'Item 2', 'Item 3']
ul
  each item in items
    li= item