غطس عميق في أحد عشر مولد موقع ثابت

لكن أولاً - دعنا نراجع بسرعة ما هو المقصود بـ "موقع ثابت" ثم ما يوفره المولد. يتكون الموقع الثابت من محتوى ثابت - كما هو الحال في HTML و CSS والأصول وجميع المحتويات تم تجميعها معًا قبل الدفع إلى مضيف موقع الويب. يختلف هذا عن الموقع الديناميكي الذي يجمع هذه الأشياء من الاستعلام عن قاعدة بيانات في وقت التشغيل (مثل WordPress) أو يسحب المحتوى من جانب العميل لواجهات برمجة التطبيقات (مثل أطر عمل JavaScript بدون عرض من جانب الخادم).

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

هناك العديد من مولدات الموقع الثابتة المتاحة. ربما تكون قد سمعت عن أو حتى استخدمتها مثل Jekyll و Hugo و Gatsby و Next و Nuxt. يتم توفير قائمة شاملة بواسطة Jamstack.org.

ما الذي يجعل أحد عشرون مختلفًا عن مولدات الموقع الثابتة الأخرى؟

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

ما يجعل Eleventy فريدًا حقًا هو القدرة على الاختيار من بين ما يصل إلى عشر لغات قوالب مختلفة ودمجها:

يمكن أن يحدث الاختلاط بين اللغات في نفس الملف أو بين التخطيطات. على سبيل المثال ، غالبًا ما أكتب المحتوى الرئيسي الخاص بي باستخدام Markdown الذي يغذي تخطيط Nunjucks. في بعض المشاريع ، وجدت أنه من المفيد أن تكون قادرًا على تكرار بعض البيانات باستخدام Nunjucks أثناء التواجد في ملف Markdown. هذه القدرة على الجمع بين اللغات قوية جدًا ، وتسمح لك بتصميم سير عمل للكتابة والبناء يناسبك أنت ومشروعك بشكل أفضل.

يتضمن --serve علامة --serve التي تستخدم BrowserSync لتمكين خدمة الموقع محليًا وإعادة التحميل الفوري عند إجراء تغييرات على الملف. هذه راحة كبيرة ، ومن الجيد أن تضعها في اعتبارك إذا كنت لا تبحث عن منشئ موقع ثابت ولكن ربما تكون ترقية من أدوات بناء مثل Gulp.

كجزء من عملية التهيئة الصفرية ، يمكن أن تعيش جميع ملفات موقعك في جذر مشروعك. لتغيير مجلدي الإدخال والإخراج ، يمكنك إنشاء تهيئة Eleventy ، والتي من المتوقع أن تكون ملف جذر يسمى .eleventy.js . إليك مقتطف سريع يوضح كيفية إجراء هذا التعديل:

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

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

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

ملاحظة مهمة : يمكنك استخدام برنامج Eleventy بنجاح بدون معرفة أو معرفة منخفضة بـ JavaScript.

على عكس مجموعات SSG الأخرى مثل Gatsby ، أو بيئات مثل WordPress ، لا تتطلب معظم مواقع الحادي عشرون أي مكونات إضافية. هناك بعض المكونات الإضافية المتاحة ، لكنها ليست ضرورية للوظائف الأساسية.

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

فهم المفاهيم الأساسية أحد عشر

دعنا ننتقل إلى بضع أجزاء من المصطلحات والمفاهيم التي ستساعدك على النجاح في إنشاء مشروع Eleventy الخاص بك.

التخطيطات والقوالب

قد تفكر في هذه المصطلحات على أنها قابلة للتبديل ، ولكن في سياق Eleventy ، لها معاني سياقية:

• القالب هو المصطلح العام لجميع ملفات المحتوى.
• التخطيطات هي قوالب خاصة تلتف حول محتوى آخر.

على سبيل المثال ، يشير القالب إلى جميع ملفات Markdown الخاصة بك ، بينما قد يكون التخطيط عبارة عن ملف Nunjucks يحتوي على نموذج HTML5 المعياري وفتحة لمحتوى النموذج. سوف نتعلم كيفية جعل هذا العمل في القسم الخاص للبدء.

المرشحات والرموز القصيرة

