Emmet: تحويل HTML إلى اختصار

تم إنشاؤها على ١٣ أكتوبر ٢٠١٢  ·  25تعليقات  ·  مصدر: emmetio/emmet

قم بإنشاء محول يقوم بتحليل كتلة HTML وتحويلها إلى تعبير (عداد "توسيع الاختصار").

تريد أن تدعم هذه القضية؟ أضف مكافأة على ذلك! نحن نقبل المنح عبر

Enhancement

التعليق الأكثر فائدة

لقد أرسلت بريدًا إلكترونيًا إلى المنشئ / المؤلفين ولكني أقوم بإعادة الإرسال هنا ، فقط للتأييد على الطلب:


مرحبا،

بادئ ذي بدء ، شكرًا لعملك الرائع ، لقد قمت بعمل رائع ، أنا معجب حقًا بالنتيجة.

كانت لدي فكرة عن برنامجك:

هل من الممكن عمل "الترميز العكسي"؟

أي خذ

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

وتحويله إلى

حاوية> .header + .body> .title {Title} +. text {Text} ^. footer

؟؟

لماذا ا؟ حسنًا ، أولاً وقبل كل شيء ، من الأسهل العمل مع الكود الثاني ، ثم إعادته إلى طبيعته. والأكثر أهمية ، إن أمكن ، استخدام جافا سكريبت من جانب العميل - أو حتى كود من جانب الخادم بواسطة متطوعين لكتابته ، مباشرة ، في صفحات كود emmet html.

فكر في التأثير الذي من شأنه أن يحدث.

حسنًا ، إنها مجرد فكرة :)

شكرا لك مرة أخرى،

استمتع،
جيانيس ،
أثينا ، اليونان ، أوروبا ، العالم.


حسنًا ، هذا هو التصويت على الفكرة: +1: وأتمنى رؤيتها تتم :)

ال 25 كومينتر

لقد أرسلت بريدًا إلكترونيًا إلى المنشئ / المؤلفين ولكني أقوم بإعادة الإرسال هنا ، فقط للتأييد على الطلب:


مرحبا،

بادئ ذي بدء ، شكرًا لعملك الرائع ، لقد قمت بعمل رائع ، أنا معجب حقًا بالنتيجة.

كانت لدي فكرة عن برنامجك:

هل من الممكن عمل "الترميز العكسي"؟

أي خذ

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

وتحويله إلى

حاوية> .header + .body> .title {Title} +. text {Text} ^. footer

؟؟

لماذا ا؟ حسنًا ، أولاً وقبل كل شيء ، من الأسهل العمل مع الكود الثاني ، ثم إعادته إلى طبيعته. والأكثر أهمية ، إن أمكن ، استخدام جافا سكريبت من جانب العميل - أو حتى كود من جانب الخادم بواسطة متطوعين لكتابته ، مباشرة ، في صفحات كود emmet html.

فكر في التأثير الذي من شأنه أن يحدث.

حسنًا ، إنها مجرد فكرة :)

شكرا لك مرة أخرى،

استمتع،
جيانيس ،
أثينا ، اليونان ، أوروبا ، العالم.


حسنًا ، هذا هو التصويت على الفكرة: +1: وأتمنى رؤيتها تتم :)

احصل على تصويتي! تخيل لو كان بإمكاننا ترميز الصفحات في HTML ، وترجمتها إلى emmet ، ثم كتابة كود php الذي يتضمن كود emmet الذي يتم توسيعه إلى HTML ديناميكيًا.

: hand: سيارتي بسنتين:

@ icb931023 أولاً اعتقدت أن ما قلته يبدو رائعًا ولكن في الحقيقة ، ما هي الفائدة؟ سيتعين على PHP التعامل مع سلسلة أقصر تمثل HTML الخاص بك بالتأكيد ولكن سيتعين عليها القيام بمزيد من العمل معها.

أعتقد أنه لا داعي للقلق بشأن الأخطاء الإملائية كثيرًا (مثل الشرطة المائلة المفقودة في علامة الإغلاق على سبيل المثال) نظرًا لأنه سيتم إنشاء جميع العلامات من أجلك ، ولكنك تعمل مع HTML الموسع الذي أفترضه (وإن كان ذلك يبدأ بـ بناء جملة موجزة) لذلك لست متأكدًا مما إذا كانت هذه حجة قوية لها أيضًا. أو ربما أكون مخطئًا في افتراض أنك لن تعمل بالكامل في الصيغة المختصرة / المنهارة.

