تحميل codefolio - تحميل codefolio كود المصدر

codefolio

فئات أخرى

1.0.0

تنزيل

كودفوليو

العرض المباشر | النشر | حول | المميزات | مساهمة

تطبيق ويب جاهز للنشر لعرض محفظة الترميز الخاصة بك.

عن

Codefolio هو تطبيق ويب لمحفظة Jamstack للمبرمجين. تم تصميمه باستخدام Nuxt.js ويستفيد من وحدة @nuxt/content لاستخدام بيانات المستخدم الموضوعة في دليل /content وإنشاء أصول ثابتة جاهزة للإنتاج.

سمات

تتم كتابة الكود بالكامل مع مراعاة الوحدات النمطية وإمكانية إعادة الاستخدام.

الميزة الأساسية لهذا التطبيق هي أنه يدعم النشر الثابت. لا تتطلب محافظ الترميز إجراء العديد من التغييرات، لذا يعد الموقع الثابت خيارًا أفضل من SPA العادي أو تطبيق Full-Stack.

واجهة المستخدم

تم تصميم واجهة مستخدم Codefolio مع مراعاة سهولة الاستخدام. إنه سريع الاستجابة تمامًا ويستخدم نهج الهاتف المحمول أولاً.

يعتمد التصميم على نمط 7-1 Sass ويستفيد من Bootstrap 5 الذي تم تحميله جزئيًا للتخطيط والأدوات المساعدة.

يحتوي دليل الأصول/aprite/svg على ملفات أيقونات svg فردية. يمكنك استخدام هذه الرموز (أو وضع أيقونات svg الخاصة بك في هذا الدليل) للإشارة إلى اسم الرمز في مكون <icon> vue.

محتوى

يدعم Codefolio بيانات المستخدم المخصصة. وبصرف النظر عن التفاصيل الشخصية، يمكن للمستخدمين أيضًا تخصيص عناصر رائعة أخرى مثل الروابط الخارجية وعنوان URL لزر السيرة الذاتية في شريط التنقل العلوي.

دليل المحتوى

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

إليك كيف تبدو بنية مجلد المحتوى.

 content
|	navbar.json
|	about.md
|	social-icons.json
|	user.json
|
└───projects
		project1.json
		project2.json
		project3.json
		/* so on... */

دعونا نرى ما هو كل ملف أو مجلد.

navbar.json

يُستخدم هذا الملف للبيانات الاختيارية المتعلقة بشريط التنقل العلوي.

ملكية	يكتب	وصف
استئنافUrl	`string`	استئناف عنوان URL للملف لزر استئناف شريط التنقل.
روابط خارجية	`array`	مصفوفة تحتوي على كائنات لإنشاء روابط خارجية في شريط التنقل العلوي. يحتاج كل كائن رابط خارجي إلى خصائص `text` وسلسلة عناوين `url` حتى يعمل بشكل صحيح.

about.md

يتم استخدام ملف تخفيض السعر هذا لحوالي الصفحة.

Social-icons.json

يُستخدم هذا الملف لإنشاء أيقونات اجتماعية في صفحة "حول".

ملكية	يكتب	وصف
أيقونات	`array`	مصفوفة تحتوي على كائنات لإنشاء أيقونات اجتماعية في صفحة الاتصال. يجب أن يكون لكل كائن `name` وخصائص `url` (سلاسل). يجب أن تحتوي خاصية `name` على ملف svg مطابق في الدليل /assets/sprite/svg/ . معظم الرموز الاجتماعية متاحة بالفعل ولكن لا تتردد في إضافة أيقونات svg المخصصة الخاصة بك. في وضع التطوير، يمكنك زيارة `/_icons` road لسرد جميع الرموز المتاحة.

user.json

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

ملكية	يكتب	وصف
الاسم الكامل	`string`	اسم المستخدم.
عن	`string`	قليلا عن المستخدم.
صورة	`string`	عنوان URL صالح للصورة يبدأ من http أو اسم (بما في ذلك الامتداد) لصورة يتم وضعها في دليل `assets/images` . يرجى قص الصورة إلى `500x500` للحصول على نتائج أفضل.
عنوان	`string`	موقف المستخدم أو دوره.

