Công cụ chuyển đổi HTML sang Pug trực tuyến
Chuyển HTML sang cú pháp mẫu Pug (trước đây là Jade), sử dụng thụt lề thay cho thẻ đóng. Chuyển đổi giữa chế độ tài liệu đầy đủ và đoạn HTML, đồng thời chọn cách dùng tab, dấu phẩy và dấu ngoặc kép. HTML được chuyển đổi ngay trong trình duyệt mà không cần tải lên.
Tạo mẫu Pug từ mã HTML có sẵn.
HTML is sent to the server for conversion. Use a snippet without confidential data.
Khi nào nên sử dụng
- Tạo mẫu Pug từ mã HTML có sẵn.
- Kiểm tra cách ánh xạ thuộc tính và cấu trúc lồng nhau sang Pug trên một đoạn ngắn trước khi chuyển đổi cả trang.
Cách sử dụng
- Dán HTML hoặc tải một ví dụ (đoạn HTML, thuộc tính biểu mẫu, tài liệu HTML). Khi tải ví dụ, nội dung đầu vào hiện tại sẽ được thay thế.
- Bật chế độ đoạn HTML để chỉ chuyển đổi đoạn mã, không thêm các phần tử bao ngoài html, head và body. Ví dụ dưới đây dùng chế độ đoạn HTML, bật tab và dấu phẩy, tắt dấu ngoặc kép.
- Sao chép Pug rồi biên dịch bằng bộ công cụ Pug của bạn để kiểm tra HTML được kết xuất.
HTML đầu vào
<section class="card"><h2>News</h2><p>Registration is open</p></section>
Pug đầu ra (chế độ đoạn HTML, bật tab và dấu phẩy)
section.card h2 News p Registration is open
Chi tiết và giới hạn
Khi tắt chế độ đoạn HTML, HTML được xử lý như một tài liệu và có thể được bổ sung html, head và body. Hãy bật chế độ này khi bạn chỉ cần các phần tử trong đoạn mã.
Trộn tab với dấu cách có thể làm thay đổi quan hệ cha–con trong Pug. Hãy tuân theo quy tắc thụt lề của dự án.
Các phần HTML lặp lại không được chuyển thành vòng lặp each, mixin hay biến trong Pug; CSS, ảnh và tập lệnh bên ngoài cũng không được đưa vào.
Trình phân tích HTML có thể sửa các thẻ chưa hoàn chỉnh. Chuyển đổi thành công không có nghĩa HTML đã được xác thực hoặc trang tạo ra sẽ giống hệt bản gốc.
FAQ
Tại sao các thẻ html và body được thêm vào?
Ở chế độ tài liệu, trình phân tích bổ sung các phần tử bao ngoài cho đầy đủ. Hãy bật chế độ đoạn HTML để chuyển đổi HTML của một thành phần mà không thêm phần tử bao ngoài.
Tôi có thể chuyển HTML sang Pug trong VS Code hoặc từ dòng lệnh không?
Trang này sử dụng gói mã nguồn mở html2pug. Cài gói từ npm để chuyển đổi tệp bằng tập lệnh hoặc dòng lệnh, hoặc tiếp tục dùng trang này để xử lý nhanh các đoạn mã.
Làm thế nào để chuyển Pug trở lại HTML?
Trang này chỉ chuyển HTML sang Pug. Hãy biên dịch mẫu bằng chính Pug — ví dụ với gói pug-cli — để nhận lại HTML.
HTML của tôi có được tải lên không?
Không. Việc chuyển đổi diễn ra ngay trong trình duyệt và HTML không được tải lên. Hãy xóa nội dung đầu vào sau khi dùng thiết bị chung.