انتقل إلى المحتوى
Numio

تحويل HTML إلى قوالب Pug — Numio

حوّل HTML إلى صياغة قوالب Pug (المعروفة سابقًا باسم Jade)، التي تستخدم المسافات البادئة بدلًا من وسوم الإغلاق. بدّل بين مستند كامل ومقتطف HTML، واختر علامات الجدولة والفواصل ونمط علامات الاقتباس. يُرسَل HTML إلى الخادم لتحويله.

بدء قالب Pug من ترميز HTML موجود.

تتم المعالجة محليًا في المتصفح ولا يتم رفع المدخلات. قد تبقى المدخلات في علامة التبويب عند تبديل الأدوات؛ امسحها عند استخدام جهاز مشترك.
Pug output options
Load an example (replaces your input)

HTML

Pug

متى تستخدمها

  • بدء قالب Pug من ترميز HTML موجود.
  • التحقق على مقتطف قصير من كيفية تمثيل السمات والتداخل في Pug قبل تحويل صفحة كاملة.

طريقة الاستخدام

  1. الصق HTML أو حمّل مثالًا (مقتطف HTML، سمات نموذج، مستند HTML). يؤدي تحميل مثال إلى استبدال إدخالك.
  2. فعّل وضع المقتطف لتحويل المقتطف وحده دون أغلفة html وhead وbody. يستخدم المثال أدناه وضع المقتطف مع تفعيل علامات الجدولة والفواصل وإيقاف علامات الاقتباس المزدوجة.
  3. انسخ Pug وترجمه بإعداد Pug الخاص بك للتحقق من HTML الناتج.

إدخال HTML

<section class="card"><h2>News</h2><p>Registration is open</p></section>

مخرجات Pug (وضع المقتطف، مع تفعيل علامات الجدولة والفواصل)

section.card
	h2 News
	p Registration is open

التفاصيل والقيود

عند إيقاف وضع المقتطف، يُعامَل HTML كمستند، وقد تُضاف html وhead وbody. فعّله عندما تحتاج إلى العناصر فقط.

قد يؤدي الخلط بين علامات الجدولة والمسافات إلى تغيير علاقات الأب والابن في Pug. اتبع نمط المسافات البادئة في مشروعك.

لا يتحول HTML المتكرر إلى حلقات each أو mixins أو متغيرات في Pug، ولا تُضمَّن ملفات CSS والصور والسكربتات الخارجية.

قد يُصلح محلل HTML الوسوم غير المكتملة. ونجاح التحويل لا يعني أن HTML صالح ولا يضمن صفحة مطابقة.

FAQ

لماذا تُضاف وسوم html وbody؟

في وضع المستند، يُكمل المحلل العناصر الخارجية. فعّل وضع المقتطف لتحويل HTML الخاص بمكوّن دون أغلفة.

هل يمكنني تحويل HTML إلى Pug في VS Code أو من سطر الأوامر؟

تستخدم هذه الصفحة الحزمة مفتوحة المصدر html2pug. ثبّتها من npm لتحويل الملفات في سكربت أو من سطر الأوامر، أو واصل استخدام هذه الصفحة للمقتطفات السريعة.

كيف أحوّل Pug إلى HTML مرة أخرى؟

تحوّل هذه الصفحة HTML إلى Pug فقط. ترجم القالب باستخدام Pug نفسه — مثلًا باستخدام الحزمة pug-cli — للحصول على HTML من جديد.

هل يُرفع HTML الخاص بي؟

نعم، يُرسَل إلى خادم douni.one لتحويله. استخدم شيفرة يمكنك مشاركتها، واحذف مفاتيح API أو بيانات العملاء أولًا.

المواصفات والمراجع