هذه طرق إضافية لتعديل إخراج المحتوى ، وإنشاء أجزاء قالب قابلة لإعادة الاستخدام. وهي متاحة للاستخدام مع قوالب Nunjucks و Liquid و Handlebars و JavaScript. يتم تحديد عوامل التصفية والأكواد القصيرة داخل .eleventy.js .

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

تسمح الرموز القصيرة بإنشاء أجزاء قالب قابلة لإعادة الاستخدام وقادرة على قبول الوسائط. يمكن أن تكون إما مستقلة أو مقترنة ، مما يعني أنها تلف المحتوى بعلامة بداية ونهاية.

أحد الرموز القصيرة المفضلة لدي هو عرض العام الحالي - مما يعني عدم وجود المزيد من سنوات حقوق النشر القديمة في تذييل الصفحة الخاصة بك! إليك كيفية إنشاء رمز قصير لهذا year :

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

لاستخدامه في قالب Nunjucks أو Liquid يبدو كالتالي: {% year %} .

يمكنك مراجعة مستندات Eleventy للحصول على أمثلة من الرموز القصيرة المقترنة.

المجموعات

المجموعات عبارة عن مجموعات من المحتوى ذي الصلة ، ويتم إنشاؤها عادةً داخل المادة الأمامية من خلال تحديد tags . تشتمل خيارات بناء جملة العلامات على سلاسل مفردة ، أو مصفوفات ذات سطر واحد - ["tagA", "tagB"] - للمضاعفات ، أو قوائم نمط YAML لتعيين علامات متعددة. على سبيل المثال ، يمكنني إنشاء مجموعة "صفحات" عن طريق إضافة المادة الأولى التالية إلى كل المحتوى الذي أريد تضمينه في تلك المجموعة:

 --- tags: pages ---

بمجرد تحديد مجموعة ، يمكنك الوصول إليها عبر لغة النماذج التي تختارها داخل كائن collections العالمية. للوصول إلى مجموعة "الصفحات" الخاصة بنا ، ستبدو مثل collections.pages . يؤدي هذا إلى إرجاع مصفوفة من بيانات المجموعة ، وبالتالي يمكنك إجراء عمليات مصفوفة مثل التكرار فوقها مثل إنتاج قائمة من الروابط أو بطاقات دعابة المقالة. يمكنك حتى منع إخراج الملف العادي واستخدام المجموعات فقط لإدارة عرض البيانات ، وهو أمر مفيد لإدارة محتوى الموقع أحادي الصفحة.

البيانات المخصصة

لقد تحدثنا حتى الآن عن إنشاء محتوى كملفات ، ولكن برنامج Eleventy يجعل من السهل جدًا الحفاظ على مصادر البيانات المختلفة. يُطلق على هذا اسم "البيانات المخصصة" ويعيش عند تصدير وحدة JavaScript أو ملفات JSON في دليل _data .

يمكن استخدام البيانات المخصصة من أجل:

• حدد مصفوفة JSON أساسية.
• إرجاع نتائج عملية الجلب.
• استرداد وإعادة تنسيق المحتوى من CMS مقطوعة الرأس.

يجعل Eleventy جميع البيانات من داخل _data متاحة ضمن متغير يطابق اسم الملف. على سبيل المثال ، إذا قمت بإنشاء posts.json ، فيمكنني الوصول إلى ذلك في القوالب الخاصة بي posts . باستخدام Nunjucks ، إليك مثال على تكرار بيانات posts :

 {% for post in posts %} {{ post.title }} {% endfor %}

ترقيم الصفحات وإنشاء صفحات من البيانات

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

ملاحظة : إذا كنت تستخدم بيانات مخصصة لاسترداد محتوى من نظام إدارة محتوى ، فإن ترقيم الصفحات هو طريقة Eleventy التي تبحث عنها لتحويل تلك البيانات إلى صفحات ديناميكيًا.

فيما يلي مثال للإشارة إلى البيانات المخصصة لمنشوراتنا والتي سنفترض أننا posts عبر الجلب من CMS مقطوعة الرأس. الأهم من ذلك ، يتم تعيين size على 1 ، مما يعني أن كل "مقطع ترقيم صفحات" يجب أن ينتج صفحة واحدة من المخرجات. ثم نستخدم alias لإنشاء مرجع للعنصر الحالي في حلقة ترقيم الصفحات ، ثم نستخدم هذا المرجع في تعريف permalink وجسم القالب.