contact.json

يستخدم هذا الملف لإنشاء صفحة الاتصال.

ملكية	يكتب	وصف
formAction	`string`	إجراء نموذج مخصص لنموذج الاتصال. تحقق من formpree.io.
موقع	`string`	سلسلة موقع المستخدم.
بريد إلكتروني	`string`	عنوان البريد الإلكتروني للمستخدم.
هاتف	`string`	رقم هاتف المستخدم.

المشاريع

يحتوي هذا المجلد على كافة المشاريع كملفات فردية بتنسيق json . سيمثل كل ملف في هذا المجلد مشروعًا مختلفًا.

يحتوي الجدول التالي على تنسيق كل ملف في مجلد المشاريع.

ملكية	يكتب	وصف
بطاقة تعريف	`integer`	معرف فريد للطلب.
عنوان	`string`	اسم المشروع.
وصف	`string`	تفاصيل عن المشروع.
صورة	`string`	عنوان URL صالح للصورة يبدأ من http أو اسم (بما في ذلك الامتداد) لصورة يتم وضعها في دليل `assets/images` .
الروابط	`object`	كائن يحتوي على روابط خارجية للمشروع. يمكن أن يحتوي على خصائص `liveDemo` و `videoDemo` و `sourceCode` الاختيارية لعناوين URL.
التقنيات	`array`	مصفوفة تحتوي على جميع التقنيات (السلاسل) المستخدمة في المشروع.

ملاحظة: قم بإنشاء ملفات جديدة لإضافة المزيد من المشاريع وتسميتها باسم المشروع.

راجع الملفات الوهمية الموجودة في مجلد المحتوى للرجوع إليها.

تحسين محركات البحث

العلامات التعريفية

يوفر Nuxt.js طرقًا فعالة لتحسين موقعك لمحركات البحث. يرجى الرجوع إلى دليل Nuxt.js SEO لمزيد من التفاصيل.

خرائط الموقع

يستخدم هذا المشروع @nuxtjs/sitemap لإنشاء ملف sitemap.xml تلقائيًا. يرجى الرجوع إلى دليل التكوين الخاص بهم إذا كنت بحاجة إلى مزيد من المعلومات.

النشر

بعد تخصيص المحتوى وفقًا لاحتياجاتك، ستحتاج إلى نشر التطبيق في مرحلة الإنتاج.

النشر اليدوي

دعونا نرى كيفية إنشاء ملفات البناء.

ابدأ باستنساخ المستودع على جهازك المحلي باستخدام git (أو قم بتنزيله يدويًا)

 git clone https://github.com/0xaliraza/codefolio

ثم انتقل إلى الدليل الجذر للمستودع وقم بتثبيت التبعيات

 npm install

إنشاء ملفات البناء

 npm run generate

عند هذه النقطة سيكون لديك مجلد ./build يحتوي على جميع ملفات الإنتاج الجاهزة للنشر. يمكنك نشر هذه الملفات على بعض خوادم الاستضافة أو CDN.

إذا كنت تريد رؤية التطبيق يعمل محليًا

 npm run dev

سي آي/سي دي

أنت بحاجة إلى خبرة سابقة في جيثب/الترميز لنشر هذا باستخدام إجراءات جيثب أو بعض منصات CI/CD الأخرى.

هذا مستودع قوالب، لذا يمكنك فقط النقر فوق الزر "استخدام هذا القالب" في الجزء العلوي الأيمن لاستنساخ هذا المستودع. قم بتخصيص ملفات المحتوى وفقًا لاحتياجاتك وتوجه إلى علامة تبويب الإجراءات لإضافة مهام سير العمل المطلوبة. يمكنك إعادة استخدام ملفات ci.yml وcd.yml الموجودة.

راجع إجراءات جيثب لمعرفة المزيد.