اريد ان اريد هذا. لا يمكنني رؤية حالة استخدام مقنعة. من الواضح أنها ليست مفيدة مثل المعالجة المسبقة لـ CSS على سبيل المثال.

ستكون قصة مختلفة إذا فهمت المتصفحات / محركات القوالب بناء جملة Emmet. التي من شأنها أن تكون مثيرة للاهتمام!

Mmm ، من المثير للاهتمام إنشاء مكتبة JS لاستبدالها ؛)

هذه بداية من منظور العميل ؛ شارب Emmet . لا تتردد في المساهمة.

fabatta :)

أي تحديثات؟

احب هذا ايضا أستخدم صفحة styleguide حيث أقوم بتخزين جميع عناصري ، لإدارة هذا ، لدي ملف JSON عملاق يستخدم سلاسل Emmet لتمثيل العناصر وقمت بإنشاء أداة JavaScript لبصقها على الصفحة. لكن في الوقت الحالي ، لا بد لي من تحويلها جميعًا يدويًا للحفاظ على تحديث هذا الملف في كل مرة يتم فيها إنشاء شيء جديد. أحب طريقة لتحويل HTML إلى سلسلة Emmet.

_صدم_

أحب أن أكون قادرًا على تحويل HTML إلى emmet. سيكون مفيدًا جدًا لعمل ورقة غش من كتل التعليمات البرمجية التي أستخدمها بشكل متكرر.

أي تغيير؟

Kcko لا توجد تحديثات. هذه الميزة لها الأولوية الأدنى بالنسبة لي

ستكون ميزة رائعة. من السهل قراءة التسلسلات الهرمية في صيغة emmet / zen وأحيانًا يكون من المفيد أن يكون لديك نوع من المسودة الأولية في الاختصار عند تكرار تصميم جزء HTML.

ستكون ميزة رائعة!
تخيل إنشاء كتل متعددة بميزة * n واكتشف لاحقًا أنك بحاجة إلى تغيير الكتلة. الآن عليك حذف الكتل وإعادة كتابة رمز emmet مرة أخرى. العودة ، تعديل جزء فقط ثم السماح له بالتوليد مرة أخرى سيكون أسرع بكثير!