يمكن أن يعيش الملف الذي يحدد ترقيم الصفحات أينما تريد داخل دليل الإدخال. أفضّل التنظيمي هو إنشاء دليل generate ، ثم تسميته بنفس المجموعة التي سيتم إنشاؤها. ضع في اعتبارك أن ما يلي هو src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

في هذه الحالة ، يقوم permalink بتعيين الصفحة ليتم إخراجها مباشرة من جذر الموقع. يمكنك تغيير هذا لإضافة بادئة مثل /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} ، على سبيل المثال.

بالإضافة إلى ذلك ، إذا كنت تريد أن تكون جميع الصفحات التي تم إنشاؤها متاحة في المجموعة التي تم إنشاؤها بواسطة العلامات ، فيجب عليك تعيين addAllPagesToCollections إلى true لتشمل أكثر من العنصر الأول.

أخيرًا ، إذا كان المحتوى الخاص بك يأتي كـ Markdown بدلاً من HTML مترجم مسبقًا ، فستحتاج إلى استخدام templateEngineOverride . في المثال المقتطف ، قمت بضبطه على njk, md مما يعني أن محتوى القالب سيحتاج إلى المعالجة على أنهما Nunjucks لتحويل المتغير ، ثم Markdown لتجميع المحتويات التي تم إرجاعها في المتغير.

إذا كنت تتساءل عن معنى safe ، فسوف نتعلم ذلك بعد ذلك!

كيف تبدأ مع أحد عشر

حسنًا ، أنت جاهز لبدء مشروعك الأول من Eleventy! سيساعدك هذا البرنامج التعليمي الموجز في الحصول على بنية البداية في مكانها لمتابعة البناء منها. سنستخدم المفاهيم التي تعلمنا عنها بالفعل ونضيف بعض الأفكار الجديدة أيضًا.

الملاحظة الأولى المهمة هنا هي أن Eleventy عبارة عن حزمة محددة النطاق ، لذا إليك أمر التثبيت:

 npm install @11ty/eleventy

بعد ذلك ، من الأمور السهلة التي أحب القيام بها إضافة البرامج النصية التالية إلى package.json الخاصة بي. json:

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

كما ذكرنا سابقًا ، ستعمل علامة --serve على تمكين خادم محلي عبر BrowserSync.

أفضّل تحديث أدلة الإدخال / الإخراج كما نظرنا بالفعل ، لذا حان الوقت الآن لإنشاء بعض المحتوى داخل src أو دليل الإدخال الذي تختاره.

من أجل إعداد مشروعنا ليكون أكثر مرونة وقابلية للتوسع من البداية ، أقترح إنشاء تخطيط واحد على الأقل يحتوي على نموذج HTML5 المعياري. تحتاج التخطيطات إلى أن يتم تعريفها داخل _includes يسمى مباشرة ، وهو واحد من عدد قليل من الدلائل المتوقعة.

الاصطلاح الذي ستجده غالبًا بين المبتدئين هو استدعاء base التخطيط هذه. لدي تفضيل لجعله ملف Nunjucks.

إليك عينة من base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

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

حان الوقت الآن لإنشاء فهرس موقعنا ، والذي سنضيفه كـ index.md :

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

لاحظ أننا أضفنا العنوان في المقدمة ، وحددنا أيضًا التنسيق.

في هذه المرحلة ، يمكننا تشغيل مشروعنا بالبرنامج النصي الذي أضفناه: npm start . سيؤدي هذا إلى تشغيل BrowserSync لإعداد localhost:8080 (إذا كان متاحًا) ولكنك ستحتاج إلى فتحه يدويًا في المستعرض. تحقق من هذه النصيحة السريعة إذا كنت ترغب في فتح المتصفح تلقائيًا.

الخطوة الأخيرة الحاسمة هي إضافة ورقة أنماط. حاليًا ، لم يتم التعرف على CSS كنوع ملف مضمن تلقائيًا ، لذا سيكون لدينا خطوة تكوين إضافية بعد إنشاء ورقة الأنماط الخاصة بنا.

يمكنك إضافة ملف CSS أينما تريد في دليل الإدخال ، مثل css/style.css . بعد ذلك ، افتح .eleventy.js (أو قم بإنشائه في جذر المشروع إذا لم تقم بتخصيص الإدخال / الإخراج) وأضف ما يلي:

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

