نظرة عامة على مولدات المواقع الثابتة الشعبية

تحتوي جميع أدوات إنشاء الصفحات الثابتة على مهمة واحدة تبدو مباشرة: إنتاج ملف HTML ثابت وجميع أصوله.

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

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

نظرة عامة على الأطر الشائعة للصفحة الثابتة

في هذا المنشور ، سنلقي نظرة فاحصة على إطارات الصفحات الثابتة التالية: Jekyll و Middleman و Hugo و Hexo . هذه ليست بأي حال من الأحوال المولدات الوحيدة الموجودة ، لكنها الأكثر استخدامًا ، مدعومة من قبل المجتمعات الكبيرة والكثير من الموارد المفيدة.

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

• جيكل
  • مكتوبة في روبي ،
  • يدعم محرك القالب السائل خارج الصندوق ؛
• وسيط
  • مكتوبة في روبي ،
  • يدعم محركات قالب ERB و Haml خارج الصندوق ؛
• هوغو
  • مكتوب في Go ،
  • يدعم محرك قالب Go خارج الصندوق ؛
• سداسي
  • مكتوب بلغة جافا سكريبت ،
  • يدعم EJS و Pug خارج منطقة الجزاء.

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

إعداد مولدات الموقع الثابتة

وثائق كل من هذه الأطر شاملة ولا تقل عن كونها ممتازة ويمكنك الحصول عليها هنا:

وثائق جيكل

وثائق وسيط

وثائق هوغو

وثائق Hexo

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

على سبيل المثال ، هذه هي الطريقة التي تبدأ بها مشروعًا جديدًا في أطر مختلفة:

جيكل

jekyll new my_website

وسيط

middleman init my_website

هوغو

hugo new my_website

سداسي

hexo init my_website

إعدادات

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

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

الترحيل إلى مولد ثابت

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

بالنسبة لـ Jekyll ، هل يمكن أن يكون البرنامج المساعد Jekyll Exporter. بالنسبة إلى Middleman ، يمكنك استخدام أداة سطر أوامر تسمى wp2middleman. يمكنك استخدام Wordpress إلى Hugo Exporter لترحيل Hugo ، وبالنسبة إلى Hexo ، يمكنك قراءة دليلنا حول كيفية الانتقال من Wordpress إلى Hexo الذي كتبته العام الماضي.

المبدأ متطابق تقريبًا وواضح تمامًا - أولاً قم بتصدير كل المحتوى إلى تنسيق مناسب ، ثم قم بتضمينه في المجلد الصحيح.

محتوى

تستخدم مولدات الصفحات الثابتة Markdown للمحتوى الرئيسي. Markdown قوي ويمكن للمرء أن يتعلمه بسرعة. تبدو كتابة المحتوى في Markdown أمرًا طبيعيًا بسبب بنيتها البسيطة. يبدو المستند نظيفًا ومنظمًا.

يجب عليك وضع المقالات في مجلد محدد في ملف التكوين العام. يجب أن تتبع أسماء المقالات الاصطلاح المحدد من قبل المولد.

في Jekyll ، يجب عليك وضع مقال في دليل _posts . يجب أن يكون اسم المقال بالتنسيق التالي: YEAR-MONTH-DAY-title.MARKUP. المولدات الأخرى لها قواعد مماثلة ، وهي توفر أمرًا لإنشاء مقال جديد.

فيما يلي أوامر إنشاء مقال جديد في Middleman و Hugo و Hexo:

وسيط

middleman article my_article

هوغو

hugo new posts/my_article.md

سداسي

hexo new post my_article

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

This is a text with <a class="my-class" href="#">a link</a> .

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

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

على سبيل المثال ، هذه هي الطريقة التي يمكنك بها إضافة علامات إلى مقالتك.

 tags: - web - dev - featured

القوالب في مولدات الصفحات الثابتة

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

{{ page.title }}

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

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

الوسيط:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

هوغو:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

سداسي:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

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

استخدام المتغيرات

يوفر منشئ الصفحة الثابتة متغيرات عامة متاحة لتسليم القوالب. نوع المتغير المختلف يحمل معلومات مختلفة. على سبيل المثال ، يحتفظ موقع المتغير الشامل في Hexo بمعلومات حول المنشورات والصفحات والفئات والعلامات الخاصة بالموقع.

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

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

