إنشاء محفظة Dribbble ذاتية الاستضافة مع Dribbbox

Dribbble هو موقع ويب شائع في مجال التصميم حيث يمكنك مشاركة مشاريع WIP الخاصة بك ، والتصميمات ، والنماذج بالأحجام الطبيعية ، وحتى المجانية. في المقابل ، سوف تحصل على تعليقات وانتقادات من زملائك المصممين وهو أمر جيد لدفع تصميمك إلى المستوى التالي.

إذا كنت ترغب في تخصيص كيفية عرض محفظتك ، يمكنك عرض اللقطات ضمن نطاقك الخاص. لمساعدتك في ذلك ، يمكنك تجربة Dribbbox.

Dribbbox هي مكتبة تساعدنا في عرض لقطات Dribbble ضمن نطاقنا الخاص ، ولن يكون هناك أي متاعب. دعنا نلقي نظرة على كيفية إعداد Dribbbox لعرض أعمالك الفنية.

تثبيت Dribbbox

أفترض أن لديك مجالك وإعداد خادم ؛ استضافة مشتركة يجب أن تعمل على ما يرام. خلاف ذلك ، يمكنك تشغيل خادم محلي إذا لم يكن لديك واحد. إذا كنت بحاجة إلى إرشادات حول كيفية إعداد خادم محلي باستخدام AMPPS ، فاقرأ عنه هنا.

قم بتنزيل حزمة ZIP ، وقم بتحميل المحتوى على الخادم. قم بتضمين index.html و config.js ومجلد الأصول.

افتح ال config.js وحدد اسم المستخدم لاسترداد محفظتك من Dribbble.

في هذه الحالة ، أنا أستخدم محفظة Thoriq Firdaus 'للعرض التجريبي. إليك كيفية استرداد الحافظة.

 dribbbox.config = dribbble_username: "tfirdaus" ، short_description: "مصمم على مستوى عالمي يريد أن يكون." ، email_address: "[email protected]" 

حفظه وتحديث الصفحة.

انها حقا بهذه البساطة ، أليس كذلك?

محفظتك على Dribbbox

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

تم تحسين Dribbbox للعرض على الأجهزة المحمولة. عندما يتم عرض موقع الويب على الهاتف المحمول ، سيتم إعادة بناء التصميم وكذلك HTML لشجرة DOM من خلال mobile.js. تحديد عرض منفذ العرض الذي mobile.js يجب أن تتم في index.html و.

 (function () var s = document.createElement ("script") s.src = "stocks / js /" + (matchMedia ("(max-width: 414px)"). التطابقات؟ "mobile": "desktop" ) + ".js" document.head.appendChild (s)) () 

استنتاج

Dribbbox هي مكتبة مفيدة لإظهار لقطات Dribbble الخاصة بك تحت اسم المجال الخاص بك. من البديهي للغاية العمل مع حتى إذا كنت لا تعرف JavaScript ؛ ما عليك سوى إضافة اسم المستخدم الخاص بك و (اختياريًا) عنوان بريدك الإلكتروني ، وستكون جاهزًا. إذا كنت لا تحب العرض التقديمي الافتراضي ، فيمكنك تخصيص المظهر من خلال CSS.

أكثر على Hongkiat: استضافة موقع الويب الخاص بك ثابت في Dropbox مع فطيرة