أولاً ، نضيف دليل css كـ "نسخة عبور" مما يعني أنه يجب على Eleventy تضمينه في الدفع إلى دليل الإخراج. ثم نضيفه أيضًا كـ "هدف مراقبة" بحيث عندما نجري تغييرات على أنماطنا أثناء تشغيل أمر start ، سيطلق برنامج Eleventy إعادة بناء لتحديث موقعنا المحلي.

أخيرًا ، نحتاج إلى تذكر إضافة رابط إلى ورقة الأنماط الخاصة بنا داخل تخطيط base لدينا:

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

عندما نحدد موقع ورقة الأنماط ، فإننا نمررها عبر مرشح url الخاص بـ Eleventy والذي سيعدل مسار الملف النسبي حسب الحاجة عند الإنشاء.

بعد ذلك ، دعنا ننشئ نوع منشور "صفحات" لاستكشاف استخدام المجموعات والتخطيطات أكثر قليلاً. للقيام بذلك ، أضف دليل pages وأنشئ ملف Markdown واحدًا أو اثنين ، بما في ذلك مفتاح title الأمامي وليس التخطيط.

سنستخدم طريقة مختلفة قليلاً لتحديد التخطيط هذه المرة - ملف دليل البيانات . يتم تنسيق هذا الملف بشكل عام كـ JSON ويتيح لنا إضافة البيانات التي يجب تطبيقها على جميع الملفات داخل الدليل ، مما يمنع الحاجة إلى تكرارها عبر الملفات. يجب تسمية الملف بنفس اسم الدليل الذي سيتم استخدامه من أجله ، لذلك قم بإنشاء ملف pages.json وأضف المحتوى التالي:

 { "layout": "page.njk", "tags": "pages" }

لقد تقدمنا ​​أيضًا وحددنا العلامات من أجل إنشاء مجموعة "الصفحات". لكن التنسيق الذي حددناه غير موجود فعليًا بعد ، لذا أنشئ _includes/page.njk وأضف ما يلي:

 --- layout: base.njk --- <article> {{ content | safe }} </article>

نحن هنا نستخدم مفهوم Eleventy لتسلسل التخطيط حتى نتمكن من إعادة استخدام قالبنا base ولكن أيضًا نضيف عنصرًا فريدًا لتخطيط page ، وهو <article> . هذا يعني أن كل محتوى صفحاتنا سيستخدم كلاً من تخطيط page والتخطيطات base .

يقلل تسلسل التخطيط من الازدواجية عن طريق السماح بإعادة استخدام النماذج المعيارية وهياكل تخطيط الموقع الأساسي.

الآن بعد أن أنشأنا محتوى لنوع محتوى pages وعرّفناه على أنه مجموعة "الصفحات" عبر العلامات ، دعنا نرى كيف يمكننا الوصول إلى هذه المجموعة. هنا ، سنستخدم Nunjucks لتكرار المجموعة وإخراج قائمة من الروابط لكل صفحة. ستتم إضافة هذه الحلقة داخل ملف index.md بنا.

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

لقد فعلنا شيئًا فريدًا وهو أن الجزء الداخلي من الحلقة يعود بالفعل إلى Markdown لعرض الروابط. هذه ليست طريقة مطلوبة للتعامل مع هذا السيناريو ، لكنها يمكن أن تكون سهلة للغاية! في بعض الأحيان ، اعتمادًا على التعقيد ، قد لا يعمل هذا. السبب الحقيقي هو أن عارض Markdown يتحول افتراضيًا إلى لغة القوالب السائلة ، لذلك إذا كنت تستخدم ميزات Nunjucks بخلاف الحلقات الأساسية ، فسيتعين عليك إخبار Eleventy بكيفية معالجة الملف.

في القسم السابق حول ترقيم الصفحات ، نظرنا بالفعل في الحل لهذا الأمر. وذلك للاستفادة من templateEngineOverride للإشارة إلى أنه يجب معالجة الملف على أنهما Nunjucks و Markdown. يجب وضع الحل الكامل التالي في مقدمة النموذج: templateEngineOverride: njk, md .

