bemutatóban 👉 Hogyan jelenítsen meg webhelyet a Dropboxon

(2020. október 19.)

Ez az oktatóanyag a Sketch2React HTML-fájlból történő exportálásához és a saját Dropbox-ba való közzétételhez készült. És nem fog egy fillérbe kerülni a hosztolásban 🤖 💪

Ez érdekelte? 😺Ki ne tenné? Ennek a munkafolyamatnak a felhasználási esete a következő lehet:

  1. Ön beleöntötte lelkét és létrehozott egy gyönyörű, teljes körű reagálású weboldalt vagy prototípust a eszközünkkel a vázlathoz
  2. Azt mondod magadnak:
    ”Most mi van ?! Tényleg fizetnem kell a fogadásáért? Szükségem van arra is, hogy megtanuljam az FTP / Cloud közzétételi szolgáltatás kezelésének csínját-bínját?
  3. Azt mondom: Nem, barátom, nem!

Ha már rendelkezik a Dropbox-szal, van egy megfelelő megoldás a DropPages néven. Legfeljebb 50 MB tárhelyet kínál a webhelyen, így tökéletes arra, hogy csak a terveit szerezhesse oda. Mint nagyon gyorsan 🚀

Mivel az egész webhelyed akkor is a Dropboxon van, a fájlok szerkesztése és frissítése csak a régiek cseréje. , várja meg, amíg a Dropbox szinkronizálódik, és voila – frissítve!

Kiderült, hogy a Dropbox gyorsan lángol . Mindenki, aki már tapasztalta letölthető fájlok tárolását a szolgáltatáson, már tudja ezt, de fogalmam sem volt, hogy HTML, CSS és Javascript tárolása is rendkívül gyors.

A DropPages kis mennyiségű beállítást igényel, mindkettő előtt, a Sketch belsejében, és miután webhelyét HTML-be exportálta a Sketch2React fájlból.

Semmi gond, ez nagyon egyszerű, és én veled végig. 🤖 💪

Oktatási követelmények

Egyszerű bemutató webhely

100\% -ban készült Sketch-rel a Sketch2React segítségével 100\% stílusos komponensek

A bemutató céljára ezt a bemutató webhely 100\% -ban készült a Sketch-en belül a Sketch2React segítségével, amelyet a Dropbox-on tárolnak. Rendben van?

Itt letöltheti a Sketch fájlomat tanulmányi célokra 💎

👨‍🍳 Ha még mindig velem tartunk főzni?

1. lépés – Kezdő lépések

Ez a mappa hozzáadódik a Dropbox-hoz
  1. Menjen ide , jelentkezzen be a Dropboxba, és engedélyezze a DropPages számára a fiókjához való hozzáférést. A DropPages létrehoz egy külön mappát a My.DropPages néven az Apps nevű mappában. Semmi gond, minden szépen el van választva az összes többi dologtól.
DropPages – Nyomja meg a kék gombot a bal oldalon
  1. Nyomja meg a kék Új webhely létrehozása gombot , és adjon neki egy nevet, ahol beírja a droppages.com szavakat, különben nem fog működni az ingyenes DropPages-fiók határain belül.

    yourname.droppages.com

    💪 💪 ProTip! Ha egyéni domaint és további tárhelyet szeretne, regisztráljon egy fizetett előfizetést . Ez az oktatóanyag feltételezi, hogy ezt csak 100\% -ban ingyen szeretné kipróbálni, mint én. 😆

  2. Nézzük meg, mit hozott létre számunkra a DropPages. Három mappánk van:

A tartalom és a Nyilvános azok, amelyeket lefedünk ebben az oktatóanyagban
  1. Nyissa meg a tartalmat és Nyilvános és törölje azt, amit a DropPages telepített az Ön számára (index.txt és main.css) – mi nem szükségük van azokra. Semmi gond, ezeket a fájlokat lecseréljük saját, fantasztikus Sketch2React HTML fájljainkra. Sablonok, amelyeket teljesen figyelmen kívül hagyhat.

2. lépés – Ugorjunk a Sketch-be! 💎

