Creation:2025-04-18Last update:2026-05-31

    Przetłumacz swoją stronę Vite i Vue za pomocą Intlayer | Internacjonalizacja (i18n)

    Spis treści

    Dlaczego Interlayer zamiast alternatyw?

    W porównaniu do głównych rozwiązań, takich jak vue-i18n czy i18next, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:

    Pełne pokrycie Vue

    Intlayer jest zoptymalizowany do doskonałej współpracy z Vue, oferując zakres treści na poziomie komponentu, tłumaczenia reaktywne i wszystkie funkcje potrzebne do skalowania internacjonalizacji (i18n).

    Rozmiar bundle'a

    Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga zmniejszyć rozmiary bundle'a i stron nawet o 50%.

    Łatwość konserwacji

    Określanie zakresu zawartości aplikacji ułatwia konserwację aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Inlayer jest w pełni napisany, aby zapewnić dokładność treści.

    Agent AI

    Wspólna lokalizacja treści zmniejsza potrzebny kontekst dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, taki jak CLI do sprawdzania brakujących tłumaczeńLSP, MCP i umiejętności agenta, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.

    Automatyzacja

    Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także kompilator do automatyzacji ekstrakcji treści, a także [platformę internetową] (/pl/doc/concept/cms), która pomaga tłumaczyć w tle.

    Wydajność

    Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Inlayer optymalizuje ładowanie treści w czasie kompilacji.

    Skalowanie bez użycia dewelopera

    Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia samodzielny edytor wizualny i pełny CMS, który pomoże Ci zarządzać wielojęzyczną treścią w w czasie rzeczywistym, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.

    Przewodnik krok po kroku, jak skonfigurować Intlayer w aplikacji Vite i Vue

    www.youtube.com

    Zobacz Szablon aplikacji na GitHub.

    1. Instalacja zależności

      Zainstaluj niezbędne pakiety za pomocą npm:

      bash
      npm install intlayer vue-intlayernpm install vite-intlayer --save-devnpx intlayer init

      • intlayer

        Główny pakiet, który dostarcza narzędzia do internacjonalizacji do zarządzania konfiguracją, tłumaczeń, deklaracji treści, transpilecji oraz poleceń CLI.

      • vue-intlayer Pakiet integrujący Intlayer z aplikacją Vue. Zapewnia dostawców kontekstu oraz composables do internacjonalizacji w Vue.

      • vite-intlayer Zawiera wtyczkę Vite do integracji Intlayer z bundlerem Vite, a także middleware do wykrywania preferowanego języka użytkownika, zarządzania ciasteczkami oraz obsługi przekierowań URL.

    2. Konfiguracja Twojego projektu

      Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Twoje pozostałe lokalizacje
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
      Za pomocą tego pliku konfiguracyjnego możesz ustawić lokalizowane adresy URL, przekierowania w middleware, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji zawartości, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w dokumentacji konfiguracyjnej.

    3. Zintegruj Intlayer w swojej konfiguracji Vite

      Dodaj wtyczkę intlayer do swojej konfiguracji.

      vite.config.ts
      import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), intlayer()],
});
      Wtyczka Vite intlayer() służy do integracji Intlayer z Vite. Zapewnia budowanie plików deklaracji treści oraz monitoruje je w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w aplikacji Vite. Dodatkowo dostarcza aliasy optymalizujące wydajność.

    4. Zadeklaruj swoją treść

      Twórz i zarządzaj deklaracjami treści, aby przechowywać tłumaczenia:

      src/helloWorld.content.ts
      import { t, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "helloworld",
  content: {
    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
    edit: t({
      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
    }),
    checkOut: t({
      pl: "Sprawdź ",
      en: "Check out ",
      fr: "Vérifiez ",
      es: "Compruebe ",
    }),
    officialStarter: t({
      pl: ", oficjalny starter Vue + Vite",
      en: ", the official Vue + Vite starter",
      fr: ", le starter officiel Vue + Vite",
      es: ", el starter oficial Vue + Vite",
    }),
    learnMore: t({
      pl: "Dowiedz się więcej o wsparciu IDE dla Vue w ",
      en: "Learn more about IDE Support for Vue in the ",
      fr: "En savoir plus sur le support IDE pour Vue dans le ",
      es: "Aprenda más sobre el soporte IDE para Vue en el ",
    }),
    vueDocs: t({
      pl: "Przewodnik skalowania dokumentacji Vue",
      en: "Vue Docs Scaling up Guide",
      fr: "Vue Docs Scaling up Guide",
      es: "Vue Docs Scaling up Guide",
    }),
    readTheDocs: t({
      pl: "Kliknij na loga Vite i Vue, aby dowiedzieć się więcej",
      en: "Click on the Vite and Vue logos to learn more",
      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
    }),
  },
} satisfies Dictionary;

