devblog
1.0.0
DevBlog عبارة عن قالب مدونة قابل للتخصيص بالكامل ومصمم للمطورين (أو أي شخص آخر) الراغبين في الدخول في مجال التدوين. إنه جاهز للاستخدام والنشر (بسهولة) أو يمكن تعديله وتوسيعه كيفما تشاء. يتم إنشاء المدونة بشكل ثابت تمامًا عبر GatsbyJS، وتأتي مع تمييز بناء الجملة (عبر PrismJS) خارج الصندوق، وتحتوي على عرض مدمج من جانب الخادم، من بين أشياء أخرى.
لمشاهدة العرض التجريبي المباشر، انقر هنا.
config.js الخطوة الأولى هي تثبيت GatsbyJS CLI محليًا. يمكن تحقيق ذلك عن طريق تشغيل الأمر npm install --global gatsby-cli
عند إنشاء موقع Gatsby جديد، تتيح لك واجهة سطر الأوامر (CLI) تحديد بداية، وفي هذه الحالة ما عليك سوى توفير عنوان URL لهذا الريبو. يمكن تحقيق ذلك عن طريق تشغيل الأمر gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog
الآن بعد أن قمت بالإعداد، يمكنك ببساطة استخدام المدونة أو إجراء التعديلات حسب الحاجة. على سبيل المثال، قم بتشغيل gatsby develop لبدء بيئة تطوير معاد تحميلها بشكل سريع ومتوفرة على المضيف المحلي: 8000 أو قم بتشغيل gatsby build لبناء بناء إنتاج محسن. للحصول على قائمة كاملة بأوامر CLI لـ Gatsby، قم بإلقاء نظرة على وثائقها.
وبدلاً من ذلك، إذا كنت ترغب ببساطة في تفرع هذا الريبو أو استنساخه، فأنت ببساطة تحتاج إلى تشغيل npm install ثم gatsby develop بعد ذلك وستكون جاهزًا للعمل.
يمكن إجراء التكوين الأساسي عبر ملف config.js الموجود في جذر مستودع المشروع. من خلال هذا الملف، يمكنك إجراء تعديلات على اللون الأساسي للمدونة، وإضافة مؤلف المدونة ووصفها، والمزيد. الإعدادات الافتراضية هي كما يلي:
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;ملاحظة: أي خيار تكوين يحمل علامة "مطلوب" مطلوب لأغراض العرض التقديمي الأساسية. يمكن إزالة أي شيء لا يحتوي على التعليق "مطلوب" إذا كنت لا تريد استخدامه.
يتم استخدام متغيرات التكوين المشار إليها أعلاه على النحو التالي:
| عامل | وصف الاستخدام |
|---|---|
| عنوان | عنوان المدونة. يتم استخدام هذا لعنوان الصفحة في المقام الأول. |
| مؤلف | مؤلف المدونة. يُستخدم هذا لاسم الرأس وعنوان الصفحة. |
| وصف | وصف المؤلف. يستخدم هذا للرأس الموجود أسفل المؤلف. |
| اللون الأساسي | اللون الأساسي للمدونة. |
| showHeaderImage | ضع علامة لإظهار صورة الرأس أم لا. |
| showShareButtons | ضع علامة لإظهار أزرار المشاركة على وسائل التواصل الاجتماعي في كل منشور بالمدونة أم لا. |
| postPerPage | عدد المشاركات لكل صفحة على الصفحة الرئيسية للمدونة. يستخدم هذا لترقيم الصفحات. |
| اجتماعي | ملفات تعريف الوسائط الاجتماعية لمؤلف المدونة. حاليًا يتم دعم موقع الويب الشخصي وGitHub وTwitter وLinkedIn فقط. |
لتغيير صورة الرأس الافتراضية، ما عليك سوى تجاوز ملف main.jpg الموجود في المجلد /src .
لتغيير الرمز المفضل الافتراضي، ما عليك سوى تجاوز ملف favicon.ico الموجود في المجلد /src .
يمكن العثور على جميع منشورات المدونة في /src/pages ويتم إنشاؤها بشكل ثابت بمجرد تشغيل أمر gatsby build . لإنشاء منشور جديد، ما عليك سوى إنشاء مجلد جديد في /src/pages باسم عنوان URL الذي ترغب في الحصول عليه. على سبيل المثال، إذا كنت ترغب في ظهور عنوان url كـ myblog.com/hello-world فيمكنك إنشاء المجلد كـ hello-world . بمجرد إنشاء المجلد، ما عليك سوى إنشاء ملف index.md بداخله.
يجب أن يحتوي الجزء العلوي من الصفحات على نفس العلامة التي تخبر غاتسبي بالمعلومات المطلوبة حول المنشور المحدد. القالب الأساسي هو:
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end --> في مقتطف الكود أعلاه، كل ما هو مطلوب هو العنوان والتاريخ . الصورة المميزة اختيارية ويمكن إضافتها ببساطة عن طريق إضافة صورة إلى مجلد الصفحة الذي أنشأته للتو والإشارة إليها مثل المثال أعلاه. يعد جزء المقتطف اختياريًا أيضًا، وإذا لم تستخدم العلامة <!-- end --> ، فسيتم استخدام الجزء الأول من المنشور كمقتطف تلقائيًا.
يأتي هذا القالب مع 3 أمثلة لمنشورات المدونة التي تحتوي على كل شيء بدءًا من استخدام مقتطف التعليمات البرمجية وإدراج الصور واستخدام الصور والمقتطفات المميزة والمزيد.
بمجرد أن تصبح مستعدًا لنشر المدونة ونشرها على الهواء مباشرة، فلديك خياران متاحان لك.
يتطلب نشر المدونة يدويًا تشغيل gatsby build لإنشاء إصدار إنتاجي. بعد ذلك، يمكنك استخدام أي خادم تستخدم عادةً تطبيق React عليه، مثل Digital Ocean droplet أو مثيل AWS. كل ما هو مطلوب هو طريقة ما لخدمة الملفات الثابتة.
إذا لم تكن معتادًا على نشر تطبيقات React، فهناك عدد من الخيارات الأخرى.
للنشر على صفحات GitHub، عليك أولاً تعيين بادئة المسار في gatsby-config.js . الافتراضي هو pathPrefix: '/devblog' ولكن يجب تغيير هذا إلى اسم الريبو الذي اخترته. على سبيل المثال، إذا كانت لديك مدونة موجودة في https://github.com/YOURUSERNAME/myblog وتريد نشرها على https://YOURUSERNAME.github.io/myblog ، فيمكنك تعيين بادئة المسار إلى pathPrefix: '/myblog' .
بعد ذلك، ما عليك سوى تشغيل npm run deploy وسيتم نشر مدونتك.
وبدلاً من ذلك، إذا كنت ترغب في نشره على https://YOURUSERNAME.github.io (أي موقع المستخدم/المؤسسة الخاص بك وليس موقع المشروع)، فسيلزم إجراء بعض التغييرات الإضافية. لقد تم توضيحها بشكل جيد هنا في وثائق غاتسبي الرسمية.
إحدى أسهل الطرق لنشر المدونة هي استخدام Netlify. للنشر في Netlify، ما عليك سوى النقر فوق الزر أدناه واتباع المطالبات.
الخيارات الموضحة أعلاه ليست الخيارات الوحيدة المتاحة لك لنشر المدونة. تتناول وثائق Gatsby الرسمية التفاصيل حول عدد من الخيارات الأخرى. لقراءة المزيد حول خيارات النشر، انقر هنا.
مرخص بموجب ترخيص MIT. راجع LICENSE.md للمزيد.