ملفات البيانات

عندما تريد تخزين البيانات غير المتوفرة في ملفات Markdown ، يجب عليك استخدام ملفات البيانات. على سبيل المثال ، إذا كنت بحاجة إلى حفظ قائمة الروابط الاجتماعية التي تريد عرضها في تذييل موقعك. تدعم جميع مولدات الصفحات الثابتة ملفات YAML و JSON. بالإضافة إلى ذلك ، يدعم Jekyll ملفات CSV ، ويدعم Hugo ملفات TOML.

دعنا نخزن هذه الروابط الاجتماعية في ملف البيانات الخاص بنا. نظرًا لأن جميع المولدات تدعم تنسيق YAML ، فلنقم بحفظ البيانات في ملف social.yml:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

يخزن Jekyll ملفات البيانات في دليل _data افتراضيًا. يستخدم Middleman و Hugo دليل البيانات ، ويستخدم Hexo source/_data directory .

لإخراج البيانات ، يمكنك استخدام الكود التالي:

جيكل

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

وسيط

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

هوغو

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

سداسي

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

مساعدين

غالبًا ما تدعم القوالب تصفية البيانات. على سبيل المثال ، إذا كنت تريد جعل العنوان كبيرًا ، فيمكنك القيام بذلك على النحو التالي:

{{ page.title | upcase }}

الوسيط لديه بناء جملة مماثل:

<%= current_page.data.title.upcase %>

يستخدم Hugo الأمر التالي:

{{ .Title | upper }}

Hexo له تركيب مختلف ، لكن النتيجة واحدة.

<%= page.title.toUpperCase() %>

كيف تتعامل مولدات الصفحات الثابتة مع الأصول

يتم التعامل مع إدارة الأصول بشكل مختلف عبر مولدات الصفحة الثابتة. تقوم Jekyll بتجميع ملفات الأصول أينما وُضعت. يتعامل الوسيط مع الأصول المخزنة في المجلد المصدر فقط. الموقع الافتراضي للأصول في Hugo هو دليل الأصول. يقترح Hexo وضع الأصول في دليل المصادر العالمية.

ساس

يدعم Jekyll Sass خارج الصندوق ، ولكن يجب عليك اتباع بعض القواعد. يدعم Middleman أيضًا Sass خارج منطقة الجزاء. يجمع Hugo Sass من خلال Hugo Pipes لـ Sass. يقوم Hexo بذلك عبر البرنامج المساعد.

ES6

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

الصور

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

الإضافات والإضافات

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

يمكنك كتابة ملحق أو ملحق جديد. قبل القيام بذلك ، تحقق من وجود مكون إضافي مشابه. انظر قائمة Jekyll plugin و Middleman plugins و Hexo plugins. ليس لدى Hugo مكونات إضافية أو ملحقات. ومع ذلك ، فإنه يدعم الرموز القصيرة المخصصة.

الرموز القصيرة في Markdown

الرموز القصيرة هي مقتطفات التعليمات البرمجية التي يمكنك وضعها في مستندات Markdown. هذه المقتطفات إخراج كود HTML. يدعم Hugo و Hexo الرموز القصيرة. هناك رموز مختصرة مضمنة ، مثل الرقم في Hugo:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo youtube Shortcode:

{% youtube video_id %}

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

CMS

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

المكافأة: قوالب JAMstack

إذا كنت لا ترغب في قضاء الكثير من الوقت في تكوين مشروعك ، فيمكنك الاستفادة من قوالب JAMstack. تم تكوين بعض هذه القوالب مسبقًا باستخدام CMS مما قد يوفر لك الكثير من الوقت.

يمكنك أيضًا تعلم الكثير من خلال فحص الكود. حاول تثبيت قالب ومقارنته بالآخرين واختر أفضل قالب يناسبك.

تغليف

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

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

هناك الكثير الذي يمكنك القيام به مع موقع الويب الثابت الخاص بك: من استخدام Wordpress REST API كخلفية إلى استخدام وظائف Lambda. هناك حلول ممتازة حتى لمواقع الويب البسيطة ، مثل استخدام HTTPS خارج الصندوق أو التعامل مع عمليات إرسال النماذج.

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