handmade blog

✍️

مدونة اليدوية

اقرأ هذه الوثيقة بلغة أخرى: ؟؟ ؟؟ ؟؟ ؟؟ ؟؟ ؟؟ ؟؟

تعد "المدونة اليدوية" منشئ مدونة ثابتًا وخفيف الوزن للأشخاص الذين يرغبون في بدء مدونة بسرعة. وهو يدعم مستند نوع المقالة لمنشور مدونة، ومستند نوع العمل للمحفظة، وإبرازات التعليمات البرمجية، وبناء جملة KaTeX، والحواشي السفلية، والمزيد.

التجريبي: هنا

عرض

• betty-grof.github.io: https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io: https://github.com/parksb/parksb.github.io

نتائج المنارة

المادة/0.html على الهاتف المحمول

المادة/0.html على سطح المكتب

ابدء

1. انقر فوق الزر "استخدام هذا القالب" أعلى قائمة الملفات لإنشاء مستودع جديد. إذا كنت تريد استخدام نطاق github.io، فيجب عليك تسمية المستودع {YOUR_ID}.github.io . (على سبيل المثال، betty-grof.github.io ) لا تنس تمكين خيار "تضمين جميع الفروع".

   

   

2. انقر فوق علامة التبويب "الإعدادات" في المستودع الخاص بك، وقم بتعيين الفرع المصدر لصفحات GitHub على فرع gh-pages . ستستضيف صفحات GitHub موقع الويب الخاص بك بناءً على فرع gh-pages . ستتمكن من الوصول إلى موقع الويب عبر https://{YOUR_ID}.github.io/ خلال بضع دقائق.

   

   

3. قم باستنساخ المستودع وتثبيت حزم العقدة.

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. قم بتخصيص بعض النصوص مثل عنوان التنقل (في app/templates/navigations.ejs )، وقم بتشغيل npm run build .

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. قم بتشغيل البرنامج النصي npm start لبدء الاستماع إلى خادم محلي على http://localhost:8080/ . يعتمد الخادم المحلي على دليل dist .

   $ npm run build
   $ npm start

   

6. قم بتنفيذ التغييرات في دليل العمل الخاص بك ودفعها إلى المستودع البعيد.

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. قم بتشغيل البرنامج النصي deploy إذا كنت مستعدًا لاستضافة موقع الويب. يقوم هذا البرنامج النصي بإنشاء ملفات محلية إلى دليل dist ويدفعها إلى فرع gh-pages الذي يحتوي فقط على الملفات الموجودة في دليل dist . ستستضيف صفحات GitHub موقع الويب الخاص بك على https://{YOUR_ID}.github.io/ استنادًا إلى فرع gh-pages تلقائيًا.

   $ npm run deploy

الاستخدام

إعادة التحميل المباشر

1. قم بتشغيل npm run watch لتتبع التغييرات في الوقت الفعلي.
2. قم بتشغيل npm start لبدء تشغيل الخادم المحلي. (يجب أن تظل npm run watch قيد التشغيل في الخلفية أو في علامة تبويب أخرى أو في جلسة أخرى.)
3. الآن، تم إنشاؤه تلقائيًا عندما تقوم بإجراء تغييرات على أي ملفات في مجلدات app/templates و app/styles و_ _articles .

كتابة ونشر الوثيقة

1. اكتب مستندًا في دليل _articles أو _works .
2. تشغيل npm run publish article أو npm run publish work لتحويل مستندات تخفيض السعر إلى HTML.
3. قم بمعاينة المستند المحول على الخادم المحلي باستخدام البرنامج النصي npm start .
4. قم بتنفيذ التغييرات ودفعها إلى المستودع، ثم قم بتشغيل npm run deploy للنشر.

قالب التحرير

قم بتعديل قالب ejs لتغيير محتويات الصفحة الموجودة. على سبيل المثال، إذا كنت تريد وضع صورة على الصفحة المقصودة، فافتح الملف app/templates/index.ejs ، وأضف علامة img إلى عنصر main-container .

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

بعد ذلك، قم بتشغيل npm run build script لنشر الصفحة المقصودة المعدلة ومعاينة التغييرات على الخادم المحلي باستخدام البرنامج النصي npm start .

$ npm run build
$ npm start

إذا كنت جاهزًا للنشر، فقم بتشغيل البرنامج npm run deploy . لا يمكنك تغيير الصفحة المقصودة فحسب، بل يمكنك أيضًا تغيير أي صفحات بهذه الطريقة. (قد تحتاج إلى فهم هيكل المشروع.)

إضافة مجال مخصص

قم بإنشاء ملف CNAME في الدليل الجذر. ستلتقط عملية الإنشاء تلقائيًا ملف CNAME لك ويمكنك خدمة مدونتك من نطاقك المخصص.

لمعرفة المزيد حول كيفية إدارة Github لملفات CNAME، راجع المستندات

هيكل المشروع

• _articles - ملفات تخفيض السعر لمشاركات المدونة.
• _works - ملفات تخفيض السعر للمحفظة.
• app
  • assets - أي ملفات سيتم استيرادها بواسطة ملفات HTML مثل الصورة والخط وما إلى ذلك.
  • public - ملفات HTML التي تم إنشاؤها بواسطة publish البرنامج النصي. يعتمد دليل server dist على هذا الدليل. لا تقم بتغيير الملفات الموجودة ضمن هذا الدليل مباشرة.
    • article - ملفات HTML المحولة من دليل _articles .
    • work - ملفات HTML المحولة من دليل _works .
  • styles - سيتم استيراد كود مصدر CSS بواسطة ملفات HTML.
  • static - أي ملفات ثابتة لم يتم تجميعها بواسطة برنامج نصي build مثل ملفات robots.txt أو sitemap.xml أو SEO. build بنسخ جميع الملفات الموجودة ضمن هذا الدليل إلى دليل dist .
  • templates - ملفات قوالب EJS. يقوم publish البرنامج النصي بتحويل القوالب الموجودة ضمن هذا الدليل إلى ملفات HTML.
• dist - الملفات التي تم تجميعها بواسطة البرنامج النصي build . يفتح البرنامج النصي start الخادم المحلي بناءً على هذا الدليل، deploy البرنامج النصي بنشر موقع ويب على صفحات GitHub بناءً على هذا الدليل. لا تقم بتغيير الملفات الموجودة ضمن هذا الدليل مباشرة.
• services - تنفيذ التعليمات البرمجية المصدرية publish النصي.
  • classes
  • models
• tools - كود المصدر الذي ينفذ العديد من البرامج النصية npm.

البرامج النصية المتاحة

npm start

يبدأ الاستماع لخادم التطوير المحلي على http://localhost:8080/.

npm run publish

تحويل القوالب إلى ملفات HTML.

$ npm run publish article

تحويل كافة المقالات.

$ npm run publish works

تحويل جميع الأعمال.

$ npm run publish article 5

تحويل المقالة التي معرف هو 5.

$ npm run publish work 3

يحول العمل الذي هو معرف 3.

$ npm run publish page

تحويل كافة الصفحات.

npm run watch

يعيد إنشاء ملفات القالب في دليل templates وملفات CSS في دليل styles وملفات تخفيض السعر في دليل _articles تلقائيًا كلما تم تعديل الملفات.

npm run build

يبني الملفات مع مجمع الطرود.

npm run deploy

يبني وينشر الملفات.

رخصة

هذا المشروع مرخص بموجب ترخيص MIT - راجع ملف الترخيص للحصول على التفاصيل.