في هذه المرحلة ، قمت بإنشاء موقع أساسي متعدد الصفحات! إذا كنت بحاجة إلى استخدام بيانات خارجية ، فانتقل مرة أخرى إلى القسم الخاص بالتقسيم إلى صفحات.

طرق أخرى لبدء مشروع أحد عشر

في حين أن بعض مولدات المواقع الثابتة والبيئات الأخرى مثل WordPress لديها مفهوم "السمات" ، يستخدم Eleventy مصطلح "المبتدئين". هناك مجموعة متزايدة للاختيار من بينها ، ويمكن العثور على العديد منها في القائمة داخل Eleventy docs.

أفضّل استخدام Sass مع مشاريع Eleventy الخاصة بي ، ولدي Sass starter متاحًا إذا كنت ترغب في معرفة كيفية إضافة ذلك إلى عملية الإنشاء الخاصة بك. قد يختار الآخرون إضافة Gulp إذا تم استخدامها لبناء خط أنابيب للأصول والمعالجة.

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

التوسع في الأساسيات

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

تغيير نوع إخراج الملف مع الروابط الثابتة

لقد ذكرت سابقًا أن الروابط الثابتة لها قوة عظمى. وهذا هو أنه يمكنك استخدامها لإخراج أنواع ملفات غير HTML.

هناك مثالان مفيدان هما إنشاء موجز RSS وملف Sitemap ، وكلاهما عادةً ما يكون ملفات XML. ما هو قوي حقًا هو أنه يمكنك الاستمرار في استخدام لغة القوالب التي تختارها للمساعدة في إنشاء هذه الملفات ، بحيث يمكنك تكرار بيانات الصفحة باستخدام Nunjucks للحفاظ على موجز RSS محدثًا ، على سبيل المثال.

تخصيص المجموعات

قد لا يكون استخدام العلامات لإنشاء مجموعات كافيًا في بعض الأحيان. أو ، قد ترغب في إنشاء متغيرات تمت تصفيتها لمجموعة موجودة. يمكننا تغيير أو إنشاء مجموعات باستخدام سلسلة من الوظائف المتوفرة. ستعيش هذه في ملف التكوين .eleventy.js .

في هذا المثال ، نستخدم وظيفة addCollection لتصفية العناصر في مجموعة موجودة. ستستند المجموعة الجديدة إلى وجود customKey في الواجهة الأمامية. يتم إرجاع هذا المفتاح من كائن data المرتبط بجميع محتوى Eleventy الذي تم إنشاؤه.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

يمكنك مراجعة طرق أخرى لإنشاء المجموعات وتعديلها واستخدامها في مستندات Eleventy.

العمل مع تتالي البيانات

يمتلك Eleventy مفهومًا أكثر اكتمالاً عن كيفية تجميع البيانات لقالب يُسمى تسلسل البيانات الذي بدأنا للتو في استكشافه في هذا الدليل. ستحصل على أقصى استفادة من برنامج Eleventy إذا راجعت كيفية عمل ذلك ، بدءًا من المستندات. لدى Ben Myers أيضًا دليل ممتاز لفهم سلسلة البيانات.

يوصى باستخدام أحد عشر ملحقًا

في المقدمة ، أشرت بإيجاز إلى أن هناك مكونات إضافية متاحة ، لكنها ليست مطلوبة دائمًا. ومع ذلك ، هناك القليل من الأشياء التي أميل إلى استخدامها في معظم المشاريع ، والتي تشمل:

• @ 11ty / eleventy-plugin-rss إذا كنت ترغب في الحصول على موجز RSS ، فإن هذا المكون الإضافي الرسمي يوفر بعض المرشحات لمساعدتك في إنشاء الخلاصة. يتضمن الريبو المرتبط عينة من الخلاصة ، والتي قد تجدها أيضًا قيد الاستخدام في بعض المبتدئين.
• @ 11ty / 11-plugin-syntaxhighlight بدلاً من تحميل Prism كبرنامج نصي لتمييز الكود ، يسمح هذا المكون الإضافي بتطبيق المعالجة كجزء من عملية بناء Eleventy. هذا يعني أنه تم تحويل كتل التعليمات البرمجية لتشمل الفئات لتطبيق سمة Prism مسبقًا ، لذلك ستحتاج فقط إلى إضافة سمة Prism CSS من اختيارك.
• @ 11tyrocks / eleventy-plugin-social-images إحدى الميزات التي بحثت عنها في وقت مبكر من استكشافي لـ Eleventy كانت القدرة على إنشاء صور لمشاركة الوسائط الاجتماعية. قادني هذا إلى إنشاء مكون إضافي يستخدم Puppeteer وراء الكواليس لأخذ اللقطة. يأتي المكون الإضافي مع قوالب تم إنشاؤها مسبقًا بالإضافة إلى خيارات التكوين لتحديد ملف القالب الخاص بك.

