جيكل لمطوري وورد

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

مزيد من القراءة على SmashingMag:

• أنشئ مدونة باستخدام صفحات Jekyll و GitHub
• نمذجة المحتوى مع Jekyll
• مولدات الموقع الثابتة تمت مراجعتها: Jekyll، Middleman، Roots، Hugo
• لماذا مولدات الموقع الثابتة هي الشيء الكبير التالي
  

ما هو جيكل؟

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

لماذا جيكل؟

نحتاج إلى النظر في عدد من المفاضلات عند تحديد ما إذا كانت Jekyll مناسبة لمشروع ما.

مزايا جيكل

• تعقيد أقل
  موقع Jekyll هو في الأساس موقع ويب ثابت بلغة قوالب. يحتوي على مكونات أقل لإنشاء وصيانة. على الخادم ، نحتاج فقط إلى خادم ويب قادر على خدمة الملفات.
• سرعة
  عندما يعرض الزائرون الصفحات على مواقع Jekyll ، يقوم الخادم بإرجاع الملفات الموجودة دون أي معالجة إضافية . هذا أسرع بكثير من WordPress ، الذي ينشئ الصفحات ديناميكيًا عند الطلب. ملاحظة: يمكن أن تقضي إضافات WordPress Caching على فجوة الأداء هذه.
• استقرار
  يحتوي WordPress على المزيد من المكونات التي تعمل معًا لإنشاء صفحات للزوار. إذا فشل أحد المكونات ، فقد لا يتمكن الزوار من عرض موقع الويب. يمكن أن يحدث خطأ أقل بكثير عندما يخدم خادم الويب الملفات فقط.
• حماية
  يقوم Wordpress بالكثير من أجل التخفيف من مخاطر الأمان مثل هجمات CSRF أو XSS أو SQL ، إلا أنه يعتمد على حصولك دائمًا على آخر التحديثات. تعمل مواقع الإحصائيات على التخلص من هذه المشكلة لأنه لا يوجد تخزين ديناميكي للبيانات يمكن للمتسلل استغلاله.
• التحكم من المصدر
  موقع Jekyll هو دليل للملفات ، حتى نتمكن من تخزين موقع الويب بالكامل في مستودع Git. يمنحنا العمل مع المستودع العديد من الفوائد (على الرغم من أن VersionPress قيد التطوير وتمكن سير العمل هذا لـ WordPress).

عيوب Jekyll

• لا توجد واجهة مستخدم رسومية
  يمكن للعميل الاشتراك في WordPress.com واختيار سمة وإنشاء موقع ويب أساسي بنفسه. Jekyll هي أداة سطر أوامر ، والتي تربك معظم المستخدمين غير التقنيين. هناك واجهات المستخدم الرسومية لجهات خارجية لـ Jekyll ، بما في ذلك CloudCannon (إخلاء المسؤولية: أنا المؤسس المشارك) و Forestry و Jekyll Admin و Netlify CMS و Prose و Siteleaf. ومع ذلك ، يجب إعداد هذه من قبل المطور قبل تسليمها إلى العميل.
• بناء الوقت
  في حالتنا هذه ليست مشكلة لأن الموقع الإلكتروني سيبنى في أقل من ثانية. ومع ذلك ، قد يستغرق إنشاء موقع ويب أكبر يحتوي على 10000 إلى 100000 مشاركة دقائق. هذا أمر محبط عندما نقوم بالتطوير لأنه يتعين علينا الانتظار حتى يتم إنشاء موقع الويب قبل معاينته في المتصفح.
• ثيمات
  لدى Jekyll بعض السمات المتاحة ، لكنها لا تقارن بالآلاف من السمات المتاحة لـ WordPress.
• التمدد
  إذا احتجنا إلى إضافة وظائف مخصصة إلى موقع WordPress الخاص بنا ، فيمكننا كتابة PHP الخاصة بنا. يمكننا إنشاء ملحقات Ruby مخصصة لـ Jekyll ، ومع ذلك ، يتم تشغيلها في وقت الإنشاء بدلاً من وقت الطلب.
• الدعم
  يحتوي WordPress على مجتمع ضخم من الخبراء والموارد الأخرى للمساعدة. لدى Jekyll موارد مماثلة ولكن على نطاق أصغر.

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

تطبيق

يتخذ WordPress و Jekyll طرقًا مختلفة لإنشاء موقع ويب مع مشاركة الكثير من الوظائف. لنبدأ في بناء موقع Jekyll الخاص بنا.

