許虎虎 開發者工具集
HTML 轉 JADE

將 HTML 轉換為 Jade(現在稱為 Pug)是將標準的 HTML 代碼轉換為更簡潔、結構化的 Jade(Pug)模板語法的過程。Jade 使得 HTML 代碼更加簡潔,去除了許多冗餘的閉合標籤,並且語法更加符合縮排結構。

HTML 示例:
html

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="https://example.com">Click here</a>
</body>
</html>
轉換後的 Jade(Pug):
jade

html
head
title My Web Page
body
h1 Welcome to My Website
p This is a paragraph.
ul
li Item 1
li Item 2
li Item 3
a(href='https://example.com') Click here
轉換原則:
HTML 標籤:在 Jade 中,標籤名直接寫在行首,無需額外的閉合標籤。
層級結構:元素的層級結構通過縮進表示,通常使用兩個空格來縮進。
屬性:元素的屬性寫在括號內,並用 = 來賦值。例如:a(href='https://example.com')。
文本內容:如果元素包含文本,則將其直接寫在標籤名之後,並且不需要閉合標籤。