أوصي أيضًا بالتعرف على باقي المكونات الإضافية الرسمية لـ Eleventy لأنها تتناول الاحتياجات الشائعة الأخرى بما في ذلك التنقل والتعامل مع الصور.

تحديد ما إذا كان أحد عشر مناسبًا لمشروعك

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

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

الشيء المفضل لدي في Eleventy هو أنه لا يفرض العديد من الآراء حول كيفية هيكلة موقعي ، بخلاف الأدلة القليلة المتوقعة التي تحدثنا عنها لـ _includes و _data (ويمكنك تحديث اصطلاح التسمية لها أيضًا). يمكن أن يكون هذا مفيدًا أيضًا إذا كنت تتطلع إلى ترحيل موقع والقدرة على نقل بعض هياكل الملفات الموجودة أيضًا. ومع ذلك ، إذا كنت تفضل تصميمًا أكثر إصرارًا ، فقد تبحث عن خيار مختلف.

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

إذا كنت بحاجة إلى المزيد في عملية الإنشاء ، فيمكنك إضافة أدوات أخرى مألوفة مثل Webpack أو Gulp أو Parcel. قد تتمكن من العثور على بداية تتضمن هذه الأشياء بالفعل. ضع في اعتبارك أنه يمكنك أيضًا الاستفادة من نصوص Node النصية المتأصلة بالفعل في عملية بناء Eleventy.

إن برنامج Eleventy قادر جدًا على التعامل مع كميات كبيرة من إنشاء الصفحات. وقد تم استخدامه لبعض المواقع الكبيرة والمعقدة مثل web.dev من Google وموقع تسويق Netlify. لقد استخدمت أيضًا Eleventy لبعض الأغراض غير التقليدية ، مثل مولدات مكونات الويب والبريد الإلكتروني ، جنبًا إلى جنب مع بعض الأشياء الأخرى الموضحة في هذه النظرة العامة.

مصادر إضافية

آمل أن يكون هذا الدليل قد أثار اهتمامك وأعدك لبدء استخدام Eleventy! لقد تضمنت الكثير من النقاط التي وجدت صعوبة في الكشف عنها عندما كنت أقوم بإنشاء أول مشروعي بها. منذ أن وجدت شركة Eleventy لأول مرة في أبريل 2020 ، قمت ببناء أكثر من 20 مشروعًا من أحد عشر مشروعًا لحساب المبتدئين والمكونات الإضافية والمشاريع الجانبية والمواد الدراسية. يمكن العثور على العديد من هؤلاء على موقعي 11ty.Rocks الذي يحتوي أيضًا على دروس ونصائح. إن عقار Eleventy أمر أستمتع بمناقشته حقًا ، لذا لا تتردد في التواصل معه على Twitter!

فيما يلي المزيد من الموارد لمساعدتك في رحلتك للتعلم وتحقيق أقصى استفادة من Eleventy:

• يقدم Andy Bell دورة مدفوعة الثمن شاملة للغاية - "Learn Eleventy from Scratch".
• تقدم سلسلة دروس Tatiana Mac التعليمية ، بدءًا من "دليل المبتدئين إلى Eleventy" ، تفسيرات شاملة تفترض عدم وجود خبرة سابقة بمولدات المواقع الثابتة.
• يقدم Bryan Robinson دورة تدريبية على YouTube لتحويل سمة HTML مجانية إلى موقع Eleventy.

أخيرًا ، أود أن أشير إلى أن مجتمع Eleventy صغير ولكنه نشط! إذا واجهت صعوبة في العثور على بعض المعلومات ، فيمكنك إرسال سؤالك إلى حسابeleven_ty الرسمي. يسارع منشئ Eleventy ، Zach Leatherman ، للإجابة على الأسئلة أو أسئلة RT لمساعدتك على العودة إلى طريقك!