Dodajanje novih strani

Ta vodič ti pokaže, kako dodati novo stran v večjezični Astro projekt.

Dva pristopa za lokalizacijo

Izberi pristop glede na potrebe:

🗂️ Vzorec A: [...pages].astro (Single File Pattern)

Kdaj uporabi: Preproste strani brez podstrani
Primeri: [...index].astro, [...blog].astro, [...contact].astro

import { buildLocalizedStaticPaths } from "@i18n/utils";

// Enotni catch‑all: [...pages].astro
export function getStaticPaths() {
    return buildLocalizedStaticPaths("/pages", ["...pages"]);
}

📁 Vzorec B: [pages]/[...index].astro (Folder Pattern)

Kdaj uporabi: Strani z dodatnimi datotekami (MDX, slike, komponente)
Primeri: [about]/[...index].astro, [services]/[...index].astro
Prednosti: Organizirana struktura, lažje vzdrževanje

import { buildLocalizedStaticPaths } from "@i18n/utils";

// Vzorec mape: [pages]/[...index].astro
export function getStaticPaths() {
    return buildLocalizedStaticPaths("/pages", ["pages", "...index"]);
}

⚠️ KRITIČNO - Sinhronizacija

Poskrbi, da so vsi lokalizirani segmenti (npr. pages → strani) zapisani v routes.ts. useTranslatedPath() uporablja te preslikave.

🔄 Preklop privzetega jezika

Brez spreminjanja datotek strani lahko zamenjaš korenski jezik:

1. V src/i18n/ui.ts nastavi:
   • defaultLang = "sl" (ali drug jezik)
   • showDefaultLang = true | false (ali želiš predpono tudi za privzeti jezik)
2. Koren postane / (ko je showDefaultLang = false) ali /{defaultLang}/ (ko je true).
3. Vse poti se samodejno prilagodijo, ker getStaticPaths() uporablja useTranslatedPath().
4. Preveri home, about, pages in navigacijo.

Namig: V primerih uporabi useTranslatedPath(lang)("/pages") namesto ročnih lokaliziranih segmentov.

🛠️ Praktičen primer: Dodajanje strani “Storitve”

Dodajmo novo stran /services → /sl/storitve:

Korak 1: Ustvari datoteko

src/pages/[services]/[...index].astro

Korak 2: Nastavi getStaticPaths

import { useTranslations, buildLocalizedStaticPaths } from "@i18n/utils";
import Base from "@layouts/Base.astro";
import "@styles/markdown.css";

export function getStaticPaths() {
    return buildLocalizedStaticPaths("/services", ["services", "...index"]);
}

const { lang } = Astro.props;
const t = useTranslations(lang);
const { Content, frontmatter } = await import(`./_services-${lang}.mdx`);
---

<Base
    title={frontmatter?.title}
    meta={{
        description: frontmatter?.description,
        keywords: frontmatter?.keywords,
    }}
    >
    <section id="md-content">
        <Content />
    </section>
</Base>

Korak 3: Dodaj v routes.ts

export const routes: Record<string, Record<string, string>> = {
    sl: {
        about: "o-projektu",
        blog: "spletni-dnevnik",
        pages: "strani",
        services: "storitve", // ← Ujema se z "storitve" zgoraj
    },
};

Korak 4: Dodaj v navigacijo

const navigationData = [
    {
        label: "menu.list.services",
        href: "/services", // ← Angleška pot
        children: [],
    },
];

Korak 5: Ustvari vsebinske datoteke

• _services-en.mdx
• _services-sl.mdx

Korak 6: Dodaj prevode (opcijsko, če nebereš iz MDX)

V locales/en/services.json:

{
    "head": {
        "title": "Our Services",
        "description": "Professional services we offer"
    },
    // Če želiš, lahko dodaš tudi druge ključe
    "title": "Our Services",
    "description": "We provide comprehensive solutions for your business needs."
}

V locales/sl/services.json:

{
    "head": {
        "title": "Naše storitve",
        "description": "Strokovne storitve, ki jih ponujamo"
    },
    // Če želiš, lahko dodaš tudi druge ključe
    "title": "Naše storitve",
    "description": "Zagotavljamo celovite rešitve za vaše poslovne potrebe."
}

V locales/en/menu.json dodaj:

{
    "list": {
        "services": "Services"
    }
}

V locales/sl/menu.json dodaj:

{
    "list": {
        "services": "Storitve"
    }
}

🎯 Končni rezultat

Predpostavka: defaultLang = "en" in showDefaultLang = false:

Čestitke! Nova stran je uspešno dodana! 🎉