في الجزء الأول من هذا الدرس، قمنا بتغطية كيفية إعداد بيئة تطوير محلية خاصة بك، استعمال إطار عمل CSS وإنشاء منشورات للمدونة. في هذا الجزء سنضيف بعض اللمسات النهائية للصفحة الرئيسية، إضافة شيء من التفاعل، وأخيرًا، نشر المدونة على الويب.
فهرس الجزء الثاني من هذا الدرس:
مدى التقدّم لحد الآن
التصفيح (pagination)
التعليقات
الأيقونات
صفحة 404
المشاركة والشبكات الاجتماعية
إحصائيات الزوار
الخروج للعلن
سَير عمل مُتواصل
الناتج النهائي (بالتقريب) لما ستتحصل عليه بعد متابعة كامل الدرس:
يُكن أيضا معاينة الناتج النهائي مُباشرة من هنا.
مدى التقدم لحد الآن
لتلخيص ما تم تغطيته لحد الآن، فيجدر بنا حاليا أن يكون لدينا مدونة Jekyll تشتغل بشكل جيد على حاسوبنا المحلي. مع تنسيق للصفحة الرئيسية، وتنسيق آخر خاص بصفحة المنشور، كذلك يجدر بنا أن نكون الآن قادرين على إنشاء منشور جديد وكتابة محتوى له. هذه المنشورات تُعرض على الصفحة الرئيسية، كلٌ له رابط يصل إلى صفحة المنشور الخاصة به.
في ما يلي سنُحسن قليلا من الصفحة الرئيسية لإضافة التصفيح (pagination).
التصفيح (pagination)
يأتي Jekyll بآلية تصفيح بسيطة يُمكن استعمالها للتحكم بعدد المنشورات التي يجب عرضها على الصفحة الرئيسية في كل مرة. الخطوة الأولى لإضافة التصفيح هي زيادة خيار لملف config.yml_ بالشكل التالي:
paginate: 5
سيُخبر هذا Jekyll بعرض 5 منشورات فقط في كل مرة. قد تحتاج لإعادة تشغيل Jekyll من خلال سطر الأوامر خاصتك، وذلك عبر إيقافه (Ctrl+c) ثم إعادة تشغيله مُجَدَدًا عبر تنفيذ:
Jekyll serve --watch
كذلك سيُمرر خيار paginate بعض المعلومات الإضافية لقوالب Liquid التي تستعملها صفحاتنا. يمكننا الاستفادة من هذه المعلومات لإنشاء روابط "التالي" و "السابق" . افتح ملف index.html (الصفحة الرئيسية) وأضف الشفرة التالية في الموضع التي تريد أن تظهر فيه تلك الروابط:
<!-- Pagination links -->
<nav class="pagination">
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<a href="/" class="previous">«</a>
{% else %}
<a href="/page" class="previous">«</a>
{% endif %}
{% endif %}
{% if paginator.next_page %}
<a href="/page" class="next ">»</a>
{% endif %}
</nav>آلية عمل الشفرة أعلاه بسيطة، فهي فقط تفحص عنصر التصفيح إن كان يحتوي على صفحة تالية أو سابقة، ثم إظهار روابط "السابق" أو "التالي" حسب نتيجة الفحص. يمكن استعمال الشفرة أعلاه في أي صفحة تريد أن تعرض فيها قائمة المنشورات. أما حلقة قائمة المنشورات فهي كالتالي:
{% for post in paginator.posts %}
... شفرة قائمة المنشورات ...
{% endfor %}باستعمال هذه الحلقة، يمكنك الوصول إلى معلومات المنشور عن طريق post.value حيث value عبارة عن أحد متغيرات frontmatter التي قمنا بتعيينها في أعلى ملف المنشور . مزيد من المعلومات حول Frontmatter.
التعليقات
منصات التدوين مثل Wordpress تأتي بنظام تعليقات ضمني، بما أن المدونة التي نعمل عليها عبارة عن صفحات HTML ثابتة، فليس لدينا هذه الخاصية. لكن هناك بعض الخدمات الرائعة التي تعتمد على Javascript.
من أشهر الحلول، نظام تعليقات Disqus. فهو سهل التنصيب، ومُجهّز بأدوات إدارية كاملة للتحكم بالتعليقات، والأروع أنه مجاني.
يكفي فقط زيارة موقع الخدمة والنقر على "Add Disqus to your site” ثم تسجيل موقعك. عند إتمام عملية التسجيل ستعطيك الخدمة قُصاصة لشفرة Javascript يمكنك وضعها في أي مكان تريد أن يظهر فيه نظام التعليقات في ملف posts.html، وانتهى الأمر.
الأيقونات
إلى هنا، أنهينا الأمور المتعلقة بالمُحتوى وتنسيقه، وقد حان الوقت الآن للاعتناء ببعض التفاصيل الصغيرة التي تُبدي بها مدى اعتنائك بمُدونتك. من ذلك أيقونة المدونة favicon التي تَظهر بجانب العنوان على ألسنة المتصفح أو عند إضافة أحدهم موقعك لمُفضلته.
عند إنشاء أيقونة favicon فيجب أن تأخذ في الحسبان أنها أيقونة صغيرة جدا، اختر شيئا يُبرز هوية المدونة، قد يكون ذلك شعار المُدونة أو أحد رُموزها.
اسم ملف الأيقونة favicon.ico وهي ذو أبعاد 16 على 16 بكسل.
يُمكنك البدء عن طريق إنشاء مُربع صغير على برنامج فوتوشوب أو محررك المُفضل. عادة، من السهل البدء بمُربع أكبر من 16 بكسل (أقترح 500 على 500 بكسل) ثم تصغيره لاحقا. بمُجرد تجميعك لصورة مُعينة، فإن أسرع طريقة لتوليد أيقونة favicon هي عبر رفع التصميم إلى موقع Iconifier.
سيقوم الموقع بتصغير الملف المرفوع إلى 16 بكسل وتوليد ملف favicon.ico تلقائيا. ضع هذا الملف في جذر مُجلد مشروع مُدونتك.
بعدها، أضف السطر التالي في قسم head لشفرة HTML خاصتك، سيُخبر المتصفح بمكان الأيقونة لجلبها:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
أيقونات أُخرى
من مزايا موقع Iconifier أيضا أنه سيُولد لنا أيقونات أخرى، منها ما هو خاص بأجهزة Apple التي تظهر عند إضافة أحدهم موقعك لشاشة هاتفه مثلا. ستجد أن هناك العديد من أحجام الأيقونات لمختلف الاحتياجات مثل iPad، iPhone .. الخ، هذه الملفات توضع في جذر مُجلد المدونة.
صفحة 404
قُمنا بتغطية جميع الصفحات المهمة على المدونة لحد الآن، لكن هناك صفحة لا يجب نسيانها، إنها صفحة "صفحة غير موجودة"! يتم عرض هذه الصفحة عندما يكتب أحدهم عنوانا خاطئا على مدونتك أو في حال تم نقل المُحتوى إلى مكان آخر. هدف هذه الصفحة هو مساعدة الزائر وإعلامه أنه وقع على مكان ليس به مُحتوى، واقتراح أمكنة أخرى قد تُهمه أكثر.
أنشئ ملفا باسم 404.html في جذر مجلد المدونة. سيقوم Jekyll تلقائيا بعرض هذه الصفحة عندما يزور أحدهم عنوانا خاطئًا.
مُحتوى ملف 404.html من الشكل التالي:
---
layout: default
title: صفحة غير موجودة
---
<article>
<header id="404">
<h1>صفحة غير موجودة</h1>
</header>
<section class="entry">
<p>عفوا، لكن يبدو أن هذه الصفحة غير موجودة <a href="/">توجّه إلى الصفحة الرئيسية</a>.
</p>
</section>
</article>بعضهم قد يختار وضع صفحات مَرِحَة أو مُضحكة، أنت حر في تعديل شفرة HTML أعلاه وتخصيصها بما يُناسبك.
المُشاركة والشبكات الاجتماعية
يعتمد هذا على رغباتك، لكن قد تود وضع روابط لحساباتك على الشبكات الاجتماعية أو أزرار مشاركة المنشورات، إن كنت تريد كذلك، فقد تودّ الاعتماد على أحد الخدمات المتوفرة مُسبقا، من ذلك خدمة AddThis.
سيُتيح لك موقع AddThis تخصيص أزرار الشبكات الاجتماعية وكيفية عرضها، ثم يعطيك قُصاصة شفرة Javascript لزرعها في موقعك، في هذه الحالة، يُمكنك وضعها في ملف default.html مثلا كي تظهر الأزرار في جميع أنحاء المُدونة!
إحصائيات الزوار
عادة قبل نشر أي موقع، أقوم بإضافة Google Analytics. فهي خدمة جيدة للاطلاع على نسبة الزوار، موقعهم الجغرافي ووقت الزيارة. ستساعدك الخدمة أيضا في معرفة أي من المنشورات لاقى رواجا.
لاستعمال Google Analytics يكفي أن يكون لديك حساب Google عبر التسجيل بالموقع، ثم وضع قصاصة شفرة Javascript في قسم head أو في ذيل شفرة HTML.
وضع شفرة Google Analytics في قسم head قد يُعيق عملية رسم الصفحة، لذلك أفضّل وضعها أسفل المحتوى، قبل غلق عنصر <body/> حتى يتسنّى للمتصفح تحميل المحتوى أولا وعرضه ثم تحميل Google Analytics تبعا.
من المُحبذ أيضا وضع الشفرة في ملف default.html حتى تعمل خوارزمية التعقّب على جميع صفحات المُدونة.
الخروج للعلن
إذا وصلت لهذا الحد، فأنت مُستعد الآن للكشف عن مدونتك في العلن، ستحتاج -على الخيار- إلى اسم نطاق. إن لم تكن تملك أحدها، قد ترغب في شراء اسم نطاق من أحد مزودي أسماء النطاقات المعتمدين كـ name.com أو hover.com.
بعد اختيار اسم نطاق، ستحتاج إلى مكان لتستضيف فيه المُدونة. بما أن Jekyll تم تطوير من طرف أحد مؤسسي موقع Github، يُمكنك استضافة مُدونة Jekyll مجانا على Github pages. و هو الخيار الذي سنعتمد عليه في درسنا هذا.
قبل نشر مُدونتك على Github pages، ستحتاج إلى إنشاء ملف باسم CNAME. هذا الملف سيُخبر Github باسم النطاق الذي اخترته للمدونة أو اسم النطاق الفرعي على Github الذي تريده كعنوان ويب للمدونة.
بمُجرد إنشاء هذا الملف ووضعه في جذر مجلد العمل، فأنت جاهز الآن لدفع مدونتك لاستضافة Github pages.
دفع الملفات إلى Github
ستحتاج إلى حساب بموقع Github، بعد تسجيلك في الموقع، أنقر على زر + ثم على خيار "New repository".
إذا كانت هذه أول مرة تُنشئ فيها Github page، فإن أبسط طريقة هي أن تسمي مُستودعك (repository) باسم username.github.io حيث username هو اسم المستخدم لحسابك على github. ضع وصفا على الخيار، واترك خيار "public”، لن تحتاج بالضرورة إلى ملف Readme.
سيقوم بعدها Github بعرض بعض الإرشادات حول كيفية دفع مشروعك، لكن قبل ذلك، أقترح أن تذهب أولا إلى مجلد مشروعك وحذف مُجلد .git الذي بداخله لمسح مُخلفات Git التي يمكن أن تكون عالقة هناك بسبب استعمالنا قالب بداية Necolas. يمكنك فعل ذلك مباشرة من الطرفية عبر تنفيذ الأمر التالي في مجلد العمل:
rm -rf ./.git
يمكنك بعدها اتباع إرشادات Github الخاصة بإنشاء مستودع جديد (initialising new Git repository)، إضافة الخادوم البعيد (remote) للدفع إليه، ثم عمل إيداع.
ستحتاج بعدها إلى إضافة جميع ملفات المشروع إلى مستدوع git عبر تنفيذ الأوامر التالية:
git add --all git commit -am "Adding all the files" git push origin master
سيُضيف هذا جميع ملفاتك ويدفعها إلى خادوم Github.
توجيه اسم النطاق إلى مدونتك
بعد إنشاء مستودع Github، سنحتاج إلى توجيه اسم نطاقك إلى مكان استضافة المدونة. ستحتاج إلى إنشاء سِجِل (record) من صنف "A” عند مزود اسم النطاق الخاص بك. Github لديه دليل خاص بهذا لإرشادك حول كيفية ضبط إعدادات DNS.
بعد توجيه اسم النطاق ستحتاج إلى مدة انتظار لا تتجاوز 48 ساعة (غالبا ما تكون ساعة أو ساعتين) لتتم عملية الربط بين استضافتك واسم نطاقك، بعدها سيكون لديك مُدونة على الهواء مُباشرة!
سير عمل مُتواصل
بمُجرد مواصلة عملك على المدونة، يكفي دفع التغيرات التي تجريها إلى Github وستظهر مباشرة على موقع المدونة. سير عمل git قد يحتاج منك بعض الوقت حتى تألفه وتعتاد عليه، لكنه يستحق ذلك.
عند انتهائك من ضبط مدونتك وهيكلتها، إضافة منشور جديد ما هو إلا عبارة عن إضافة ملف جديد في مجلد posts_، إضافة معلومات frontmatter ، كتابة مُحتوىً رائع، ثم إضافة الملف الجديد في git ودفعه إلى Github!
إلى هنا نصل إلى نهاية كامل الدرس، مُبارك عليك مدونة آمنة، ثابنة، سريعة، قليلة الصيانة، فقط ركزّ على المحتوى!
ترجمة -وبتصرف- للمقال Your Own Blog لصاحبه Donovan Hutchinson.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.