AI WORLD HQKészíts egy apró, AI alapú időjárás-segítő widgetet a blogodra Hugging Face widgetekkel
Ágyazz be egy élő, kódolásmentes időjárás-widgetet a blogodra kevesebb mint 10 perc alatt a Hugging Face kész widgetjeivel.
Hook: Képzeld el, hogy a blogod látogatói rögtön látják az aktuális időjárást ott, ahol utazási vagy szabadtéri tervekről írsz. A Hugging Face widgetekkel egy apró, élő időjárás-segítőt helyezhetsz el bármelyik oldalra – kódolás nélkül. E útmutató végére egy működő widgeted lesz, amely automatikusan frissül, és remekül néz ki asztali számítógépen és mobilon egyaránt.
💡 Tipp: kattints egy lépés számára, ha kész vagy — zöld pipa jelenik meg, és a böngésződ megjegyzi, meddig jutottál.
- Egy blog vagy weboldal, amit szerkeszthetsz (WordPress, Wix, Squarespace, GitHub Pages stb.)
- Egy ingyenes Hugging Face fiók (2 perces regisztráció)
- 10 perc idő és egy szövegszerkesztő vagy blog admin felület
- Ehhez a feladathoz nem szükséges fizetős előfizetés
Jelentkezz be a Hugging Face-re
Nyiss meg egy webböngészőt, és menj a https://huggingface.co címre. A jobb felső sarokban kattints a Log in / Sign up (Bejelentkezés / Regisztráció) gombra. Válaszd a Sign up (Regisztráció) lehetőséget, és add meg az e-mail címed, felhasználóneved és jelszavad. Ellenőrizd a beérkező leveleidet egy ellenőrző e-mailért, és kattints a benne lévő linkre. Az új profiloldaladon landolsz.
Akkor tudod, hogy sikerült, ha a jobb felső sarokban látod a felhasználónevedet, és az oldalon a „Welcome to Hugging Face, [your name]” (Üdv a Hugging Face-en, [a neved]) szöveg jelenik meg.
Nyisd meg a widgetgalériát
Miután bejelentkeztél, nézd meg a bal oldali sávot, és kattints a Widgets (Widgetek) gombra (alul található, a „Resources” – Erőforrások alatt). Egy új oldal töltődik be, amely készen kapható widgetek rácsát mutatja. Mindegyik egy kis, interaktív blokk, amit beilleszthetsz a blogodba.
Akkor tudod, hogy sikerült, ha a „Browse all widgets” (Összes widget böngészése) feliratú címsort és színes kártyák listáját látod.
Válaszd ki az időjárás-widgetet
A widgetoldalon használd a felül lévő keresőmezőt, és írd be: weather (időjárás). Megjelenik egy „Weather widget” (Időjárás-widget) című kártya egy kis nap-és-felhő ikonnal. Kattints egyszer a kártyára a részletek oldal megnyitásához. Ez az oldal élő előnézetet, beállításokat és a szükséges beágyazási kódot mutatja.
Akkor tudod, hogy sikerült, ha élő időjárás-kijelzőt és olyan opciókat látsz, mint a „Location” (Helyszín) és „Units” (Mértékegységek).
Válaszd ki a beállításokat
A widget oldalon beállíthatod a várost, a hőmérséklet mértékegységét (Celsius vagy Fahrenheit) és a színtémát. Válaszd ki azt a várost, ami a blogolvasóid számára a legfontosabb. Hagyd a többi opciót az alapértelmezett értéken. Ahogy változtatod a beállításokat, az előnézet azonnal frissül, így láthatod, hogyan fog kinézni.
Ha az előnézet nem frissül, frissítsd az oldalt, vagy ellenőrizd az internetkapcsolatodat.
Akkor tudod, hogy sikerült, ha az előnézet a megfelelő várost és hőmérséklet mértékegységet mutatja.
Másold ki a beágyazási kódot
Az előnézet alatt találsz egy Embed this widget (A widget beágyazása) feliratú dobozt. Kattints a doboz belsejébe, hogy kijelöld az összes kódot, majd nyomd meg a Cmd+C (Mac) vagy Ctrl+C (Windows) billentyűkombinációt a másoláshoz. A kód <iframe szöveggel kezdődik és </iframe> szöveggel végződik.
Ha nem látod a beágyazási dobozt, keress egy Copy to clipboard (Vágólapra másolás) vagy Embed (Beágyazás) feliratú gombot.
Akkor tudod, hogy sikerült, ha a kód a vágólapodon van, és a dobozban egy zöld pipát látsz.
Illeszd be a kódot a blogodba
Nyisd meg a blog szerkesztődet (WordPress, Wix, Squarespace stb.), és menj arra az oldalra vagy bejegyzésre, ahová a widgetet szeretnéd. Váltsd át a szerkesztőt HTML módba (ezt néha „Kód nézetnek” is nevezik). Illeszd be a kimásolt kódot pontosan oda, ahová az időjárás-segítőt szeretnéd. Válts vissza Vizuális módba, és mentsd el az oldalt.
Ha a szerkesztőd nem rendelkezik HTML móddal, keress egy „Embed” (Beágyazás) vagy „Custom HTML” (Egyedi HTML) blokkot, és illeszd be oda a kódot.
Akkor tudod, hogy sikerült, ha az élő időjárás-doboz megjelenik az oldalon, és mutatja az aktuális hőmérsékletet.