هل من الممكن إنشاء كل كود HTML للموقع في دقائق ، إن لم يكن في ثوان؟ من الممكن إذا كنت تستخدم Emmet! يسمح هذا النهج الجديد بالتطوير السريع للتعليمات البرمجية بتنسيق HTML و XML وتنسيقات التعليمات البرمجية المنظمة الأخرى.
Emmet هو مكون إضافي للعديد من برامج تحرير النصوص الشائعة. باستخدام Emmet ، يمكنك إنشاء الهيكل العظمي لصفحتك في بنية منطقية ولكنها مضغوطة للغاية ، ثم توسيعها إلى كود HTML كامل وسليم. تبدو النتيجة سحرية: يمتد سطر من النص إلى مئات أسطر النحو ، ولديك صفحة ثابتة ، أو حتى بنية كاملة للموقع ، جاهزة في غضون دقائق.
سوف تتعلم هنا كيف يمكنك استخدام Emmet لإنشاء صفحة ويب ثابتة كاملة. يستخدم Visual Studio Code لهذا البرنامج التعليمي لأنه يأتي مع دعم مضمن لـ Emmet. يمكنك استخدام Emmet في برامج تحرير أخرى ، مثل Sublime Text و Atom ، ولكن سيتعين عليك إضافة دعم لها من خلال امتداد.
قم بإنشاء ملف موقعك
للبدء ، افتح Visual Studio Code.
![تشغيل المواقع في دقائق مع Emmet Vscode تشغيل المواقع في دقائق مع Emmet Vscode](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-run-vscode.jpg)
اختر “ملف -> ملف جديد” لإنشاء مستند جديد وفارغ.
![مواقع في دقائق مع إيميت جعل ملف جديد مواقع في دقائق مع إيميت جعل ملف جديد](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-make-new-file.jpg)
اختر “ملف -> حفظ باسم” لحفظ ملفك ، مع منحه امتداد “html”.
![مواقع في دقائق مع Emmet حفظ باسم Html مواقع في دقائق مع Emmet حفظ باسم Html](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-save-as-html.jpg)
تركيب اساسي
يتم تنظيم عناصر كل صفحة ويب في مجموعات ومجموعات فرعية. عند التشفير باستخدام Emmet ، سيتعين عليك دائمًا مراعاة كيفية احتواء كل مجموعة على عناصر يمكن أن تكون في حد ذاتها مجموعات من عناصر أكثر.
ملاحظة : على الرغم من أننا سنشرح الأساسيات ، سيكون من الأفضل أن تكون على دراية بأساسيات بناء HTML قبل المتابعة.
على المستوى الأساسي للغاية ، تحتوي معظم المواقع على ثلاث مجموعات / أقسام من هذا القبيل: رأس وجزء رئيسي للمحتوى الأساسي وتذييل. لإنشاء تلك باستخدام Emmet ، اكتب:
# رأس + # mainsite + # تذييل
![مواقع في دقائق مع تذييل Mainmet رأس الصفحة الرئيسية مواقع في دقائق مع تذييل Mainmet رأس الصفحة الرئيسية](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-header-mainsite-footer.jpg)
يعني “#” الموجود أمام كل كلمة أن كل مجموعة عبارة عن div بمعرف. اضغط على Enter في نهاية السطر لرؤية Emmet قيد التشغيل ، مع تحويل هذه العبارة الصغيرة إلى ثلاثة أسطر من HTML المهيكل.
![تم توسيع المواقع بالدقائق مع تذييل الصفحة الرئيسية لرأس Emmet تم توسيع المواقع بالدقائق مع تذييل الصفحة الرئيسية لرأس Emmet](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-header-mainsite-footer-expanded.jpg)
هيكل الرأس
يحتوي رأس الموقع النموذجي على شعاره وقائمة واحدة أو اثنتين. لإضافة تلك إلى صفحتك ، يمكنك الاحتفاظ بـ HTML الموسع من الخطوة السابقة والكتابة مباشرة في Header Div. يمكنك بعد ذلك كتابة شيء مثل:
# شعار + # menu_top + # menu_main
![مواقع في دقائق مع Emmet إضافة شعار وقوائم مواقع في دقائق مع Emmet إضافة شعار وقوائم](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-add-logo-and-menus.jpg)
اضغط على Enter لتوسيع هذا أيضًا ، وسيكون لديك ثلاثة أقسام إضافية لشعار موقعك وقائمتين داخل الرأس.
التجمع في إيميت
باستخدام Emmet ، يمكنك تجميع العناصر بوضعها بين قوسين. هذا يسمح لك بإنشاء هياكل معقدة لصفحاتك. لذا التراجع عن كل شيء حتى الآن والاحتفاظ فقط بكودك الأساسي
#header+#mainsite+footer
من قبل.![مواقع في دقائق مع تراجع Emmet والتجربة مواقع في دقائق مع تراجع Emmet والتجربة](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-undo-and-experiment.jpg)
استبدل
#header
الرمز في ما يلي:(#header> .logo + .menu.top + .menu.main ^)
في Emmet ، يمكنك إسقاط مستوى باستخدام
>
الحرف ويمكن أن ترتفع إلى مستوى باستخدام ^
الحرف. يسمح لك هذا بالدخول إلى عنصر وإضافة عناصر أخرى إليه ثم الرجوع مرة أخرى.يجب أن تبدو النتيجة كما يلي:
(#header> .logo + .menu.top + .menu.main ^) + # mainsite + footer
![مواقع في دقائق مع المحتوى Emmet Head Plus مواقع في دقائق مع المحتوى Emmet Head Plus](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-header-plus-content.jpg)
سيتم ترجمة ما سبق إلى: “أضف Div (مجموعة) برقم التعريف #header. بداخله ، أضف ثلاثة Div مع الفئات “.logo” و “.menu.top” و “.menu.main”. قم بإرجاع مستوى واحد لأعلى ، خارج المجموعة ، وأضف قسمين إضافيين بجانبه مع المعرفين “#mainsite” و “#footer”.
![مواقع بالدقائق مع رأس Emmet كـ Html مواقع بالدقائق مع رأس Emmet كـ Html](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-header-as-html.jpg)
هيكل الوظائف
عادةً ما يحتوي المنشور الأساسي على موقع نموذجي على العناصر التالية:
- عنوان
- صورة
- مقتطفات (كفقرة نصية)
يجب أن يقدم أيضًا رابطًا يسمح للزائر بقراءة المنشور الفعلي وربما روابط لفئاته وعلاماته وما إلى ذلك. من أجل البساطة ، على الرغم من ذلك ، سنستخدم هذه العناصر الثلاثة فقط في الوقت الحالي.
(.post> h3 {عنوان المشاركة $} + img + p {Post Excerpt}) * 5
![مواقع في دقائق مع صيغة Emmet Post Emmet مواقع في دقائق مع صيغة Emmet Post Emmet](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-post-emmet-syntax.jpg)
هذا يخبر Emmet إلى “إنشاء Div مع الفصل .post. داخله ، ضع عنوانًا لعنوان H3 وصورة وفقرة للمقتطف.
مع إرفاق “{TEXT}” بعد العنصر ، يمكنك تحديد محتوياته. لذا ، مع “{Post Title}” ، هذا يخبر Emmet أن محتوى كل عنوان H3 سيكون نص العنصر النائب “Post Title”. يمكنك تغيير “عنوان المشاركة” إلى اسمك أو أي سلسلة نصية تريدها ، وسيتم استخدامها كمحتوى لعناوين مشاركاتك عندما يتم توسيع الكود.
و
$
إلى جانب “عنوان الرسالة” هو المتغير الرقمي الذي يعمل جنبا إلى جنب مع “5” يمكنك أن ترى خارج الأقواس. و *5
بعد الأقواس يقول ايميت لتكرار محتويات الأقواس خمس مرات. و $
يتم استبدال مع عدد تكرار كل وظيفة و. استبدل هذا الرقم بعدد المنشورات التي تريدها على صفحتك.أضف هذا إلى الرمز الفعلي. يجب أن يبدو:
(#mainsite> (. post> h3 {Post Title $} + img + p {Post Excerpt}) * 5)
![مواقع في دقائق مع المشاركات Emmet في النحو الرئيسي مواقع في دقائق مع المشاركات Emmet في النحو الرئيسي](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-posts-in-main-syntax.jpg)
هيكل التذييل
بالنسبة إلى التذييل ، فإننا نضيف مجموعتين – قسمين Divs مع فئتي “.design” و “.copyright”.
رمز على النحو التالي:
(.design> (a.designerslink)) + (. Copyright> (p {Copyright 2020 My Name}))
![مواقع في دقائق مع بناء جملة إيميت مواقع في دقائق مع بناء جملة إيميت](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-footer-syntax.jpg)
سيؤدي هذا إلى إنشاء div مع فئة “.design”. يوجد بداخله ارتباط بفئة “.designerslink”. يضاف إلى ذلك قسم ثان مع فئة “.copyright”. يوجد داخل هذا القسم فقرة من النص العادي تحتوي على محتويات “Copyright 2020 My Name.”
![المواقع في دقائق مع تذييل Emmet المدرجة المواقع في دقائق مع تذييل Emmet المدرجة](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-footer-included.jpg)
ستكون النتيجة هذا:
(#footer> (. design> (a.designerslink)) + (. Copyright> (p {Copyright 2020 My Name})))
الآن ، فقط اضغط Enter ، موقعك جاهز!
بضغطة واحدة ، كل شيء رأيناه حتى الآن ، وهذه المجموعة من الأحرف المكثفة للغاية ، ستتحول إلى عشرات الأسطر من بنية HTML المناسبة لصفحة كاملة!
![تم توسيع المواقع بالدقائق مع رمز Emmet All تم توسيع المواقع بالدقائق مع رمز Emmet All](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-all-code-expanded.jpg)
احفظ التغييرات على الملف بالضغط على Ctrl+ Sأو بزيارة “ملف -> حفظ”. لمشاهدة عملك ، قم بتشغيل المتصفح الخاص بك. بعد ذلك ، إما باستخدام “ملف -> فتح” أو مدير ملفات خارجي ، حدد موقع ملف HTML الخاص بك وافتحه يدويًا في المتصفح.
![مواقع في دقائق مع موقع Emmet في المتصفح مواقع في دقائق مع موقع Emmet في المتصفح](https://www.maketecheasier.com/assets/uploads/2020/05/sites-in-minutes-with-emmet-site-in-browser.jpg)
تغليف
لقد تعلمت أساسيات استخدام Emmet لإنشاء ملف HTML الخاص بك. بالطبع ، يمكنك العودة إلى التعليمات البرمجية الخاصة بك في أي وقت لتعديلها أو توسيعها بمزيد من الأشياء.