التثبيت

تتطلب بيئة التطوير النموذجية لـ WordPress تثبيت Apache أو NGINX و PHP و MySQL. بعد ذلك ، سنقوم بتثبيت WordPress وتهيئة خادم الويب.

بالنسبة إلى Jekyll ، نحتاج إلى التأكد من تثبيت Ruby (أحيانًا يكون هذا أصعب مما يبدو). ثم نقوم بتثبيت جوهرة جيكل:

 gem install jekyll

إذا كنت تستخدم macOS ، فتأكد من تثبيت مطور Xcode أولاً.

 xcode-select --install

ادارة

عادةً ما يتكون تشغيل موقع WordPress من بدء تشغيل قاعدة البيانات وخادم الويب.

في Jekyll ، ننتقل إلى ملفات موقعنا (دليل فارغ في هذه المرحلة) في المحطة ونقوم بتشغيل:

 jekyll serve

يؤدي هذا إلى تشغيل خادم ويب محلي على المنفذ 4000 ويعيد بناء الموقع كلما تغير أحد الملفات.

الصفحات

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

في Jekyll ، الصفحات عبارة عن ملفات HTML. سنبدأ بـ HTML خالص ثم نضيف ميزات Jekyll حسب الحاجة. إليك index.html الحالية:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

سائل

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

يحتوي تذييل index.html على إشعار حقوق النشر لمدة عام:

 <p class="copyright"> &copy; 2016 </p>

من غير المحتمل أن نتذكر تحديث هذا كل عام ، لذلك دعونا نستخدم Liquid لإخراج العام الحالي:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

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

يشمل

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

كانت التضمينات من أول الأشياء التي تعلمتها في PHP. باستخدام التضمين ، يمكننا وضع محتوى الرأس والتذييل في ملفات مختلفة ، ثم تضمين نفس المحتوى في صفحات متعددة.

لدى Jekyll نفس الميزة بالضبط. يتم تخزين التضمينات في مجلد يسمى _includes . نستخدم Liquid لتضمينها في index.html :

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

التخطيطات

يتضمن تقليل بعض التكرار ، لكننا ما زلنا نوفرها في كل صفحة. يحل WordPress هذه المشكلة باستخدام ملفات القوالب التي تفصل بنية موقع الويب عن محتواه.

مكافئ Jekyll لملفات القوالب هو التخطيطات. التخطيطات هي ملفات HTML مع عنصر نائب للمحتوى. يتم تخزينها في دليل _layouts . _layouts/default.html لاحتواء تخطيط HTML أساسي:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

ثم ، استبدل التضمينات في index.html بتحديد التخطيط. نحدد التنسيق باستخدام المادة الأمامية ، وهو مقتطف من YAML يقع بين سطرين متقطعين في أعلى الملف (المزيد حول هذا قريبًا).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

الآن يمكننا الحصول على نفس التصميم في جميع صفحاتنا.

المسألة الأمامية

في WordPress ، تسمح لنا الحقول المخصصة بتعيين البيانات الوصفية على المنشور. يمكننا استخدامها لتعيين علامات تحسين محركات البحث (SEO) أو لإظهار وإخفاء أقسام من الصفحة لمنشور معين.

هذا المفهوم يسمى الجبهة في Jekyll. في وقت سابق ، استخدمنا الواجهة الأمامية لتعيين تنسيق index.html . يمكننا الآن تعيين المتغيرات الخاصة بنا والوصول إليها باستخدام السائل. هذا يقلل من التكرار على موقعنا.

دعنا نضيف شهادات متعددة إلى index.html . يمكننا نسخ ولصق HTML ، ولكن مرة أخرى ، هذا يؤدي إلى زيادة الصيانة. بدلاً من ذلك ، دعنا نضيف الشهادات في المقدمة ونكررها باستخدام Liquid:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

المشاركات

يقوم WordPress بتخزين محتوى HTML والتاريخ وبيانات التعريف الأخرى للمنشورات في قاعدة البيانات.

في Jekyll ، كل منشور هو ملف ثابت مخزن في دليل _posts . يحتوي اسم الملف على تاريخ النشر وعنوان المنشور - على سبيل المثال ، _posts/2016-11-11-real-estate-flipping.md . تأخذ شفرة المصدر لمنشور مدونة هذا الهيكل:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

