هل من الممكن إنشاء كل كود HTML للموقع في دقائق ، إن لم يكن في ثوان؟ من الممكن إذا كنت تستخدم Emmet! يسمح هذا النهج الجديد بالتطوير السريع للتعليمات البرمجية بتنسيق HTML و XML وتنسيقات التعليمات البرمجية المنظمة الأخرى.
Emmet هو مكون إضافي للعديد من برامج تحرير النصوص الشائعة. باستخدام Emmet ، يمكنك إنشاء الهيكل العظمي لصفحتك في بنية منطقية ولكنها مضغوطة للغاية ، ثم توسيعها إلى كود HTML كامل وسليم. تبدو النتيجة سحرية: يمتد سطر من النص إلى مئات أسطر النحو ، ولديك صفحة ثابتة ، أو حتى بنية كاملة للموقع ، جاهزة في غضون دقائق.
سوف تتعلم هنا كيف يمكنك استخدام Emmet لإنشاء صفحة ويب ثابتة كاملة. يستخدم Visual Studio Code لهذا البرنامج التعليمي لأنه يأتي مع دعم مضمن لـ Emmet. يمكنك استخدام Emmet في برامج تحرير أخرى ، مثل Sublime Text و Atom ، ولكن سيتعين عليك إضافة دعم لها من خلال امتداد.
قم بإنشاء ملف موقعك
للبدء ، افتح Visual Studio Code.
اختر “ملف -> ملف جديد” لإنشاء مستند جديد وفارغ.
اختر “ملف -> حفظ باسم” لحفظ ملفك ، مع منحه امتداد “html”.
تركيب اساسي
يتم تنظيم عناصر كل صفحة ويب في مجموعات ومجموعات فرعية. عند التشفير باستخدام Emmet ، سيتعين عليك دائمًا مراعاة كيفية احتواء كل مجموعة على عناصر يمكن أن تكون في حد ذاتها مجموعات من عناصر أكثر.
ملاحظة : على الرغم من أننا سنشرح الأساسيات ، سيكون من الأفضل أن تكون على دراية بأساسيات بناء HTML قبل المتابعة.
على المستوى الأساسي للغاية ، تحتوي معظم المواقع على ثلاث مجموعات / أقسام من هذا القبيل: رأس وجزء رئيسي للمحتوى الأساسي وتذييل. لإنشاء تلك باستخدام Emmet ، اكتب:
# رأس + # mainsite + # تذييل
يعني “#” الموجود أمام كل كلمة أن كل مجموعة عبارة عن div بمعرف. اضغط على Enter في نهاية السطر لرؤية Emmet قيد التشغيل ، مع تحويل هذه العبارة الصغيرة إلى ثلاثة أسطر من HTML المهيكل.
هيكل الرأس
يحتوي رأس الموقع النموذجي على شعاره وقائمة واحدة أو اثنتين. لإضافة تلك إلى صفحتك ، يمكنك الاحتفاظ بـ HTML الموسع من الخطوة السابقة والكتابة مباشرة في Header Div. يمكنك بعد ذلك كتابة شيء مثل:
# شعار + # menu_top + # menu_main
اضغط على Enter لتوسيع هذا أيضًا ، وسيكون لديك ثلاثة أقسام إضافية لشعار موقعك وقائمتين داخل الرأس.
التجمع في إيميت
باستخدام Emmet ، يمكنك تجميع العناصر بوضعها بين قوسين. هذا يسمح لك بإنشاء هياكل معقدة لصفحاتك. لذا التراجع عن كل شيء حتى الآن والاحتفاظ فقط بكودك الأساسي
#header+#mainsite+footerمن قبل.
استبدل
#headerالرمز في ما يلي:(#header> .logo + .menu.top + .menu.main ^)
في Emmet ، يمكنك إسقاط مستوى باستخدام
>الحرف ويمكن أن ترتفع إلى مستوى باستخدام ^الحرف. يسمح لك هذا بالدخول إلى عنصر وإضافة عناصر أخرى إليه ثم الرجوع مرة أخرى.يجب أن تبدو النتيجة كما يلي:
(#header> .logo + .menu.top + .menu.main ^) + # mainsite + footer
سيتم ترجمة ما سبق إلى: “أضف Div (مجموعة) برقم التعريف #header. بداخله ، أضف ثلاثة Div مع الفئات “.logo” و “.menu.top” و “.menu.main”. قم بإرجاع مستوى واحد لأعلى ، خارج المجموعة ، وأضف قسمين إضافيين بجانبه مع المعرفين “#mainsite” و “#footer”.
هيكل الوظائف
عادةً ما يحتوي المنشور الأساسي على موقع نموذجي على العناصر التالية:
- عنوان
- صورة
- مقتطفات (كفقرة نصية)
يجب أن يقدم أيضًا رابطًا يسمح للزائر بقراءة المنشور الفعلي وربما روابط لفئاته وعلاماته وما إلى ذلك. من أجل البساطة ، على الرغم من ذلك ، سنستخدم هذه العناصر الثلاثة فقط في الوقت الحالي.
(.post> h3 {عنوان المشاركة $} + img + p {Post Excerpt}) * 5
هذا يخبر Emmet إلى “إنشاء Div مع الفصل .post. داخله ، ضع عنوانًا لعنوان H3 وصورة وفقرة للمقتطف.
مع إرفاق “{TEXT}” بعد العنصر ، يمكنك تحديد محتوياته. لذا ، مع “{Post Title}” ، هذا يخبر Emmet أن محتوى كل عنوان H3 سيكون نص العنصر النائب “Post Title”. يمكنك تغيير “عنوان المشاركة” إلى اسمك أو أي سلسلة نصية تريدها ، وسيتم استخدامها كمحتوى لعناوين مشاركاتك عندما يتم توسيع الكود.
و
$إلى جانب “عنوان الرسالة” هو المتغير الرقمي الذي يعمل جنبا إلى جنب مع “5” يمكنك أن ترى خارج الأقواس. و *5بعد الأقواس يقول ايميت لتكرار محتويات الأقواس خمس مرات. و $يتم استبدال مع عدد تكرار كل وظيفة و. استبدل هذا الرقم بعدد المنشورات التي تريدها على صفحتك.أضف هذا إلى الرمز الفعلي. يجب أن يبدو:
(#mainsite> (. post> h3 {Post Title $} + img + p {Post Excerpt}) * 5)
هيكل التذييل
بالنسبة إلى التذييل ، فإننا نضيف مجموعتين – قسمين Divs مع فئتي “.design” و “.copyright”.
رمز على النحو التالي:
(.design> (a.designerslink)) + (. Copyright> (p {Copyright 2020 My Name}))
سيؤدي هذا إلى إنشاء div مع فئة “.design”. يوجد بداخله ارتباط بفئة “.designerslink”. يضاف إلى ذلك قسم ثان مع فئة “.copyright”. يوجد داخل هذا القسم فقرة من النص العادي تحتوي على محتويات “Copyright 2020 My Name.”
ستكون النتيجة هذا:
(#footer> (. design> (a.designerslink)) + (. Copyright> (p {Copyright 2020 My Name})))
الآن ، فقط اضغط Enter ، موقعك جاهز!
بضغطة واحدة ، كل شيء رأيناه حتى الآن ، وهذه المجموعة من الأحرف المكثفة للغاية ، ستتحول إلى عشرات الأسطر من بنية HTML المناسبة لصفحة كاملة!
احفظ التغييرات على الملف بالضغط على Ctrl+ Sأو بزيارة “ملف -> حفظ”. لمشاهدة عملك ، قم بتشغيل المتصفح الخاص بك. بعد ذلك ، إما باستخدام “ملف -> فتح” أو مدير ملفات خارجي ، حدد موقع ملف HTML الخاص بك وافتحه يدويًا في المتصفح.
تغليف
لقد تعلمت أساسيات استخدام Emmet لإنشاء ملف HTML الخاص بك. بالطبع ، يمكنك العودة إلى التعليمات البرمجية الخاصة بك في أي وقت لتعديلها أو توسيعها بمزيد من الأشياء.
اكتشاف المزيد من مدونة الواحة
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.