Konwerter HTML do Pug

Szybko konwertuj kod HTML na kod Pug. Obsługuje konwersję w przeglądarce lokalnej, posiada edytor kodu i funkcję autouzupełniania.

1044 użyć | 5.0 ocena

Wejście HTML

Wyjście Pug

Instrukcje obsługi

1

Wprowadź kod HTML

Wklej lub wprowadź kod HTML, który chcesz przekonwertować, do pola wejściowego po lewej stronie.

2

Wykonaj konwersję

Kliknij przycisk "Konwertuj do Pug", aby przekonwertować kod HTML na format Pug.

3

Przejrzyj wyniki

Zobacz przekonwertowany kod Pug w polu wyjściowym po prawej stronie.

4

Użyj wyników

Skopiuj lub pobierz przekonwertowany kod Pug do swojego projektu.

Podstawy silnika szablonów Pug

Co to jest Pug?

Pug (wcześniej Jade) to wysokowydajny silnik szablonów, który kompiluje się do HTML i jest szeroko używany w środowisku Node.js. Pug oferuje简洁、优雅的语法,让开发者能够以更少的代码编写结构化的HTML页面,同时支持变量、混入、条件判断等高级特性。

Główne zalety Pug

Prosta składnia, mniej kodu powtarzalnego

Składnia z wcięciami, zwiększona czytelność kodu

Wsparcie dla dziedziczenia i inkluowania szablonów

Silne wsparcie dla wyrażeń logicznych

Automatyczne ucieczki znaków, zwiększona bezpieczeństwo

Słabe włączenie z ekosystemem JavaScript

Porównanie składni HTML i Pug

Składnia HTML:
<div class="container">
  <h1>Strona powitalna</h1>
  <p class="description">
    To jest przykładowy akapit
  </p>
  <ul>
    <li>Element listy 1</li>
    <li>Element listy 2</li>
  </ul>
</div>
Składnia Pug:
.container
  h1 Strona powitalna
  p.description
    | To jest przykładowy akapit
  ul
    li Element listy 1
    li Element listy 2

Przykłady常用Pug składni

Elementy i tekst
h1 Tekst tytułu
Klasy i ID
div.container#main
Atrybuty inline
a(href='link', title='tytuł')
Zawartość zagnieżdżona
div
  p Tekst zagnieżdżony
Komentarze
//- Komentarz niewyświetlany
// Komentarz HTML który będzie wyświetlony
Zmienne
- var name = 'użytkownik'
p= name

Uwagi dotyczące konwersji

  • Złożone struktury HTML mogą wymagać ręcznego dostosowania do najlepszych praktyk Pug
  • Pug zależy od严格的缩进, upewnij się, że przekonwertowany kod ma prawidłowe wcięcia
  • Bloki skryptów i stylów w HTML mogą wymagać specjalnego przetwarzania po konwersji
  • Dla dużych projektów zaleca się używanie profesjonalnych konwerterów Pug lub wtyczek frameworków
Anuncie tutaj

推荐工具

Narzędzia do formatowania XML - Darmowe narzędzie online do upiększania i kompresji kodu XML

Darmowe narzędzie do formatowania XML online, które obsługuje funkcje takie jak upiększanie kodu XML, kompresja, walidacja itp., dzięki czemu Twój kod XML jest bardziej standardowy i czytelny. Udostępnia podgląd formatowania w czasie rzeczywistym i obsługuje wiele opcji formatowania XML.

XML na JSON - Darmowe narzędzie do konwersji online

Narzędzie XML na JSON może analizować i konwertować ciągi znaków w formacie XML i JSON, oraz formatować przekonwertowane ciągi.

Narzędzie online do formatowania i minifikacji JavaScriptu – Ulepsz, zoptymalizuj i zaciemnij kod JS

Potężne narzędzie online do formatowania i kompresji kodu JavaScript (JS). Obsługuje niestandardowe wcięcia (tabulatory lub spacje), zwijanie/rozwijanie kodu, automatyczne zawijanie wierszy, jednoklikowe ulepszanie oraz wydajną kompresję/obfuskację skryptów JS, pomagając programistom poprawiać czytelność kodu, zmniejszać rozmiar plików i optymalizować wydajność strony internetowej.

Konwerter YAML na JSON - Darmowe Narzędzia Online

Online narzędzie do obustronnej konwersji formatów YAML (YML) i JSON, obsługujące obustronną konwersję danych YAML i JSON, a także walidację poprawności wprowadzonych danych w formacie YAML i JSON.

Formatowanie YAML - Darmowe Narzędzie YAML Online

Darmowe online narzędzie do formatowania i upiększania YAML, obsługujące automatyczne dostosowywanie wcięć, podświetlanie składni oraz usuwanie dodatkowych spacji, dzięki czemu Twój kod YAML jest czytelny i łatwy do przeczytania. Bez instalacji, formatowanie jednym kliknięciem, aby poprawić czytelność i wydajność obsługi plików YAML!