يمكننا أيضًا استخدام الواجهة الأمامية لتعيين الفئات والعلامات.

يوجد أسفل الجزء الأمامي جسم المنشور ، المكتوب في Markdown. Markdown هو بديل أبسط لـ HTML.

يسمح لنا Jekyll بإنشاء تخطيطات موروثة من التخطيطات الأخرى. ربما لاحظت أن هذا المنشور يحتوي على مخطط post . يرث تخطيط post من التخطيط الافتراضي ويضيف التاريخ والعنوان:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

لنقم بإنشاء blog.html على المنشورات والربط بها:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

المجموعات

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

لدى Jekyll هذه الميزة ويطلق عليها المجموعات.

تعرض صفحة about.html الملفات الشخصية للموظفين. يمكننا تحديد البيانات الوصفية للموظفين (الاسم والصورة ورقم الهاتف والسيرة الذاتية) في المقدمة ، ولكن بعد ذلك يمكننا فقط الرجوع إليها في تلك الصفحة. في المستقبل ، نريد استخدام نفس البيانات لعرض معلومات حول المؤلفين في منشورات المدونة. المجموعة تمكننا من الرجوع إلى الموظفين في أي مكان على الموقع.

تكوين موقعنا يعيش في _config.yml . هنا ، وضعنا مجموعة جديدة:

 collections: staff_members: output: false

الآن نضيف موظفينا. يتم تمثيل كل موظف في ملف Markdown مخزن في مجلد باسم المجموعة ؛ على سبيل المثال ، _staff_members/jane-doe.md .

نضيف البيانات الوصفية في المادة الأمامية والدعاية المغلوطة في الجسم:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

على غرار المنشورات ، يمكننا تكرار المجموعة في about.html لعرض كل موظف:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

بحث

يحتوي WordPress على بحث مدمج قوي ومكونات بحث أكثر قوة.

ليس لدى Jekyll بحث مضمّن ، ولكن هناك حلول:

• البحث من جانب العميل باستخدام مكتبة JavaScript مثل Lunr.js (يحتوي Jekyll.tips على برنامج تعليمي حول كيفية إعداد هذا) ؛
• حلول الجهات الخارجية ، مثل Algolia للبحث عالي الأداء ؛
• حلول غير مسبوقة ، مثل بحث Google المخصص.

الإضافات

الإضافات هي جزء جذاب من WordPress. من السهل تحميل الوظائف لجعل WordPress يفعل أي شيء تقريبًا.

على موقع Jekyll الخاص بنا ، العديد من إضافات WordPress الشائعة ليست ضرورية:

• أمان iThemes
  موقع Jekyll الخاص بنا آمن مثل خادم الويب الذي يعمل عليه.
• حارس النسخ الاحتياطي
  سيعيش موقع Jekyll الخاص بنا في مستودع يتيح لنا الوصول إلى سجل التغييرات بالكامل.
• WP Super Cache
  موقع Jekyll الخاص بنا ثابت بالفعل.

تحتوي مكونات WordPress الإضافية الأخرى على مكافئات تابعة لجهات خارجية يمكننا إدخالها في موقع الويب:

• يمكن استبدال المكونات الإضافية لنماذج الاتصال مثل نموذج الاتصال 7 بـ Formspree أو FormKeep أو Wufoo.
• لمتجر بسيط ، يمكن استبدال WP eCommerce بـ Snipcart أو Gumroad أو Stripe.
• بدلاً من تعليقات WordPress مع Akismet ، يمكنك استخدام Disqus أو Facebook Comments أو IntenseDebate.

يمكن محاكاة بعض مكونات WordPress الإضافية باستخدام Core Jekyll. إليك معرض للصور باستخدام المادة الأمامية والسائل:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

نحتاج فقط إلى إضافة JavaScript و CSS الخاصة بنا لإكمالها.

يمكن لمكونات Jekyll الإضافية محاكاة وظائف مكونات WordPress الإضافية الأخرى. ضع في اعتبارك أن مكونات Jekyll الإضافية تعمل فقط أثناء إنشاء موقع الويب - فهي لا تضيف وظائف في الوقت الفعلي:

• بدلاً من One Click XML Sitemap ، استخدم Jekyll Sitemap Generator Plugin.
• تمنحك علامة Jekyll SEO بعض وظائف معالج تحسين محركات البحث.
• بدلاً من WPGlobus لموقع ويب متعدد اللغات ، استخدم Jekyll Language Plugin.

