สร้างพอร์ตโฟลิโอ 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 = "asset / js /" + (matchMedia ("(ความกว้างสูงสุด: 414px)")) ตรงกันหรือไม่ "มือถือ": "เดสก์ท็อป" ) + ".js" document.head.appendChild (s)) () 

ข้อสรุป

Dribbbox เป็นห้องสมุดที่มีประโยชน์ในการแสดงภาพ Dribbble ของคุณภายใต้ชื่อโดเมนของคุณเอง มันใช้งานง่ายมากแม้ว่าคุณจะไม่รู้จัก JavaScript เพียงเพิ่มชื่อผู้ใช้ของคุณและ (ทางเลือก) ที่อยู่อีเมลของคุณและคุณพร้อมแล้ว หากคุณไม่ชอบการนำเสนอเริ่มต้นคุณสามารถปรับแต่งลักษณะที่ปรากฏผ่าน CSS ได้.

เพิ่มเติมเกี่ยวกับ Hongkiat: โฮสต์เว็บไซต์คงที่ของคุณใน Dropbox ด้วย Pancake