تنزيل static timeline generator - تنزيل رمز مصدر static timeline generator

static timeline generator

فئات أخرى

1.0.0

تنزيل

مولد الجدول الزمني ثابت

يمكنك بسهولة إنشاء صفحة ويب ثابتة للخط الزمني مثل الجدول الزمني لويكيميديا الخاص بي. تحقق من معاينة نموذج الموقع هذا، الذي تم نشره باستخدام صفحات GitHub: https://molly.github.io/static-timeline-generator/.

محتويات

ثَبَّتَ
تخصيص
- المحتوى الأساسي
- ميتا
تخصيص إضافي
نشر
- صفحات جيثب
- خدمات أخرى
الاستجابة
توافق المتصفح
تحت غطاء محرك السيارة

لقطة شاشة لصفحة مخطط زمني تحتوي على محتوى وهمي

ثَبَّتَ

انسخ هذا المستودع، ثم قم بتشغيل npm install من الدليل.

ستقوم npm run-script serve ببناء المشروع وخدمة الملفات الثابتة محليًا على http://localhost:8080. يقوم npm run-script build بتشغيل خطوة الإنشاء دون بدء تشغيل خادم التطوير.

تخصيص

كل المحتوى الذي تحتاج إلى تغييره تقريبًا موجود في src/_data/content.js .

المحتوى الأساسي

header (HTML، اختياري): المحتوى الذي سيتم عرضه في الرأس أعلى الصفحة.
footer (HTML، اختياري): المحتوى الذي سيتم عرضه في التذييل في أسفل الصفحة.
entries (مصفوفة الكائنات، مطلوبة ): قائمة الإدخالات التي سيتم عرضها على المخطط الزمني، بالترتيب الذي ينبغي عرضها به.
- id (سلسلة، مطلوب ): معرف فريد لإدخال المخطط الزمني هذا.
- categories (مصفوفة من السلاسل، اختيارية): قائمة الفئات التي تنطبق على هذا الإدخال. ستظهر هذه على شكل مربعات اختيار في أعلى الصفحة، وتسمح للقراء بتصفية المخطط الزمني. ولا يجوز أن تحتوي على فواصل. يمكن أن تكون واصلة أو مفصولة بمسافة (سيتم عرض sample category أو sample-category على الصفحة Sample category ). سيتم دائمًا عرض الإدخالات التي لا تحتوي على أي فئات.
- color (سلسلة، اختياري): لون الدائرة التي يتم عرضها على الخط الزمني. الخيارات المحددة بالفعل هي green red grey . يمكنك تحديد ألوان إضافية في css/custom.css (انظر أدناه).
- faicon (سلسلة، اختيارية): اسم أيقونة Font Awesome المراد استخدامها في الدائرة على الخط الزمني. استكشف الخيارات. هذا مجرد اسم الرمز (بدون البادئة fa- ). على سبيل المثال: anchor .
- datetime (يجب أن تكون السلسلة، إما datetime أو date موجودة): محدد التاريخ والوقت للعنصر. يمكن أن يكون هذا بأي تنسيق يتعرف عليه moment.js . أفعل عادةً "YYYY-MM-DD HH-SS". إذا لم يكن هناك وقت، فقط تاريخ، استخدم معلمة date بدلاً من datetime .
- date (يجب أن تكون السلسلة أو datetime أو date موجودة): محدد التاريخ للعنصر. "YYYY-MM-DD".
- title (HTML، مطلوب ): عنوان إدخال المخطط الزمني.
- image (اختياري): صورة لعرضها في الإدخال
  - src (سلسلة، مطلوبة): عنوان URL مباشر لملف الصورة المراد تضمينه في الصفحة، أو رابط نسبي لصورة في هذا الدليل (على سبيل المثال img/filename.png ).
  - link (سلسلة، اختياري): رابط تشعبي للصفحة التي تحتوي على الصورة، إذا كنت تريد أن يتمكن الأشخاص من النقر عليها لرؤية نسخة أكبر، وما إلى ذلك.
  - alt (سلسلة، اختياري): نص بديل يصف الصورة.
  - caption (HTML، اختياري): تسمية توضيحية تصف الصورة.
- body (HTML، مطلوب ): نص إدخال المخطط الزمني. إذا كنت تريد فقرات متعددة، فيجب عليك تضمين علامات <p> بنفسك؛ وإلا سيتم إضافته.
- links (مصفوفة من الكائنات، اختيارية): مجموعة من الروابط التي سيتم عرضها في أسفل الإدخال.
  - href (سلسلة، مطلوبة ): هدف الارتباط.
  - linkText (HTML، مطلوب ): نص الرابط.
  - extra (HTML، اختياري): HTML إضافي لعرضه في نهاية الرابط.

ميتا

pageTitle (سلسلة، مطلوبة ): النص الذي سيتم وضعه في علامة <title> ، لتعيين عنوان الصفحة في المتصفح.
pageDescription (سلسلة، اختيارية): وصف الصفحة للانتقال إلى العلامات الوصفية.
pageAuthor (سلسلة، optinal): مؤلف الصفحة للذهاب إلى العلامات الوصفية.

تخصيص إضافي

إذا كنت ترغب في إضافة المزيد من خيارات الألوان للدوائر في المخطط الزمني، فيمكنك تحرير ملف src/css/custom.css لإضافة خياراتك الخاصة. يمكنك استخدام هذه الأداة لاختيار الألوان والحصول على رموز الألوان السداسية الخاصة بها. ويتم تعريفها على النحو التالي:

. timeline-icon . yourcolorhere {
  background-color : # hexcol or code;
}

يمكنك بعد ذلك استخدام color: yourcolorhere في ملف content.js.

استبدل الصور الموجودة في المجلد src/img لتخصيص أيقونة الصفحة المفضلة وصورة OpenGraph.

نشر

بمجرد تشغيل npm run-script buld ، سترى دليل _site يحتوي على ملفات HTML/CSS/JS ثابتة مع محتوى موقعك. يمكنك الآن استخدام أي استضافة موقع ثابت لنشر هذه الملفات!

صفحات جيثب

لنشر موقعك الثابت على صفحات GitHub (مجانًا)، قم بإنشاء فرع يحتوي على الملفات الثابتة في الدليل الجذر عن طريق تشغيل git subtree push --prefix _site origin gh-pages . بعد ذلك، يمكنك الانتقال إلى إعدادات مستودعك > خيارات الصفحات واختيار "النشر من فرع"، ثم تحديد gh-pages كالفرع.

إعدادات تكوين صفحات جيثب. ضمن "الإنشاء والنشر"، يتم تعيين المصدر على "النشر من فرع"، ويتم تعيين الفرع على "صفحات gh"، ويتم تعيين المجلد على "/ (الجذر)".

خدمات أخرى

هناك بعض البرامج التعليمية الجيدة المتاحة لنشر موقع ثابت على العديد من الخدمات المجانية الأخرى. يتم سرد عدد قليل أدناه.

يمكنك أيضًا البحث عن برامج تعليمية حول كيفية نشر موقع تم إنشاؤه باستخدام أحد عشر موقعًا، نظرًا لأن هذا هو ما يدعم هذا المشروع. تدعم بعض خدمات استضافة الويب مثل Vercel على وجه التحديد إحدى عشرة خدمة بطريقة مفيدة حقًا.