Készítsen önálló hostelt Dribbble portfóliót a Dribbbox segítségével

A Dribbble egy népszerű weboldal a tervezési szférában, ahol megoszthatja a WIP projektjeit, terveit, modelljeit, sőt freebieseit. Visszatérve visszajelzést és kritikát kaphat a tervezőktől, ami jó, hogy a tervezést a következő szintre emelje.

Ha személyre szeretné szabni a portfólió megjelenítésének módját, akkor megjelenítheti a felvételeket saját domainje alatt. Hogy ezzel segítsen, kipróbálhatja a Dribbboxot.

A Dribbbox olyan könyvtár, amely segít a Dribbble felvételek megjelenítésében saját domainünk alatt, nem lesz szó a szóváltásról. Nézzük meg, hogyan állíthatja be a Dribbboxot a műveinek bemutatására.

Dribbbox telepítése

Feltételezem, hogy a domain és a kiszolgáló beállítása van; a megosztott tárhely csak jól működik. Ellenkező esetben futtathat egy helyi kiszolgálót, ha nincs ilyen. Ha az AMPPS-lel kapcsolatos helyi szerver beállítására van szüksége, olvassa el itt.

Töltse le a ZIP csomagot, és töltse fel a tartalmat a szerverre. Tartalmazza az index.html, a config.js és az eszközök mappát.

Nyissa meg a config.js és adja meg a portfólió letöltéséhez szükséges felhasználónévet a Dribbble-tól.

Ebben az esetben a Thoriq Firdaus portfóliót használom a demóhoz. Itt van a portfólió letöltésének módja.

 dribbbox.config = dribbble_username: "tfirdaus", rövid leírás: "Egy világszínvonalú tervező akar lenni.", email_address: "[email protected]" 

Mentse el és frissítse az oldalt.

Ez tényleg olyan egyszerű, nem?

Az Ön portfóliója a Dribbbox-on

A beállítás egyszerű. Három oszlop van. Az Ön elérhetőségei a statikus oldalsávon a bal oldalon találhatók. A Dribbble felvételek a középső görgethető oszlopban vannak, és a jobb oldalon, ahol a nézők láthatják a projektet teljes nézetben, egyenként. A beállítás csak olyan kijelzőként tökéletes, ami azt jelenti, hogy a nyilvánosság nem tud visszajelzést adni, mint például megjegyzéseket vagy kedvelőket. Nem fogják megosztani a munkát sem.

A Dribbboxot a mobil eszközökre nézve optimalizálták. Amikor a webhelyet mobilon nézzük, a DOM fa elrendezését és HTML-jét is át kell állítani mobile.js. Adja meg azt a nézetablak-szélességet, amelynek a mobile.js meg kell történnie a index.html.

 (függvény () var s = document.createElement ("script") s.src = "eszközök / js /" + (matchMedia ("(max. szélesség: 414px)"). "mobil": "desktop" ) + ".js" document.head.appendChild (ek)) () 

Következtetés

A Dribbbox egy praktikus könyvtár, amely megmutatja a Dribbble felvételeit saját domainnevén. Nagyon intuitív dolgozni, még akkor is, ha nem ismeri a JavaScript-et; egyszerűen adja hozzá a felhasználónevét és (opcionálisan) az e-mail címét, és mindannyian be van állítva. Ha nem tetszik az alapértelmezett prezentáció, a CSS-en keresztül is személyre szabhatja a megjelenést.

További információ a Hongkiat-ról: A statikus weboldala a Dropbox-ban palacsintával