moonwalk

الممر القمر - سمة مدونة سريعة وأبسط مع وضع مظلم نظيف

جرب العرض التوضيحي

سمات

• الوضع الخفيف والظلام مع تبديل السمة
• القائمة الرأسية ، القائمة الأفقية ، قائمة البطاقات
• الصفحة المقصودة مع Navbar ، تذييل ، محفظة
• سريع (الحد الأدنى من CSS) - 100/100 على الأداء ، إمكانية الوصول ، أفضل الممارسات وكبار المسئولين الاقتصاديين ، يرجى الاطلاع على تقرير Lighthouse لمزيد من التفاصيل
• استجابة وصديقة للهاتف المحمول
• تحسين محركات البحث (SEO) (يستخدم علامة SEO SOOPR JEKYLL)
• تغذية RSS (يستخدم خلاصة jekyll)
• من السهل تمديده
• متوافق تمامًا مع صفحات GitHub (انظر تثبيت صفحات Github)
• صور مشاركة تلقائيًا لوسائل التواصل الاجتماعي (باستخدام SOOPR)
• شارك ومثل الأزرار (باستخدام soopr)

منارة

تثبيت سريع

1. شوكة هذا المستودع.
2. cd moonwalk
3. bin/bootstrap
4. [اختياري] قم بالتسجيل على SOOPR ، وأضف publish_token في ملف _config.yml .

إذا كنت تقوم بتثبيت الممر القمر على Windows ، فيرجى ملاحظة أنه قد تضطر إلى استخدام Ruby 3.0.x بدلاً من Ruby 3.1.x - يمكنك رؤية تعليمات التثبيت الخاصة بـ Windows هنا

بدء الخادم

bin/start - سيبدأ خادم التطوير في http://127.0.0.1:4000

النشر

يمكن نشر Moonwalk بسهولة على جميع مقدمي الخدمات السحابية (AWS وما إلى ذلك) ، وعلى خدمات استضافة موقع الويب الثابت مثل NetLify & Vercel. يمكنك أيضًا استخدام هذا الزر للقيام بنقرة واحدة نشر

إذا كنت ترغب في استخدام Moonwalk كجوهرة أو استخدام صفحات github ، فيرجى الاطلاع على هذه الصفحة

تخصيص

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

لمزيد من التخصيص (EG Layout ، CSS) ، انظر وثائق Jekyll الرسمية حول تخصيص الموضوعات القائمة على الأحجار الكريمة.

تخصيص القائمة

من أجل إضافة/تحرير/حذف الإدخالات في الصفحة الرئيسية ، يمكنك نسخ ملف home.yml داخل مجلد _data . من خلال هذا الملف ، يمكنك تحديد بنية القائمة وإضافة بيانات لـ Navbar أو Fools أو Portfolio أو ببساطة إزالة كل ذلك واستخدم تصميم المدونة البسيط. ألقِ نظرة على التكوين الافتراضي للحصول على فكرة عن كيفية عمله وقراءة شرح أكثر شمولاً.

يقبل ملف home.yml الحقول التالية:

1. القائمة الرأسية

• تحدد entries قائمة جديدة غير مرتبة تحتوي على إدخالات قائمة
• يتميز كل إدخال بـ A - في بداية السطر
• كل إدخال له السمات التالية:
  • title ، الذي يحدد النص لتقديمه لإدخال القائمة هذا
  • url ، والذي يمكن أن يكون عنوان URL أو false . إذا كان false ، فسيتم تقديم الإدخال كنص عادي ؛ وإلا فإن الإدخال سيتم تقديمه كرابط يشير إلى عنوان URL المحدد. لاحظ أن عنوان URL يمكن أن يكون نسبيًا أو مطلقًا.
  • post_list ، والتي يمكن أن تكون true أو false . إذا كان هذا صحيحًا ، فسيحتوي الإدخال على جميع المنشورات في الموقع باعتبارها فرعيًا. يستخدم هذا لتقديم قائمة المنشور الخاصة بك.
  • entries ، نعم ، يمكنك الحصول على إدخالات داخل الإدخالات. وبهذه الطريقة يمكنك إنشاء قائمين على الفرع المتداخلة!

2. قائمة البطاقات - يتم استخدام البطاقات لعرض مشاريع محفظة. يرجى الاطلاع على project_entries في ملف _data/home.yml

• يتميز كل إدخال بـ A - في بداية السطر
• كل إدخال له السمات التالية:
  • يحدد title رأس البطاقة
  • desc هو جسم البطاقة
  • url هو رابط نسبي أو مطلق يمكن أن تشير إليه هذه البطاقة.
  • highlight في حال كنت ترغب في تسليط الضوء على شيء ما ، احتفظ بالنص قصيرًا رغم ذلك