التحكم في الإصدار

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

يحتوي GitHub على برنامج تعليمي تفاعلي رائع للمبتدئين في تعلم Git.

تسليم العميل

يغطي ذلك تفاصيل إنشاء الموقع. إذا كنت مهتمًا بمعرفة كيف يتناسب موقع Jekyll بأكمله معًا ، فقم بإلقاء نظرة على نموذج Justice. إنه نموذج مجاني مرخص من معهد ماساتشوستس للتكنولوجيا لـ Jekyll. تستند المقتطفات أعلاه على هذا القالب.

تم دمج WordPress CMS في النظام الأساسي ، لذلك سنحتاج إلى إنشاء حساب للعميل.

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

تقدم بعض واجهات Jekyll GUI الاستضافة ، بينما يمتلك البعض الآخر طريقة للإخراج إلى حاوية Amazon S3 أو صفحات GitHub.

ملخص

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

<div class = “testimonials”> {٪ for testimonial in page.testimonials٪} <blockquote class = “testimonial”> <p class = “testimonial-message”> {{testimonial.message}} </p> <p class = “testimonial-author”> <img src = “{{testimonial.image}}” alt = “صورة {{testimonial.name}}”> {{testimonial.name}} </p> </blockquote> { ٪ endfor٪} </div>

المشاركات

يقوم WordPress بتخزين محتوى HTML والتاريخ وبيانات التعريف الأخرى للمنشورات في قاعدة البيانات.

في Jekyll ، كل منشور هو ملف ثابت مخزن في دليل _posts . يحتوي اسم الملف على تاريخ النشر وعنوان المنشور - على سبيل المثال ، _posts/2016-11-11-real-estate-flipping.md . تأخذ شفرة المصدر لمنشور مدونة هذا الهيكل:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

يمكننا أيضًا استخدام الواجهة الأمامية لتعيين الفئات والعلامات.

يوجد أسفل الجزء الأمامي جسم المنشور ، المكتوب في Markdown. Markdown هو بديل أبسط لـ HTML.

يسمح لنا Jekyll بإنشاء تخطيطات موروثة من التخطيطات الأخرى. ربما لاحظت أن هذا المنشور يحتوي على مخطط post . يرث تخطيط post من التخطيط الافتراضي ويضيف التاريخ والعنوان:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

لنقم بإنشاء blog.html على المنشورات والربط بها:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

المجموعات

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

لدى Jekyll هذه الميزة ويطلق عليها المجموعات.

تعرض صفحة about.html الملفات الشخصية للموظفين. يمكننا تحديد البيانات الوصفية للموظفين (الاسم والصورة ورقم الهاتف والسيرة الذاتية) في المقدمة ، ولكن بعد ذلك يمكننا فقط الرجوع إليها في تلك الصفحة. في المستقبل ، نريد استخدام نفس البيانات لعرض معلومات حول المؤلفين في منشورات المدونة. المجموعة تمكننا من الرجوع إلى الموظفين في أي مكان على الموقع.

تكوين موقعنا يعيش في _config.yml . هنا ، وضعنا مجموعة جديدة:

 collections: staff_members: output: false

الآن نضيف موظفينا. يتم تمثيل كل موظف في ملف Markdown مخزن في مجلد باسم المجموعة ؛ على سبيل المثال ، _staff_members/jane-doe.md .

نضيف البيانات الوصفية في المادة الأمامية والدعاية المغلوطة في الجسم:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

على غرار المنشورات ، يمكننا تكرار المجموعة في about.html لعرض كل موظف:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

بحث

يحتوي WordPress على بحث مدمج قوي ومكونات بحث أكثر قوة.

ليس لدى Jekyll بحث مضمّن ، ولكن هناك حلول:

• البحث من جانب العميل باستخدام مكتبة JavaScript مثل Lunr.js (يحتوي Jekyll.tips على برنامج تعليمي حول كيفية إعداد هذا) ؛
• حلول الجهات الخارجية ، مثل Algolia للبحث عالي الأداء ؛
• حلول غير مسبوقة ، مثل بحث Google المخصص.

الإضافات

الإضافات هي جزء جذاب من WordPress. من السهل تحميل الوظائف لجعل WordPress يفعل أي شيء تقريبًا.

على موقع Jekyll الخاص بنا ، العديد من إضافات WordPress الشائعة ليست ضرورية:

• أمان iThemes
  موقع Jekyll الخاص بنا آمن مثل خادم الويب الذي يعمل عليه.
• حارس النسخ الاحتياطي
  سيعيش موقع Jekyll الخاص بنا في مستودع يتيح لنا الوصول إلى سجل التغييرات بالكامل.
• WP Super Cache
  موقع Jekyll الخاص بنا ثابت بالفعل.

تحتوي مكونات WordPress الإضافية الأخرى على مكافئات تابعة لجهات خارجية يمكننا إدخالها في موقع الويب:

• يمكن استبدال المكونات الإضافية لنماذج الاتصال مثل نموذج الاتصال 7 بـ Formspree أو FormKeep أو Wufoo.
• لمتجر بسيط ، يمكن استبدال WP eCommerce بـ Snipcart أو Gumroad أو Stripe.
• بدلاً من تعليقات WordPress مع Akismet ، يمكنك استخدام Disqus أو Facebook Comments أو IntenseDebate.

يمكن محاكاة بعض مكونات WordPress الإضافية باستخدام Core Jekyll. إليك معرض للصور باستخدام المادة الأمامية والسائل:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

نحتاج فقط إلى إضافة JavaScript و CSS الخاصة بنا لإكمالها.

يمكن لمكونات Jekyll الإضافية محاكاة وظائف مكونات WordPress الإضافية الأخرى. ضع في اعتبارك أن مكونات Jekyll الإضافية تعمل فقط أثناء إنشاء موقع الويب - فهي لا تضيف وظائف في الوقت الفعلي:

• بدلاً من One Click XML Sitemap ، استخدم Jekyll Sitemap Generator Plugin.
• تمنحك علامة Jekyll SEO بعض وظائف معالج تحسين محركات البحث.
• بدلاً من WPGlobus لموقع ويب متعدد اللغات ، استخدم Jekyll Language Plugin.

التحكم في الإصدار

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

يحتوي GitHub على برنامج تعليمي تفاعلي رائع للمبتدئين في تعلم Git.

تسليم العميل

يغطي ذلك تفاصيل إنشاء الموقع. إذا كنت مهتمًا بمعرفة كيف يتناسب موقع Jekyll بأكمله معًا ، فقم بإلقاء نظرة على نموذج Justice. إنه نموذج مجاني مرخص من معهد ماساتشوستس للتكنولوجيا لـ Jekyll. تستند المقتطفات أعلاه على هذا القالب.

تم دمج WordPress CMS في النظام الأساسي ، لذلك سنحتاج إلى إنشاء حساب للعميل.

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

تقدم بعض واجهات Jekyll GUI الاستضافة ، بينما يمتلك البعض الآخر طريقة للإخراج إلى حاوية Amazon S3 أو صفحات GitHub.

ملخص

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

موقع Jekyll الأول الخاص بك

الان حان دورك. يتوفر الكثير من الموارد لمساعدتك في إنشاء موقع Jekyll الأول الخاص بك:

• يعد موقع Jekyll الرسمي مكانًا رائعًا للبدء بتوثيق متعمق حول جميع ميزات Jekyll.
• يحتوي Jekyll.tips على سلسلة دروس فيديو تغطي موضوعات Jekyll الأساسية.
• ألق نظرة على قوالب Jekyll على GitHub لترى كيف يتم تجميعها معًا: Frisco لمواقع التسويق ، و Scholar للتوثيق ، و Urban للوكالات الرقمية.

إذا كنت تقوم بالترحيل ، فإن لدى Jekyll أدوات لاستيراد المنشورات من مواقع WordPress و WordPress.com. بعد الاستيراد ، ستحتاج إلى ترحيل أو إنشاء التخطيطات والصفحات و CSS وجافا سكريبت والأصول الأخرى يدويًا لموقع الويب.

تغليف

يكمن جمال Jekyll في بساطته. بينما يمكن أن يتطابق WordPress مع العديد من ميزات Jekyll ، إلا أنه غالبًا ما يكون على حساب التعقيد من خلال المكونات الإضافية أو البنية التحتية الإضافية.

في النهاية ، يتعلق الأمر بالعثور على الأداة التي تناسبك بشكل أفضل. لقد وجدت أن Jekyll طريقة سريعة وفعالة لبناء مواقع الويب. أنا أشجعك على تجربتها ونشر تجربتك في التعليقات.