krashna site

موقع كراشنا ميوزيكا

منشئ موقع ثابت لموقع جمعية الموسيقى الطلابية في دلفت، Krashna Musika، الذي تم إنشاؤه باستخدام React وGatsby.js.

تثبيت

للبدء، ستحتاج إلى بيئة Node.js ومدير حزم Yarn. بمجرد تثبيتها، قم بتشغيل الأوامر التالية من الدليل الجذر لهذا الريبو:

yarn
yarn global add gatsby-cli

جري

تطوير

لبدء خادم تطوير (مع إعادة التحميل المباشر)، قم بتشغيل:

yarn develop

سيكون هناك الآن خادم يستمع على المضيف المحلي:8000!

إنتاج

لإنشاء حزمة إنتاج، قم بتشغيل:

yarn build

يتم نشر التغييرات التي يتم إجراؤها على الفرع master تلقائيًا على الموقع المباشر (على krashna.nl)، من خلال خدمة إنشاء Netlify.

التوثيق

الهيكل العام

بشكل عام، يتبع هذا المشروع بنية المجلد Gatsby.js الشائعة:

• يتم تعريف الصفحات في /src/pages . يتم استخدام اسم الملف لكل ملف JS (باستثناء ملحق .js ) كعنوان URL للصفحة المقابلة.
• توجد قوالب الصفحة (الهياكل النموذجية لكيفية ظهور الأنواع المختلفة من الصفحات) في /src/templates .
• المكونات التي تستخدمها هذه الصفحات والقوالب موجودة في المجلد /src/components .

ومع ذلك، هناك بعض الطرق التي تختلف بها، لتقديم التدويل وميزات أخرى:

• جميع الترجمات موجودة في ملفات YAML الخاصة بالمجلد /src/locales . يحتوي كل مجلد فرعي على نسخة من كل ملف تعريف ترجمة، بلغة معينة. يتم تجميع ملفات الترجمة هذه إلى JSON، والتي يتم تقديمها جنبًا إلى جنب مع بقية المحتوى وإدراجها ديناميكيًا في الصفحة في وقت التشغيل. نحن نستخدم مكتبة react-intl ، التي تم دمجها بواسطة gatsby-plugin-intl ، للترجمة.
• جميع البيانات التي يعتمد عليها إنشاء الصفحة، مثل قائمة الحفلات الموسيقية، موجودة في /src/data .

إضافة المحتوى

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

إضافة صفحة

لإضافة صفحة...

1. أضف ملف JS في /src/pages باسم عنوان URL الذي تريد وضع تلك الصفحة عليه. عندما تكون في شك حول كيفية تنظيم هذا الملف، قم بإلقاء نظرة على الصفحات الأخرى الموجودة في هذا المجلد.
2. أضف الترجمات المطلوبة لأي مفاتيح ترجمة تستخدمها، في /src/locales . ارجع إلى الصفحات والترجمات الموجودة للحصول على أمثلة حول كيفية الوصول إلى مفتاح الترجمة هذا في ملف الصفحة وكيف يمكن تحديد ذلك في ملف الترجمة.

إضافة حفلة موسيقية

لإضافة حفلة...

1. أضف إدخالاً إلى القائمة /src/data/concerts.yaml باتباع نفس تنسيق الإدخالات الأخرى.
2. أضف نصوصًا تعتمد على اللغة إلى ملفات concerts.yaml yaml في المجلد /src/locales ، باللغتين.

إضافة منشور أخبار

لإضافة مشاركة إخبارية...

1. أضف إدخالاً إلى القائمة /src/data/news.yaml باتباع نفس تنسيق الإدخالات الأخرى.
2. أضف نصوصًا تعتمد على اللغة إلى ملفات news.yaml في المجلد /src/locales ، باللغتين.