Kezdeti témabeállítás

1. Az induláshoz először telepítsd az összes szükséges csomagot az npm install vagy a pnpm install paranccsal, majd futtass egy kezdeti buildet az npm run build vagy a pnpm build paranccsal, hogy lásd, működik-e a beállítás.
2. Másold át a Pagefind buildet (az oldalkereséshez), hogy elérhető legyen a fejlesztői környezetben. Ez az operációs rendszertől függően eltér. Készítettem néhány parancsot, hogy segítsek.
   • Windowson futtasd az npm run winsearch parancsot
   • OSX-en vagy Linuxon futtasd az npm run osxsearch parancsot
3. Ezután állítsd be az oldal i18n konfigurációját (egy nyelv vagy több). Futtasd az npm run docs:config-i18n parancsot, és kövesd a szkript utasításait a beállításhoz!
4. Most már ízlésed szerint alakíthatod az oldalt!

Kódbemutatók

Készítettem néhány kódtúrát, hogy bevezessenek a kódbázisba. A megtekintésükhöz VSCode-ban vagy más IDE-ben szükséged lesz a Code Tour bővítményre.

Kódszerkezet

A kód nagy része a src/docs könyvtár alatt található. Így könnyen bemásolhatod az egész mappát egy meglévő projektbe, és percek alatt hozzáadhatod a dokumentációs funkciókat.

Konfigurációs beállítások

Az oldal általános konfigurációja a src/docs/config/ mappában történik. A legtöbb beállítás külön nyelvi mappákban van, hogy egyszerűbb legyen a fordítások kezelése.

Oldalbeállítások

A src/docs/config/siteSettings.json.ts fájlban állíthatod be az oldal beállításait. Ide tartozik például, hogy engedélyezed-e a view transitions funkciót, engedélyezed-e az animációkat, és megjelenjenek-e a hivatkozásmásoló gombok a dokumentáció címsorainál.

Oldaladatok

A src/docs/config/[language]/siteData.json.ts fájlban állíthatod be az oldal adatait. Ide tartozik például az oldal címe, leírása, a közösségi hivatkozások és az alapértelmezett kép.

Navigációs adatok

A felső navigációs sáv navigációs adatait a src/docs/config/[language]/navData.json.ts fájlban állíthatod be.

Oldalsáv elrendezése

A dokumentációs szakaszok sorrendjét a src/docs/config/[language]/sidebarNavData.json.ts fájlban állíthatod be.

Robotok

Ahhoz, hogy a robotok, például a Google, a helyes sitemapet lássák, szerkeszd a public/robots.txt fájlt, hogy a saját domainedet használja.

További források

Általános Astro információk

Az Astro a src/pages/ könyvtárban keres .astro vagy .md fájlokat. Minden oldal a fájlneve alapján kap útvonalat.

A src/components/ mappában semmi különleges nincs, de mi ide szoktuk tenni az Astro/React/Vue/Svelte/Preact komponenseket.

A statikus elemek, például a képek, a public/ könyvtárba kerülhetnek. Én gyakran a src/assets mappát is használom képekhez, amikor az Astro assets képoptimalizálását alkalmazom.

Parancsok

Minden parancsot a projekt gyökeréből, terminálból futtatsz:

Parancs	Művelet
npm install	Telepíti a függőségeket
npm run dev	Helyi fejlesztői szervert indít itt: localhost:4321
npm run build	Elkészíti az éles oldalt ide: ./dist/
npm run preview	Helyben megtekintheted a buildet a közzététel előtt
npm run astro ...	CLI parancsokat futtat, például astro add, astro check
npm run astro -- --help	Segítséget kérhetsz az Astro CLI használatához

Szeretnél többet tudni?

Nézd meg a dokumentációt, vagy csatlakozz a Discord szerverhez.