مقدمة إلى Eleventy

تطوير الويب
الواجهات الامامية Eleventy

Eleventy، أو كما تُعرف أيضًا بـ “11ty”، هي أداة حديثة وبسيطة لتوليد المواقع الثابتة (Static Site Generator - SSG) تعتمد على لغة JavaScript. تُستخدم لإنشاء مواقع ويب سريعة وآمنة دون الحاجة إلى قواعد بيانات أو برمجة خلفية معقدة. فلسفة Eleventy تتمحور حول البساطة والمرونة؛ فهي لا تفرض عليك استخدام إطار عمل معين للواجهة الأمامية، وتدعم أكثر من 10 لغات قوالب مختلفة. هذا يجعلها خيارًا مثاليًا للمطورين الذين يبحثون عن أداة مرنة وسهلة الاستخدام لإنشاء مواقع مثل المدونات، المواقع الشخصية، أو مواقع التوثيق.

المزايا والعيوب

المزايا (Pros)

  • مرن للغاية ويدعم العديد من لغات القوالب
  • لا يفرض أي إطار عمل على الواجهة الأمامية (Bring Your Own Framework)
  • بسيط وسهل البدء به (Zero-Config)
  • أداء ممتاز للمواقع الثابتة

العيوب (Cons)

  • يتطلب بعض الإعداد للميزات المتقدمة مثل معالجة الصور
  • لا يوفر ميزات من جانب العميل (Client-side) بشكل افتراضي
  • قد يكون أقل ملاءمة للمبتدئين الذين يفضلون حلاً شاملاً

أبرز مميزات Eleventy

  • البساطة والتكوين الصفري (Zero-Config): يعمل Eleventy بدون تكوين مسبق، مما يعني أنه يمكنك البدء فورًا بإنشاء موقعك. يأخذ الملفات من المجلد الرئيسي ويحولها إلى صفحات HTML في مجلد الإخراج (_site).
  • سرعة وأداء ممتاز: المواقع الناتجة عن Eleventy هي صفحات HTML وCSS وJavaScript ثابتة، فهي تُحمل بسرعة كبيرة ويمكن استضافتها بسهولة عبر شبكات توزيع المحتوى (CDN).
  • الأمان: المواقع الثابتة أقل عرضة للاختراق لأنها لا تعتمد على قواعد بيانات أو خوادم ديناميكية.
  • دعم لغات قوالب متعددة: يدعم Eleventy لغات قوالب متنوعة مثل Markdown، HTML، Nunjucks، Liquid، Handlebars، وغيرها، ويمكن استخدامها معًا في مشروع واحد.

متى تستخدم Eleventy؟

  • عند إنشاء مدونات شخصية أو مواقع توثيق.

  • لمواقع الشركات الصغيرة أو الصفحات التعريفية.

  • إن كنت تفضل التحكم الكامل في هيكل مشروعك دون أدوات ثقيلة.

أمثلة على مواقع تستخدم Eleventy

تُستخدم Eleventy من قبل مؤسسات كبرى مثل Google، Netlify، وMIT، وكذلك في مشاريع مفتوحة المصدر مثل مشروع A11y. يمكنك استكشاف أمثلة حية على 11ty.dev أو عبر مستودعات GitHub.

كيف يعمل Eleventy؟

يعتمد Eleventy على مفهوم تحويل القوالب (Templates) والبيانات إلى صفحات ويب ثابتة. إليك الخطوات الأساسية لعمل Eleventy:

  1. إنشاء المشروع: تبدأ بإنشاء مجلد للمشروع وتثبيت Eleventy باستخدام Node.js وnpm:

  2. إضافة القوالب: تضيف ملفات القوالب (مثل Markdown أو HTML) في المجلد الرئيسي أو مجلدات فرعية. يمكنك تحديد البيانات في الجزء الأمامي (Front Matter) لكل ملف، مثل العنوان أو الوصف:

    
--- 
title: مرحبًا بالعالم 
description: هذه صفحتي الأولى باستخدام Eleventy 
---

# مرحبًا! هذا محتوى صفحتي الأولى.
  1. التشغيل: تقوم بتشغيل Eleventy باستخدام الأمر:

يقوم هذا الأمر بتحويل القوالب إلى HTML وتشغيل خادم محلي (http://localhost:8080) لمعاينة الموقع.

  1. الإخراج: يتم إنشاء الموقع في مجلد _site، وهو جاهز للنشر على أي خادم ويب.

💻 مثال لاستخدام البيانات والتخطيطات

1. إنشاء ملف بيانات (_data/users.json):

    
[
{ "name": "أحمد" },
{ "name": "فاطمة" }
]

2. إنشاء تخطيط (_includes/layout.njk):

    
<!DOCTYPE html>
<html lang="ar">
<head>
<title>{{ title }}</title>
</head>
<body>
{{ content | safe }}
</body>
</html>

3. إنشاء صفحة تستخدم البيانات والتخطيط (users.md):

    
---
title: "قائمة المستخدمين"
layout: "layout.njk"
---
# المستخدمون
<ul>
{%- for user in users -%}
<li>{{ user.name }}</li>
{%- endfor -%}
</ul>

🔗 روابط مفيدة

العودة إلى المدونة
التصنيفات: تطوير الويب
الوسوم: #الواجهات الامامية #Eleventy