كيفية إنشاء مدونة ثابتة باستخدام الصبار [OS X]

تحديث: تم إيقاف تطبيق Cactus.

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

الصبار هو حر مولد موقع ثابت مجهزة بأدوات قوية يمكن أن تساعدك بناء المواقع محليا, أسرع وأسهل مع تقنيات الويب الحديثة. يمنحك نقطة الانطلاق في المشروع الخاص بك مع 4 قوالب مصممة مسبقًا حتى تتمكن من البدء.

أثناء العمل على المشروع الخاص بك ، سوف الصبار راقب كل تغيير تقوم به على مشروعك و تحديث المتصفح تلقائيا حتى تتمكن من رؤية التغييرات على الفور ، على جهاز Mac أو جهازك المحمول. كما أنه يدعم SASS / SCSS و Coffescript خارج الصندوق ، بحيث يتم أيضًا إنشاء كل تغيير في هذا الملف تلقائيًا.

البدء

بادئ ذي بدء ، تحتاج إلى تنزيل Cactus من صفحتها الرئيسية ، ثم قم بتشغيل التثبيت. بمجرد الانتهاء من فتحه ، سترى أربعة أزرار: الزر "إنشاء" و "النشر" و "التحرير" و "Preview".

لإنشاء مشروع جديد ، انقر فوق خلق. سترى 4 قوالب متوفرة هناك. في هذا البرنامج التعليمي ، نذهب مع قالب المدونة. انقر خلق.

سيُطلب منك ذكر اسم مشروعك واختيار الموقع الذي يوجد فيه المشروع. أنا هنا اسم “مدونتي رهيبة” للمشروع. بعد ذلك ، سترى مشروعك بالفعل في Cactus.

تعديل الملفات

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

لإبقاء الأشياء مختصرة ، إليك ما يختص به كل دليل:

• قوالب: يحتوي على ملفات HTML التي تتصرف كقالب ، والتي تستخدمها ملفات HTML على الصفحات للبناء عليها.
• صفحات: يحتوي على جميع ملفات HTML التي ستصبح صفحة بنفس المسار. على سبيل المثال: hello.html هنا سيصبح http://yoursite.com/hello.html
• ثابتة: يحتوي على جميع الموارد الثابتة مثل CSS و Javascript والصور.

الآن ، سنقوم بتحرير ثلاثة ملفات رئيسية من الأدلة: base.html و post.html في دليل القوالب و index.html و في دليل الصفحات.

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

لنرى كيف تعمل ، أولا فتح base.html في دليل القالب.

             ٪ block content٪ المحتوى الرئيسي ٪ endblock content٪ ---   

base.html هو ملف html البسيط الذي نستخدمه كقالب "هيكلي". أنه يحتوي على عناصر مشتركة من موقعنا. تستطيع أن ترى بعض “كتل” هناك؛ سنستخدم القالب الفرعي لتجاوز هذه الكتل.

الآن فتح post.html تقع في نفس الدليل مع base.html.

 ٪ يمتد "base.html"٪ ٪ block title٪ title | الصبار ٪ endblock title٪ ٪ block content٪ --- 
 
 عنوان 
 
headline 
 
 
 ٪ block body٪ هذا هو المكان الذي توجد فيه محتويات المنشور. ٪ endblock body٪ 
 --- ٪ endblock content٪ 

ال post.html يحتوي على الترميز لصفحة إدخال المدونة الخاصة بنا. في السطر الأول يمكنك أن ترى ذلك post.html يمتد base.html. هذا يعني أننا سنتجاوز الكتل base.html مع الكتل هنا.

يمكننا أيضًا العثور على المتغيرات هنا ، مثل عنوان و headline. سنحدد قيم هذه المتغيرات في مدخلات المدونة بعد ذلك.

الآن ، دعونا ننظر إلى ٪ block body٪ منع. سيتم تجاوز هذا بواسطة القالب الفرعي الذي يحتوي على إدخالات النشر في مدونتنا.

اذهب إلى الدليل الصفحات / وظائف. فيما يلي بقية إدخالات المشاركة.

 العنوان: عنوان إدخالاتي في المنشور: مؤلف عنوان بريدي في النشر: تاريخ Agus: 15/01/2015 ٪ extends "post.html"٪ ٪ block body٪ ٪ filter markdown٪ Lorem ipsum dolor sit amet، consectetur adipisicing إيليت. Earum، perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe، افتراضات، amet illo deleniti officiis، voluptatem maxime atque vero sunt. --- ٪ endfilter٪ ٪ endblock body٪ 

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

الآن سوف نذهب إلى صفحة فهرس مدونتنا ، مفتوحة index.html و في ال صفحات دليل. يحتوي على قائمة إدخالات المدونة الخاصة بنا والرابط الخاص بكل إدخال. يبدو الرمز الرئيسي كما يلي:

 ٪ يمتد "base.html"٪ ٪ block content٪ -- 
 ٪ للنشر في المشاركات٪ 
  post.title 
post.headline 
 ٪ endfor٪ 
 -- ٪ endblock content٪ 

عند هذه النقطة لدينا مدونة بسيطة مع صفحتين رئيسيتين ، و صفحة فهرس يحتوي على مداخل بلوق ، و صفحة دخول بلوق بحد ذاتها.

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

تصميم المدونة باستخدام SCSS

ميزة كبيرة من الصبار هو أنه يعمل مع SASS / SCSS خارج منطقة الجزاء. مجرد إسقاط ملفات .sass أو .scss داخل ال ثابتة الدليل وفي كل مرة تقوم فيها بتحرير وحفظ الملفات ، سيقوم Cactus تلقائيًا بإنشاء CSS.

هنا سأقدم مثالاً باستخدام bootstrap-sass لتصميم مدونتنا. على افتراض أنك تستخدم كوخ في الهواء الطلق ، ومحطة مفتوحة ، وانتقل إلى ثابتة دليل مشروعنا باستخدام القرص المضغوط أمر. ثم قم بتثبيت bootstrap-sass باستخدام هذا الأمر:

$ كاشفة تثبيت bootstrap- ساس الرسمية

بمجرد اكتمال التنزيل ، سترى bower_components دليل داخل الدليل الثابت الذي يحتوي التمهيد-ساس الرسمي.

اذهب الآن إلى هذا الدليل: ثابت / المغلق. قم بإنشاء ملف scss ، وقم بتسميته بالاسم سيل-bs.scss وأدخل هذا الرمز.

 import "... / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"؛ 

ما يفعله الكود هو استيراد كل شيء من bootstrap-sass. بمجرد قيامك بحفظ style-bs.scss ، سترى style-bs.css تم إنشاؤه على نفس الدليل الذي يحتوي على جميع الأنماط من bootstrap.

نشر المشروع الخاص بك

أخيرًا ، عندما يكون مشروعك جاهزًا ، يمكنك نشر مشروعك على الإصدار المباشر بسهولة باستخدام Amazon S3.