Készítettem egy szép kicsit bemutató webhely a Sketch-ben, csak egyszerű jelölőnkkel . Mivel ez csak egy bemutató, miért kéne bajlódnia kétnél több oldal elkészítésével? Igen pontosan .

Használtam az ingyenes Sketch2React Components könyvtárunk alkotóelemeit, és egyéni változtatásokat hajtottam végre rajtuk (természetesen tervező vagyok, mi más egész nap csinálnám? 😆)

Csak a Bootstrap osztály hozzáadásával btn-blokkolja ezt a kicsit gomb teljes szélességűvé válik a kódalkalmazásunkban – yummi!

Néhány ügyes dolog, amit csináltam:

  • újratervezve az egyik szép kék háttérrel rendelkező kártyakomponensünk
  • A gombunkat teljes szélességűvé alakítottuk át a
    btn-block
  • Csodálatos ingyenes illusztrációkat használtam a jó dolgok egyik legkedveltebb szolgáltatójától, a ikonoktól .

Whaaaat ?! Egyáltalán nem szeretem ezt a stílust, tervező godamnit vagyok 😆
  • Amint a fenti 👆 láthatja bizonyos Bootstrap osztályok használatakor amely manipulálja az összetevők megjelenését, automatikusan örökli az alapértelmezett viselkedéseket, amelyeket a Sketch2React nem ír felül. Ennek kijavításához létrehoztam egy egyéni CSS-t :
Magam írtam ezt a kódot? Nem, gugliztam. 😆

Ezzel elértem azt, amit kerestem, megszabadulva ettől a csúnya aláhúzott dologtól a gyönyörű gombomban! 👨🏻‍💻Egyéni CSS használatának eredménye 👇

Aaaa itt nem csúnya aláhúzás!

Ha úgy érzed, hogy a kód valóban félelmetes, semmi gond, akkor a Sketch2React tökéletesen működik mindezek általam hozzáadott extra dolgok, az egyéni CSS nélkül. Ne feledje, hogy ezt használom, mióta kiadtuk az első nyilvános alfát, 2018 elejétől. 😺 💪

A szabályokat (néha) megsérteni kell

Ez egy kicsit nyom és hiba megérteni. Kiderült, hogy egy nagyon fontos DropPages szabály teljesen ellentétes a Sketch2React egyik legfontosabb összekapcsolási szabályával 😆

Normál esetben a Sketch2React tervezésekor a következőképpen linkel:

Rendszeres Sketch2React összekapcsolási viselkedés
  1. Válasszon ki egy összetevőt, amely rendelkezik összekapcsolható tulajdonsággal
  2. Használja a W parancsikon a Sketch belsejében az összetevő és egy másik oldal közötti összekapcsoláshoz
  3. Az ./artboardname.html hozzáadása az összetevő belsejében található {attribute.url} panelhez, például az alábbiak szerint: >

./artboardname.html

  1. Az összes link is visszatér a Starthoz nevet kell megadni:

./index.html

Érted 🤖 💪 Ez biztosítja, hogy minden rendben és szép legyen a csodálatos kódexportunkban. Ez azt is jelenti, hogy egyszerűen áthúzhatja a teljes exportált mappát (HTML) egy FTP-kiszolgálóra, és az összes hivatkozás csak működik.

A React exportálásnál ez kicsit más, mivel merülnie kell az exportált fájlban. kódot az összekapcsolás működéséhez, de ez nem ehhez az oktatóanyaghoz való. Valójában van egy ilyen , természetesen ehhez 👨‍💻

A Btw React-ot még a DropPages sem támogatja, szóval tegyük csak … ehm dobjuk el.

Mi történik?

Az a probléma, hogy ha ezt betartja, és ugyanakkor jó munkafolyamatot szeretne elérni az oldalak Dropbox-ba történő közzétételéhez a DropPages-en keresztül, akkor meg kell szakítanunk ezt a szabályt. Előfordul, hogy a szabályokat megsértik 😬 👍

Ha nem, akkor ez a hibaüzenet téglává válik, ha megpróbál rákattintani a többi oldalra mutató elemre, miután közzétette webhelyét (vagy prototípusát) a DropPages-en :