لدىMarcoWilli Emmet طرق كافية لتعديل الكود الحالي بسرعة:

  • (التفاف مع الاختصار) [http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (تحديث العلامة) [http://emmet.io/blog/beta-v1-1/]

يجب أيضًا ملاحظة أنه إذا كانت العناصر المكررة تحتوي على محتوى مختلف (كما وصفته "تعديل لاحقًا") ، فلن تكون سلسلة الاختصار العكسي هي نفسها التي استخدمتها لإنشاء رمز

التصويت لصالح مني. جديد على Emmet وستكون طريقة رائعة لتحسين مهاراتي.

احتجت حقًا إلى هذه الميزة ، ها هي حالتي:

أتلقى بعض الكتل مثل
<record class="main1 text"> <field name id="1">1</field> <field name id="2">2</field> <field name id="3">3</field> <field name id="4">4</field> </record>

لذلك أرغب في إنشاء المزيد من السجلات باستخدام السجل الأول ، لذا أحاول الآن إعادة إنتاج الاختصار للحصول على اختصار سجل ثم اكتب شيئًا مثل (record...)*10

شكرا

chermed ... أو يمكنك ببساطة نسخ ولصق مقتطف الشفرة. يرجى ملاحظة أن الكود الذي قدمته هو حالة استخدام بسيطة جدًا ولكنها نادرة جدًا. في معظم الحالات ، سينتهي بك الأمر بشيء مثل اختصار record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... ، وهو أمر غير مفيد للغاية

لدينا خدمة مصغرة تعرض سلسلة Html من قالب + كائن JSON مع بيانات وتستجيب لطلبات POST بسلسلة html المقدمة. يؤدي الاضطرار إلى إرسال سلسلة HTML ضخمة في استجابة HTTP إلى حدوث اختناق في تدفق تطبيقاتنا.

إذا كانت هناك طريقة لأخذ HTML الذي تم عرضه وتحويله إلى اختصار Emmet والذي يتم إرساله كاستجابة بدلاً من ذلك ، فسيؤدي ذلك إلى إزالة عنق الزجاجة لأن حجم بيانات استجابتنا يأخذ عددًا أقل من البايت. يمكن بعد ذلك للخدمة المصغرة التي تتلقى الاستجابة أن تقوم بتوسيع الاختصار لعرض جانب العميل.

kizzlebot يبدو أنه حالة استخدام قابلة للتطبيق ، ولكن يجب مراعاة ما يلي:

  • قد يكون تحويل HTML الضخم إلى Emmet بمثابة عنق الزجاجة أيضًا ، ولكن على جانب وحدة المعالجة المركزية في هذه الحالة
  • هل الإخراج gzipping يحل المشكلة؟
  • يعني توسيع Emmet من جانب العميل أنه يتطلب وقت تشغيل خاصًا للعرض. لذلك ، يبدو أنه ليست هناك حاجة في الخدمة المصغرة الخاصة بك على الإطلاق لأنه يمكنك إرسال نموذجك الخاص وبيانات JSON إلى العميل مباشرةً وعرضها باستخدام وقت التشغيل الخاص بك

kizzlebot لماذا لا Messagepack و / أو Apache Avro؟

sergeche لتكون أكثر تحديدًا ، قد تكون كلمة "render" خاطئة في الكلمة التي يجب استخدامها. نستخدم html لإنشاء مستند PDF عبر خدمة مصغرة لا تتلقى سوى حمولات html وتحولها إلى PDF. لذلك ، إذا كان من الممكن الانتقال من اختصار html إلى Emmet ، فيجب أن يكون العميل الذي يتلقى اختصار emmet قادرًا على توسيعه ببساطة باستخدام وحدة Emmet npm الحالية. لن نحتاج إلى وقت تشغيل لتقديمه لأن html لا يتم عرضه على جانب العميل على الإطلاق. نحتاج فقط إلى حمولة مضغوطة لتمريرها عبر السلك.

أود إنشاء مواقع نموذجية وتحويلها مرة أخرى إلى مقتطفات emmet لجعل كتابة العرض التقديمي أسرع (وهي عملية العرض التوضيحي emmet).

ربما يكون ممكنًا باستخدام Hyperscript / JSX و AST.

هذا لديه الكثير من الإمكانات.
في اليوم الآخر كنت العبث بأطر HTML مثل Jade و HAML واعتقدت أنها بدائل رائعة لبناء جملة HTML غير الواضح. لكنني لم أتمكن من الدخول في مشاريعي لأنها تتطلب ذلك التثبيت والتحويل الإضافي. لطالما استخدمت Emmet الذي كان جيدًا تقريبًا (فهو يدعم فقط أقل قليلاً ولا يتطلب التثبيت).
لكن اليوم عندما كنت أقوم ببناء قالب موقع ، قررت استخدام المسافة البادئة أثناء الكتابة في Emmet ووجدت هذا:

.navbar>
  .logo+
  ul.menu_v>
    li.menu_itm*2+
    li.menu_item.dropd
  ^
  ul.menu_v>
    li.item_dd

هذا أكثر قابلية للقراءة من HTML.
وبعد النظر إليها ، فكرت ، ألن يكون رائعًا إذا دعم Emmet المسافة البادئة.
وبعد ذلك فكرت ، ماذا لو كانت هناك أداة تحويل تحول Emmet إلى HTML مع المسافة البادئة. بهذه الطريقة سيكون الأمر أكثر متعة في الكتابة والقراءة من خلال HTML.
أعني أن XML حدث له JSON.
حان الوقت لكي تنتقل HTML ...

تقصد مكونات الويب ، النص الفائق ، JSX والصلصال؟ حسنًا ، هذا ليس من السهل جدًا قراءته.

يستخدم Emmet في الغالب للنماذج الأولية السريعة وإكمال الأوامر / السقالات على سبيل المثال في مشاريع PhpStorm. لذلك لا يتم تخزين بناء جملة Emmet عادةً في أي مشروع ، فقط لغة html النهائية.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

DanielRuf picture DanielRuf  ·  5تعليقات

corysimmons picture corysimmons  ·  5تعليقات

planetoftheweb picture planetoftheweb  ·  3تعليقات

renatorib picture renatorib  ·  26تعليقات

MarvinXu picture MarvinXu  ·  10تعليقات