HTML to Pug Converter

Chuyển đổi HTML sang cú pháp template Pug

Thẻ: chuyển đổi mã html pug trình chuyển đổi mẫu

Code mẫu

🚀 194,724 tổng số lượt chuyển đổi (4 trong tháng này)

Công cụ này là gì?

Công cụ trực tuyến miễn phí này cho phép bạn nhanh chóng chuyển đổi HTML tiêu chuẩn thành các mẫu Pug sạch sẽ, thụt lề. Nó lý tưởng cho các nhà phát triển sử dụng Node.js và các framework web hiện đại, những người ưa thích mã dễ đọc và bảo trì.

Cách sử dụng

Dán mã HTML của bạn vào trình chỉnh sửa hoặc nhập thủ công.
Nhấp vào Chuyển đổi để tạo mã Pug tương ứng.
Tải xuống, sao chép hoặc chia sẻ kết quả với một liên kết duy nhất.

Bạn cũng có thể đăng nhập bằng Google hoặc GitHub để lưu lịch sử chuyển đổi của bạn cho lần sử dụng sau.

Pug là gì?

Pug là một công cụ mẫu hiệu suất cao cho Node.js, lấy cảm hứng từ Haml. Nó thay thế HTML truyền thống bằng cú pháp ngắn gọn, nhạy cảm với khoảng trắng, cải thiện độ rõ ràng của mã và giảm sự lặp lại.

Pug thường được sử dụng trong các ứng dụng web được xây dựng với Express.js và cung cấp các tính năng nâng cao như tái sử dụng mã, nhúng logic và thụt lề sạch hơn.

Tìm hiểu thêm tại tài liệu chính thức của Pug.

Ví dụ về cú pháp Pug


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p Bạn thật tuyệt vời
      else
        p Hãy bắt đầu sử dụng nó!
      p.
        Pug là một ngôn ngữ mẫu ngắn gọn và đơn giản
        với sự tập trung mạnh mẽ vào hiệu suất và tính năng.

Ví dụ HTML vs Pug

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>Bạn thật tuyệt vời</p>
      <p>Pug là một ngôn ngữ mẫu ngắn gọn và đơn giản với sự tập trung mạnh mẽ vào hiệu suất và tính năng mạnh mẽ.</p>
    </div>
  </body>
</html>

Pug


doctype html
html(lang="en")
  head
    title Pug
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      p Bạn thật tuyệt vời
      p Pug là một ngôn ngữ mẫu ngắn gọn và đơn giản với sự tập trung mạnh mẽ vào hiệu suất và tính năng mạnh mẽ.