Helyes az URL? A tartalmi oldalaknak nem lehet kiterjesztésük.

És ezt nem akarjuk hogy valaha is megtörténjen, igaz? Ez az a megoldás, amelyről kiderült, hogy varázslatként működik.

A 🤖 💪

Csak távolítsa el a szokásos .html kiterjesztést, és működni fog. De nem az összes linkről, amely visszamegy a Starthoz! ⚠️

DropPages-specifikus szabályok a Sketch2React linkekhez

  1. Válasszon ki egy összetevőt, amely rendelkezik összekapcsolható tulajdonsággal
  2. Használja a W parancsikont a Sketch-en belül az összetevő és egy másik oldal közötti összekapcsoláshoz
  3. ./artboardname hozzáadása a {attribútumhoz.url} panel az összetevő belsejében, például az alábbiak szerint:

./artboardname

  1. A Start minden visszatérő linkjét is meg kell nevezni: :

./index.html

Fordítson különös figyelmet az utolsó szabályra, nr 4 .

Hogyan állíthatja be azt a munkafolyamatot, amely mind a normál exportáláshoz, mind pedig a DropPages-hez hasonlóan működik? Valójában, mivel csak a linkekre van szükség egy kis kiigazításra, először megtervezem és felépítem a szokásos munkafolyamatokkal, majd csak lemásolom ugyanazt a Sketch fájlt, nevezzük myfilename-droppages -nek és folytatom az életem.

Tervezők vagyunk, így a fizikai munka nem ijeszt meg minket, igaz? 😆 👍

Végül készen állunk a godamnit exportálására!

Okey, így ha még nem aludtál el, vagy mentális állapotod volt, akkor a legjobb barátodnak köszöntöm! Most jön ennek az oktatóanyagnak a szórakoztató része, a dolgok tényleges exportálása a Sketch2React-ból, HTML-be és közzététel a Dropboxba!

Exportálás Sketch2React-ból HTML-be

  1. Győződjön meg róla, hogy minden megtervezett oldalt meglátogat egyszer – így kerül hozzá az exportcsomagunkba
  2. Nyomja meg a Letöltés 👉 HTML gombot, és mentse lemezre
  3. Csomagolja ki a ZIP-jét
  4. Voila kész! Most töltsük fel ezt a Dropbox-ba!

Feltöltés a Dropbox.com-ra

A feltöltés leghatékonyabb módja szerintem ezt ténylegesen meg kell tenni közvetlenül a böngészőjéből . A szinkronizálás gyorsabb, különösen akkor, ha ugyanazokat a fájlokat újra és újra feltölti, amit valószínűleg meg is fog tenni, mivel az ember mindig frissíti / kijavítja a dolgokat, ha élőben látja őket.

De mielőtt ezt megtenné győződjön meg arról, hogy tömöríti a képeszközeit , én a kiváló TinyPNG szolgáltatás arra. Ami a nevével ellentétben a JPGS-t is támogatja.

Dobd ezeket a fájlokat a Tartalom

Minden HTML-oldalad az újonnan létrehozott webhely Tartalom mappájába kerül, az enyém így néz ki:

Dobja el az exportált Sketch2React HTML fájlokat a Tartalom

Dobd ezeket a fájlokat a Nyilvános helyre

A Nyilvános tárolja az összes CSS-, Javascript- és Image-eszközt. Az enyém így néz ki:

Dobja ide az exportált Sketch2React CSS, JS és Image mappákat

Most térjen vissza a DropPages-fiókjához, és nyomja meg a Közzététel most és kész! Néha eltarthat néhány percig, amíg mindent szinkronizálnak és feltöltenek, csak legyen türelemmel, ez működni fog.

Ha szinkronizálási problémákat tapasztal, nyomja meg a piros Szinkron visszaállítása visszaállítás gombot, tegye közzé újra, és végül működik.

Itt a feltöltött btw 👇

http://articledemo.droppages.com/index.html

😺 👍 Ennyi az emberek, remélem, tetszett neked ez az oktatóanyag, és hasznosnak találod a tervezés során a munkafolyamat kódolását.