export default helloWorldContent;
      Twoje deklaracje zawartości mogą być definiowane w dowolnym miejscu w Twojej aplikacji, pod warunkiem, że zostaną umieszczone w katalogu contentDir (domyślnie ./src). Muszą również odpowiadać rozszerzeniu pliku deklaracji zawartości (domyślnie .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).
      Po więcej szczegółów odsyłamy do dokumentacji deklaracji zawartości.

    5. Wykorzystaj Intlayer w swoim kodzie

      Aby wykorzystać funkcje internacjonalizacji Intlayer w całej aplikacji Vue, najpierw musisz zarejestrować instancję singleton Intlayer w swoim głównym pliku. Ten krok jest kluczowy, ponieważ dostarcza kontekst internacjonalizacji wszystkim komponentom w aplikacji, umożliwiając dostęp do tłumaczeń w dowolnym miejscu w drzewie komponentów.

      import { createApp } from "vue";import { intlayer } from "vue-intlayer";import App from "./App.vue";import "./style.css";const app = createApp(App);// Wstrzyknij providera na najwyższym poziomieapp.use(intlayer);// Zamontuj aplikacjęapp.mount("#app");

      Uzyskaj dostęp do swoich słowników treści w całej aplikacji, tworząc główny komponent Vue i używając kompozycji useIntlayer:

      src/HelloWord.vue
      <script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const {  count,  edit,  checkOut,  officialStarter,  learnMore,  vueDocs,  readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="countRef++">      <count />      {{ countRef }}    </button>    <p v-html="edit"></p>  </div>  <p>    <checkOut />    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"      >create-vue</a    >, <officialStarter />  </p>  <p>    <learnMore />    <a      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"      target="_blank"      ><vueDocs /></a    >.  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

      Dostęp do treści w Intlayer

      Intlayer oferuje różne API do dostępu do Twojej treści:

      • Składnia oparta na komponentach (zalecana): Użyj składni <myContent /> lub <Component :is="myContent" />, aby wyrenderować treść jako węzeł Intlayer. Integruje się to bezproblemowo z Visual Editor oraz CMS.

      • Składnia oparta na łańcuchu znaków: Użyj {{ myContent }}, aby wyrenderować treść jako zwykły tekst, bez wsparcia Visual Editor.

      • Składnia surowego HTML: Użyj <div v-html="myContent" />, aby renderować zawartość jako surowy HTML, bez wsparcia Visual Editora.

      • Składnia destrukturyzacji: Kompozycja useIntlayer zwraca Proxy z zawartością. Ten proxy można destrukturyzować, aby uzyskać dostęp do zawartości, zachowując reaktywność.

        • Użyj const content = useIntlayer("myContent"); oraz {{ content.myContent }} / <content.myContent />.
        • Lub użyj const { myContent } = useIntlayer("myContent"); oraz {{ myContent }} / <myContent/>, aby destrukturyzować zawartość.
      Jeśli Twoja aplikacja już istnieje, możesz użyć Intlayer Compiler w połączeniu z poleceniem extract, aby przekonwertować tysiące komponentów w jedną sekundę.

    6. Zmień język swojej zawartości

      Opcjonalne

      Aby zmienić język swojej zawartości, możesz użyć funkcji setLocale dostarczonej przez kompozycję useLocale. Funkcja ta pozwala ustawić lokalizację aplikacji i odpowiednio zaktualizować zawartość.

      Utwórz komponent do przełączania między językami:

      src/components/LocaleSwitcher.vue
      <template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { getLocaleName } from "intlayer";import { useLocale } from "vue-intlayer";// Pobierz informacje o lokalizacji oraz funkcję setLocaleconst { locale, availableLocales, setLocale } = useLocale();// Śledź wybraną lokalizację za pomocą refconst selectedLocale = ref(locale.value);// Aktualizuj lokalizację, gdy zmieni się wybórconst changeLocale = () => setLocale(selectedLocale.value);// Synchronizuj selectedLocale z globalnym localewatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

      Następnie użyj tego komponentu w swoim pliku App.vue:

      src/App.vue
      <script setup lang="ts">import { useIntlayer } from "vue-intlayer";import HelloWorld from "@components/HelloWorld.vue";import LocaleSwitcher from "@components/LocaleSwitcher.vue";import { ref, watch } from "vue";const content = useIntlayer("app"); // Utwórz powiązany plik deklaracji intlayer</script><template>  <div>    <LocaleSwitcher />    <a href="https://vite.dev" target="_blank">      <img src="/vite.svg" class="logo" :alt="content.viteLogo" />    </a>    <a href="https://vuejs.org/" target="_blank">      <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />    </a>  </div>  <HelloWorld :msg="content.title" /></template>

    7. Dodaj lokalizowane routowanie do swojej aplikacji

      Opcjonalne

      Dodanie lokalizowanego routingu w aplikacji Vue zazwyczaj polega na użyciu Vue Router z prefiksami lokalizacji. Tworzy to unikalne ścieżki dla każdego języka, co jest przydatne dla SEO i przyjaznych dla SEO adresów URL.

      Przykład:

      plaintext
      - https://example.com/about- https://example.com/es/about- https://example.com/fr/about

      Najpierw zainstaluj Vue Router:

      bash
      npm install vue-routernpx intlayer init

      Następnie utwórz konfigurację routera, która obsługuje routing oparty na lokalizacji:

      src/router/index.ts
      import {  localeFlatMap,  type Locale,} from 'intlayer';import { createIntlayerClient } from "vue-intlayer";import { createRouter, createWebHistory } from 'vue-router';import HomeView from './views/home/HomeView.vue';import RootView from './views/root/Root.vue';/** * Zadeklaruj trasy z lokalizowanymi ścieżkami i metadanymi. */const routes = localeFlatMap(({ urlPrefix, locale }) => [  {    path: `${urlPrefix}/`,    name: `Root-${locale}`,    component: RootView,    meta: {      locale,    },  },  {    path: `${urlPrefix}/home`,    name: `Home-${locale}`,    component: HomeView,    meta: {      locale,    },  },]);// Utwórz instancję routeraexport const router = createRouter({  history: createWebHistory(),  routes,});// Dodaj strażnika nawigacji do obsługi lokalizacjirouter.beforeEach((to, _from, next) => {  const client = createIntlayerClient();  const metaLocale = to.meta.locale as Locale;  // Ponowne użycie lokalizacji zdefiniowanej w meta trasy  client.setLocale(metaLocale);  next();});
      Nazwa jest używana do identyfikacji trasy w routerze. Powinna być unikalna wśród wszystkich tras, aby uniknąć konfliktów oraz zapewnić prawidłową nawigację i linkowanie.

      Następnie zarejestruj router w pliku main.js:

      src/main.ts
      import { createApp } from "vue";import App from "./App.vue";import { router } from "./router";import "./style.css";const app = createApp(App);// Dodaj router do aplikacjiapp.use(router);// Zamontuj aplikacjęapp.mount("#app");

      Następnie zaktualizuj plik App.vue, aby renderować komponent RouterView. Ten komponent wyświetli dopasowany komponent dla bieżącej ścieżki.

      src/App.vue
      <script setup lang="ts">import LocaleSwitcher from "@components/LocaleSwitcher.vue";</script><template>  <nav>    <LocaleSwitcher />  </nav>  <RouterView /></template>

      Równolegle możesz również użyć intlayerProxy, aby dodać routowanie po stronie serwera do swojej aplikacji. Ten plugin automatycznie wykryje bieżący język na podstawie URL i ustawi odpowiedni cookie językowy. Jeśli nie zostanie określony żaden język, plugin wybierze najbardziej odpowiedni język na podstawie preferencji językowych przeglądarki użytkownika. Jeśli nie zostanie wykryty żaden język, nastąpi przekierowanie do domyślnego języka.

      Zauważ, że aby używać intlayerProxy w produkcji, musisz przenieść pakiet vite-intlayer z devDependencies do dependencies.
      vite.config.ts
      import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { intlayer, intlayerProxy } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    intlayerProxy(), // should be placed first
    vue(),
    intlayer(),
  ],
});

    8. Zmiana URL po zmianie lokalizacji

      Opcjonalne

      Aby automatycznie aktualizować URL po zmianie języka przez użytkownika, możesz zmodyfikować komponent LocaleSwitcher, aby korzystał z Vue Router:

      src/components/LocaleSwitcher.vue
      <template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { useRouter } from "vue-router";import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Pobierz Vue Routerconst router = useRouter();// Pobierz informacje o lokalizacji oraz funkcję setLocaleconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // Pobierz bieżącą trasę i utwórz zlokalizowany URL    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // Przejdź do zlokalizowanej trasy bez przeładowania strony    router.push(localizedPath);  },});// Śledź wybraną lokalizację za pomocą refconst selectedLocale = ref(locale.value);// Aktualizuj lokalizację, gdy zmieni się wybórconst changeLocale = () => {  setLocale(selectedLocale.value);};// Synchronizuj selectedLocale z globalną lokalizacjąwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

      Wskazówka: Dla lepszego SEO i dostępności używaj tagów takich jak <a href="/fr/home" hreflang="fr"> do linkowania do stron zlokalizowanych, jak pokazano w Kroku 10. Pozwala to wyszukiwarkom na prawidłowe wykrywanie i indeksowanie adresów URL specyficznych dla języka. Aby zachować zachowanie SPA, możesz zapobiec domyślnej nawigacji za pomocą @click.prevent, zmienić lokalizację używając useLocale oraz programowo nawigować za pomocą Vue Router.

      html
      <ol>  <li>    <a      hreflang="x-default"      aria-label="Przełącz na angielski"      target="_self"      aria-current="page"      href="/doc/get-started"    >      <div>        <span dir="ltr" lang="en">English</span>        <span>Angielski</span>        <span>EN</span>      </div>    </a>  </li>  <li>    <a      hreflang="es"      aria-label="Przełącz na hiszpański"      target="_self"      href="/es/doc/get-started"    >      <div>        <span dir="ltr" lang="es">Español</span>        <span>Hiszpański</span>        <span>ES</span>      </div>    </a>  </li></ol>

    9. Zmień atrybuty języka i kierunku w tagu HTML

      Opcjonalne

      Gdy Twoja aplikacja obsługuje wiele języków, niezwykle ważne jest, aby zaktualizować atrybuty lang i dir znacznika <html>, tak aby odpowiadały aktualnej lokalizacji. Zapewnia to:

      • Dostępność: Czytniki ekranu i technologie wspomagające polegają na poprawnym atrybucie lang, aby prawidłowo wymawiać i interpretować zawartość.
      • Renderowanie tekstu: Atrybut dir (kierunek) zapewnia, że tekst jest wyświetlany w odpowiedniej kolejności (np. od lewej do prawej dla angielskiego, od prawej do lewej dla arabskiego lub hebrajskiego), co jest kluczowe dla czytelności.
      • SEO: Wyszukiwarki używają atrybutu lang, aby określić język Twojej strony, co pomaga w wyświetlaniu odpowiednio zlokalizowanych treści w wynikach wyszukiwania.

      Aktualizując te atrybuty dynamicznie przy każdej zmianie lokalizacji, zapewniasz spójne i dostępne doświadczenie dla użytkowników we wszystkich obsługiwanych językach.

      src/composables/useI18nHTMLAttributes.ts
      import { watch } from "vue";import { useLocale } from "vue-intlayer";import { getHTMLTextDir } from "intlayer";/** * Composable, który aktualizuje atrybuty `lang` i `dir` elementu HTML <html> * na podstawie aktualnej lokalizacji. * * @example * // W Twoim pliku App.vue lub globalnym komponencie * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes' * * useI18nHTMLAttributes() */export const useI18nHTMLAttributes = () => {  const { locale } = useLocale();  // Aktualizuj atrybuty HTML za każdym razem, gdy zmienia się lokalizacja  watch(    () => locale.value,    (newLocale) => {      if (!newLocale) return;      // Aktualizuj atrybut języka      document.documentElement.lang = newLocale;      // Ustaw kierunek tekstu (ltr dla większości języków, rtl dla arabskiego, hebrajskiego itd.)      document.documentElement.dir = getHTMLTextDir(newLocale);    },    { immediate: true }  );};

      Użyj tego composable w swoim App.vue lub globalnym komponencie:

      src/App.vue
      <script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// Zastosuj atrybuty HTML na podstawie aktualnej lokalizacjiuseI18nHTMLAttributes();</script><template>  <!-- Szablon Twojej aplikacji --></template>

    10. Tworzenie lokalizowanego komponentu Link

      Opcjonalne

      Aby zapewnić, że nawigacja w Twojej aplikacji respektuje aktualny język, możesz stworzyć niestandardowy komponent Link. Ten komponent automatycznie dodaje przedrostek z aktualnym językiem do wewnętrznych adresów URL. Na przykład, gdy użytkownik mówiący po francusku kliknie link do strony "About", zostanie przekierowany na /fr/about zamiast na /about.

      To zachowanie jest przydatne z kilku powodów:

      • SEO i doświadczenie użytkownika: Lokalizowane adresy URL pomagają wyszukiwarkom poprawnie indeksować strony specyficzne dla języka oraz dostarczać użytkownikom treści w ich preferowanym języku.
      • Spójność: Korzystając z lokalizowanego linku w całej aplikacji, zapewniasz, że nawigacja pozostaje w obrębie aktualnego języka, zapobiegając nieoczekiwanym zmianom języka. /// Utrzymanie: Centralizacja logiki lokalizacji w jednym komponencie upraszcza zarządzanie adresami URL, co sprawia, że baza kodu jest łatwiejsza w utrzymaniu i rozbudowie wraz z rozwojem aplikacji.
      src/components/Link.vue
      <template>  <a :href="localizedHref" v-bind="$attrs">    <slot />  </a></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  href: {    type: String,    required: true,  },});const { locale } = useLocale();// Sprawdź, czy link jest zewnętrznyconst isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));// Utwórz zlokalizowany href dla linków wewnętrznychconst localizedHref = computed(() =>  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>

      Do użytku z Vue Router, utwórz wersję specyficzną dla routera:

      src/components/RouterLink.vue
      <template>  <router-link :to="localizedTo" v-bind="$attrs">    <slot />  </router-link></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  to: {    type: [String, Object],    required: true,  },});const { locale } = useLocale();// Utwórz zlokalizowaną właściwość to dla router-linkconst localizedTo = computed(() => {  if (typeof props.to === "string") {    return getLocalizedUrl(props.to, locale.value);  } else {    // Jeśli 'to' jest obiektem, zlokalizuj właściwość path    return {      ...props.to,      path: getLocalizedUrl(props.to.path ?? "/", locale.value),    };  }});</script>

      Użyj tych komponentów w swojej aplikacji:

      src/App.vue
      <template>  <div>    <!-- Vue router  -->    <RouterLink to="/">Root</RouterLink>    <RouterLink to="/home">Home</RouterLink>    <!-- Inne -->    <Link href="/">Root</Link>    <Link href="/home">Home</Link>  </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>

    11. Renderowanie Markdown

      Opcjonalne

      Intlayer obsługuje renderowanie zawartości Markdown bezpośrednio w Twojej aplikacji Vue. Domyślnie Markdown jest traktowany jako zwykły tekst. Aby przekształcić Markdown w bogaty HTML, możesz zintegrować markdown-it, parser Markdown.

      Jest to szczególnie przydatne, gdy Twoje tłumaczenia zawierają sformatowaną zawartość, taką jak listy, linki czy wyróżnienia.

      Domyślnie Intlayer renderuje markdown jako ciąg znaków. Jednak Intlayer oferuje również sposób na renderowanie markdown do HTML za pomocą funkcji installIntlayerMarkdown.

      Aby zobaczyć, jak deklarować zawartość markdown za pomocą pakietu intlayer, zobacz dokumentację markdown.
      main.ts
      import MarkdownIt from "markdown-it";import { createApp, h } from "vue";import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";const app = createApp(App);app.use(intlayer);const md = new MarkdownIt({  html: true, // zezwól na tagi HTML  linkify: true, // automatyczne linkowanie URL  typographer: true, // włącz inteligentne cudzysłowy, myślniki itp.});// Powiedz Intlayer, aby używał md.render() za każdym razem, gdy musi przekształcić markdown na HTMLinstallIntlayerMarkdown(app, (markdown) => {  const html = md.render(markdown);  return h("div", { innerHTML: html });});

      Po zarejestrowaniu możesz używać składni opartej na komponentach, aby bezpośrednio wyświetlać zawartość Markdown:

      vue
      <template>  <div>    <myMarkdownContent />  </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("my-component");</script>

    12. Wyodrębnij zawartość swoich komponentów

      Opcjonalne

      Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.

      Aby ułatwić ten proces, Intlayer proponuje kompilator / ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość.

      Aby go skonfigurować, możesz dodać sekcję compiler w pliku intlayer.config.ts:

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Reszta Twojej konfiguracji
  compiler: {
    /**
     * Wskazuje, czy kompilator powinien być włączony.
     */
    enabled: true,

    /**
     * Definiuje ścieżkę plików wyjściowych
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
     */
    saveComponents: false,

    /**
     * Prefiks klucza słownika
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość

      bash
      npx intlayer extract

    Konfiguracja TypeScript

    Intlayer wykorzystuje rozszerzenia modułów (module augmentation), aby korzystać z zalet TypeScript i uczynić Twoją bazę kodu bardziej solidną.

    Autouzupełnianie

    Błąd tłumaczenia

    Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane typy.

    tsconfig.json
    {  // ... Twoje istniejące konfiguracje TypeScript  "include": [    // ... Twoje istniejące konfiguracje TypeScript    ".intlayer/**/*.ts", // Uwzględnij automatycznie generowane typy  ],}

    Konfiguracja Git

    Zaleca się ignorowanie plików generowanych przez Intlayer. Pozwala to uniknąć ich zatwierdzania do repozytorium Git.

    Aby to zrobić, możesz dodać następujące instrukcje do pliku .gitignore:

    bash
    #  Ignoruj pliki generowane przez Intlayer.intlayer

    Rozszerzenie VS Code

    Aby poprawić doświadczenie podczas pracy z Intlayer, możesz zainstalować oficjalne rozszerzenie Intlayer dla VS Code.

    Zainstaluj z Marketplace VS Code

    To rozszerzenie oferuje:

    • Autouzupełnianie kluczy tłumaczeń.
    • Wykrywanie błędów w czasie rzeczywistym dla brakujących tłumaczeń.
    • Podgląd w linii przetłumaczonej zawartości.
    • Szybkie akcje umożliwiające łatwe tworzenie i aktualizowanie tłumaczeń.

    Zaleca się ignorowanie plików generowanych przez Intlayer. Pozwala to uniknąć ich zatwierdzania do repozytorium Git.

    Aby to zrobić, możesz dodać następujące instrukcje do pliku .gitignore:

    bash
    #  Ignoruj pliki generowane przez Intlayer.intlayer

    Rozszerzenie VS Code

    Aby poprawić doświadczenie programistyczne z Intlayer, możesz zainstalować oficjalne rozszerzenie Intlayer dla VS Code.

    Zainstaluj z Marketplace VS Code

    To rozszerzenie oferuje:

    • Autouzupełnianie kluczy tłumaczeń.
    • Wykrywanie błędów w czasie rzeczywistym dla brakujących tłumaczeń.
    • Podgląd w linii przetłumaczonej zawartości.
    • Szybkie akcje do łatwego tworzenia i aktualizowania tłumaczeń.

    Więcej szczegółów na temat korzystania z rozszerzenia znajdziesz w dokumentacji rozszerzenia Intlayer VS Code.

    (Opcjonalnie) Sitemap i robots.txt (generacja przy buildzie)

    Intlayer udostępnia generateSitemap i getMultilingualUrls - narzędzia do formatowania wielojęzycznych plików sitemap.xml i robots.txt dla crawlerów i automatycznego zapisu do public/. Zwykle uruchamia się mały skrypt Node przed Vite (np. hooki npm predev / prebuild).

    Sitemap

    Generator sitemap uwzględnia locale i dodaje metadane dla crawlerów.

    Sitemap obsługuje przestrzeń nazw xhtml:link (hreflang). Zamiast płaskiej listy URL Intlayer tworzy dwukierunkowe powiązania wszystkich wersji językowych strony (np. /about, /fr/about lub /about?lang=fr w zależności od routingu).

    Robots.txt

    Użyj getMultilingualUrls, by reguły Disallow obejmowały wszystkie zlokalizowane warianty ścieżek.

    1. Plik generate-seo.mjs w katalogu głównym

    generate-seo.mjs
    import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

    Pakiet intlayer musi być zainstalowany. W produkcji ustaw SITE_URL w środowisku (np. w CI).

    Preferuj generate-seo.mjs dla ESM w Node. Przy generate-seo.js ustaw "type": "module" w package.json lub włącz ESM inaczej.

    2. Uruchom skrypt przed Vite

    package.json
    {  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

    Dostosuj polecenia dla pnpm lub yarn. Możesz też wywołać skrypt z CI.

    Idź dalej

    Aby iść dalej, możesz zaimplementować edytor wizualny lub wyodrębnić swoją zawartość, korzystając z CMS.

    Compiler
    Nuxt dan Vue