3. القائمة الأفقية - يستخدم Moonwalk قوائم أفقية لإنشاء Navbar و Fooler. footer_entries navbar_entries data/home.yml

• يتميز كل إدخال بـ A - في بداية السطر
• كل إدخال له السمات التالية:
  • يحدد title رأس البطاقة
  • url هو رابط نسبي أو مطلق يمكن أن تشير إليه هذه البطاقة.

نصائح للمحترفين

1. يحتوي Moonwalk على 3 تخطيطات مدمجة:

• post - للمحتوى
• المدونة - لإدراج منشورات المدونة
• الصفحة الرئيسية - بالنسبة للصفحة المقصودة ، يمكنك تغيير ملف index.md الخاص بك لاستخدام تخطيط المنزل أو المدونة.

2. من السهل للغاية تعديل نظام الألوان.

• لوضع الضوء ، تخصيص متغيرات CSS هذه

 html {
    --bg : # fff ;
    --bg-secondary : # f3f4f6 ;
    --headings : # 1e293b ;
    --text : # 374151 ;
    --text-secondary : # 6b7280 ;
    --links : # 6366f1 ;
    --highlight : # ffecb2 ; // light yellow
    --code-text : # 9d174d ;
}

• لتخصيص الوضع المظلم هذه متغيرات CSS

 @mixin dark-appearance {
  html , body  {
      --headings : # 74c0fc ;
      --links : # 91a7ff ;
      --highlight : # 41c7c7 ;
      --bg : # 1f242a ;
      --bg-secondary : # 323945 ;
      --text : # adb5bd ;
      --text-secondary : # 9ca3af ;
      --code-text : # 91a7ff ;
  };
}

3. قم بالتسجيل مجانًا على SOOPR وأضف publish_token في ملف _config.yml - مع هذا ، تحصل كل صفحة على عنوان URL قصير ، مثل الزر ولأنه مشاركة تلقائيًا للوسائط الاجتماعية.

المساهمة

يتم الترحيب بتقارير الأخطاء وطلبات السحب على Github على https://github.com/abhinavs/moonwalk.

تطوير

لإعداد بيئتك لتطوير هذا الموضوع ، قم بتشغيل bundle install .

موضوعك هو الإعداد تمامًا مثل موقع jekyll العادي! لاختبار موضوعك ، قم بتشغيل bundle exec jekyll serve وافتح متصفحك على http://localhost:4000 . هذا يبدأ خادم Jekyll باستخدام السمة الخاصة بك. أضف صفحات ومستندات وبيانات ، إلخ. مثل Normal لاختبار محتويات السمة الخاصة بك. أثناء قيامك بإجراء تعديلات على موضوعك وإلى المحتوى الخاص بك ، سيتم تجديد موقعك ويجب أن ترى التغييرات في المتصفح بعد التحديث ، تمامًا مثل المعتاد.

عند إصدار السمة الخاصة بك ، سيتم تجميع الملفات فقط في _layouts ، _includes ، _sass assets التي يتم تتبعها باستخدام Git. لإضافة دليل مخصص إلى موضوع الموضوع الخاص بك ، يرجى تحرير regexp في moonwalk.gemspec وفقًا لذلك.

شكر وتقدير

قاعدة هذا الموضوع الأصلي ليس أسلوبًا من فضلك! الموضوع الذي أنشأه Riccardo Graziosi - شكرًا جزيلاً له على إنشاء موضوع رائع مع عدم وجود CSS تقريبًا.

رخصة

يتوفر الموضوع كمصدر مفتوح بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.

مشاريع أخرى

إذا كنت تحب الممر القمر ، تحقق من مشاريعي الأخرى

• ملف تعريف الارتباط - موقع مجاني للهبوط باستخدام Jekyll و Tailwind CSS
• Scoop - مشروع Sinatra Boilerplate باستخدام القرنية ، ActivereCord ، Capistrano ، Puma & Nginx
• SOOPR - أداة تدعمك في تسويق المحتوى
• Apicagent - واجهة برمجة تطبيقات مجانية تستخرج تفاصيل الجهاز من سلسلة وكيل المستخدم
• PINCODR - API مجاني لأودينات الهندية
• هوميس - إنشاء أدلة عامة وخاصة "العمل معك"
• blockr - أداة CLI لمساعدتك في منع ويبز بسهولة مواقع الويب
• Microryquests - مكتبة Python لمساعدتك في استهلاك الخدمات الدقيقة بكفاءة

⚡ يمكنك قراءة المزيد عني على مدونتي أو متابعتي على Twitter - abhinav

⚡ إذا كنت تحب عملي ، يمكنك شراء قهوة لي