Intlayer ile Vite and Vue çevirin | Uluslararasılaştırma (i18n)

GitHub'da Uygulama Şablonu'na bakın.

Neden alternatifler yerine Intlayer?

'vue-i18n' veya 'i18next' gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

Vite ve Vue Uygulamasında Intlayer Kurulumu İçin Adım Adım Kılavuz

GitHub'da Uygulama Şablonu'na bakın.

1. 1

   Bağımlılıkları Kurma

   Gerekli paketleri npm kullanarak kurun:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

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

   • intlayer

     Yapılandırma yönetimi, çeviri, içerik bildirimi, dönüştürme ve CLI komutları için uluslararasılaştırma araçları sağlayan çekirdek paket.

   • vue-intlayer Vue uygulamasıyla Intlayer'ı entegre eden paket. Vue uluslararasılaştırması için bağlam sağlayıcıları ve composables sağlar.

   • vite-intlayer Vite bundler ile Intlayer'ı entegre etmek için Vite eklentisini ve kullanıcının tercih ettiği yerel ayarı algılamak, çerezleri yönetmek ve URL yönlendirmesi yapmak için middleware'i içerir.

2. 2

   Projenizi Yapılandırma

   Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Diğer yerel ayarlarınız
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'leri, middleware yönlendirmesini, çerez adlarını, içerik bildiriminizin konumunu ve uzantısını, Intlayer günlüklerini konsolda devre dışı bırakmayı ve daha fazlasını ayarlayabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

3. 3

   Intlayer'ı Vite Yapılandırmanıza Entegre Etme

   Yapılandırmanıza intlayer eklentisini ekleyin.

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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()],
   });

   intlayer() Vite eklentisi, Vite ile Intlayer'ı entegre etmek için kullanılır. İçerik bildirimi dosyalarının oluşturulmasını sağlar ve bunları geliştirme modunda izler. Ayrıca Intlayer ortam değişkenlerini Vite uygulaması içinde tanımlar. Ek olarak, performansı optimize etmek için takma adlar sağlar.

4. 4

   İçeriğinizi Bildirin

   Çevirileri depolamak için içerik bildiriminizi oluşturun ve yönetin:

   src/helloWorld.content.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
       officialStarter: t({
         en: "the official Vue + Vite starter",
         fr: "le starter officiel Vue + Vite",
         es: "el starter oficial Vue + Vite",
       }),
       learnMore: t({
         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({
         en: "Vue Docs Scaling up Guide",
         fr: "Vue Docs Scaling up Guide",
         es: "Vue Docs Scaling up Guide",
       }),
       readTheDocs: t({
         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;

   İçerik bildiriminiz uygulamanızın herhangi bir yerine yerleştirilebilir, yeter ki contentDir dizinine dahil edilsin (varsayılan olarak ./src). Ve içerik bildirimi dosya uzantısı ile eşleşsin (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Daha fazla ayrıntı için içerik bildirimi dokümantasyonuna bakın.

5. 5

   Kodunuzda Intlayer'ı Kullanın

   Vue uygulamanız boyunca Intlayer'ın uluslararasılaştırma özelliklerine erişmek için, ana dosyanızda Intlayer singleton örneğini kaydetmeniz gerekir. Bu adım, çevirilerin bileşen ağacınızın herhangi bir yerinde erişilebilir olmasını sağlamak için çok önemlidir.

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { createApp } from "vue";import { intlayer } from "vue-intlayer";import App from "./App.vue";import "./style.css";const app = createApp(App);// Üst düzeyde sağlayıcıyı enjekte edinapp.use(intlayer);// Uygulamayı bağlayınapp.mount("#app");

   İçerik sözlüklerinize uygulamanız boyunca erişin ve useIntlayer composables kullanarak bir ana Vue bileşeni oluşturun:

   src/HelloWord.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <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>

   Intlayer'da İçeriğe Erişim

   Intlayer, içeriğinize erişmek için farklı API'ler sunar:

   • Bileşen tabanlı sözdizimi (önerilen): İçeriği Intlayer Düğümü olarak işlemek için <myContent /> veya <Component :is="myContent" /> sözdizimini kullanın. Bu, Görsel Düzenleyici ve CMS ile sorunsuz bir şekilde entegre olur.

   • Dize tabanlı sözdizimi: İçeriği düz metin olarak işlemek için {{ myContent }} kullanın, Görsel Düzenleyici desteği olmadan.

   • Ham HTML sözdizimi: İçeriği ham HTML olarak işlemek için <div v-html="myContent" /> kullanın, Görsel Düzenleyici desteği olmadan.

   • Yıkım sözdizimi: useIntlayer composable, içeriği erişirken reaktifliği koruyan bir Proxy döndürür.

     • const content = useIntlayer("myContent"); Ve {{ content.myContent }} / <content.myContent /> kullanın.
     • Veya const { myContent } = useIntlayer("myContent"); Ve {{ myContent}} / <myContent/> kullanarak içeriği yıkın.

   Eğer uygulamanız zaten mevcutsa, binlerce bileşeni bir saniye içinde dönüştürmek için Intlayer Compiler'ı extract komutu ile birlikte kullanabilirsiniz.

6. 6

   İçeriğinizin Dilini Değiştirin

   İsteğe bağlı

   İçeriğinizin dilini değiştirmek için useLocale composable tarafından sağlanan setLocale işlevini kullanabilirsiniz. Bu işlev, uygulamanın yerel ayarını ayarlamanıza ve içeriği buna göre güncellemenize olanak tanır.

   Dilleri değiştirmek için bir bileşen oluşturun:

   src/components/LocaleSwitcher.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <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";// Yerel ayar bilgilerini ve setLocale işlevini alınconst { locale, availableLocales, setLocale } = useLocale();// Seçilen yerel ayarı bir ref ile takip edinconst selectedLocale = ref(locale.value);// Seçim değiştiğinde yerel ayarı güncelleyinconst changeLocale = () => setLocale(selectedLocale.value);// Seçilen yerel ayarı genel yerel ayar ile senkronize tutunwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

   Ardından, bu bileşeni App.vue'nuzda kullanın:

   src/App.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <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"); // İlgili intlayer bildirim dosyası oluşturun</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. 7

   Uygulamanıza Yerelleştirilmiş Yönlendirme Ekleyin

   İsteğe bağlı

   Vue uygulamasında yerelleştirilmiş yönlendirme eklemek genellikle yerel ayar önekleriyle Vue Router kullanmayı içerir. Bu, her dil için benzersiz rotalar oluşturur, SEO ve SEO dostu URL'ler için kullanışlıdır. Örnek:

   plaintext

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

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

   Öncelikle Vue Router'ı kurun:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install vue-routernpx intlayer init

   Ardından, yerel ayar tabanlı yönlendirmeyi yöneten bir yönlendirici yapılandırması oluşturun:

   src/router/index.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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';/** * Yerel ayar özel yollarla ve meta verilerle rotaları bildirin. */const routes = localeFlatMap(({ urlPrefix, locale }) => [  {    path: `${urlPrefix}/`,    name: `Root-${locale}`,    component: RootView,    meta: {      locale,    },  },  {    path: `${urlPrefix}/home`,    name: `Home-${locale}`,    component: HomeView,    meta: {      locale,    },  },]);// Yönlendirici örneğini oluşturexport const router = createRouter({  history: createWebHistory(),  routes,});// Yerel ayar yönetimi için navigasyon koruması ekleyinrouter.beforeEach((to, _from, next) => {  const client = createIntlayerClient();  const metaLocale = to.meta.locale as Locale;  // Rota meta'sında tanımlanan yerel ayarı yeniden kullan  client.setLocale(metaLocale);  next();});

   Ad, tüm rotalar arasında benzersiz olmalı ve çakışmaları önlemek için yönlendirme ve bağlantıyı sağlamak için kullanılır.

   Ardından, yönlendiriciyi main.js dosyanızda kaydedin:

   src/main.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { createApp } from "vue";import App from "./App.vue";import { router } from "./router";import "./style.css";const app = createApp(App);// Uygulamaya yönlendiriciyi ekleyinapp.use(router);// Uygulamayı bağlayınapp.mount("#app");

   Ardından, RouterView bileşenini işlemek için App.vue dosyanızı güncelleyin. Bu bileşen, geçerli rota için eşleşen bileşeni görüntüler.

   src/App.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

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

   Paralel olarak, uygulamanıza sunucu tarafı yönlendirme eklemek için intlayerProxy'i de kullanabilirsiniz. Bu eklenti, URL'ye göre geçerli yerel ayarı otomatik olarak algılar ve uygun yerel ayar çerezini ayarlar. Hiç yerel ayar belirtilmezse, eklenti kullanıcının tarayıcı dil tercihlerine göre en uygun yerel ayarı belirler. Hiç yerel ayar algılanmazsa, varsayılan yerel ayara yönlendirir.

   Not: Üretimde intlayerProxy'i kullanmak için vite-intlayer paketini devDependencies'den dependencies'e taşımalısınız.

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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. 8

   Yerel ayar değiştiğinde URL'yi değiştirin

   İsteğe bağlı

   Kullanıcı dili değiştirdiğinde URL'yi otomatik olarak güncellemek için LocaleSwitcher bileşenini Vue Router kullanacak şekilde değiştirebilirsiniz:

   src/components/LocaleSwitcher.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <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";// Vue Router'ı alınconst router = useRouter();// Yerel ayar bilgilerini ve setLocale işlevini alınconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // Geçerli rotayı alın ve yerelleştirilmiş bir URL oluşturun    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // Sayfayı yeniden yüklemeden yerelleştirilmiş rotaya gidin    router.push(localizedPath);  },});// Seçilen yerel ayarı bir ref ile takip edinconst selectedLocale = ref(locale.value);// Seçim değiştiğinde yerel ayarı güncelleyinconst changeLocale = () => {  setLocale(selectedLocale.value);};// Seçilen yerel ayarı genel yerel ayar ile senkronize tutunwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

   İpucu: Daha iyi SEO ve erişilebilirlik için, dil özel sayfalarına bağlanmak üzere <a href="/fr/home" hreflang="fr"> gibi etiketleri kullanın. Bu, arama motorlarının dil özel URL'lerini keşfetmesine ve uygun şekilde indekslemesine olanak tanır. SPA davranışını korumak için varsayılan navigasyonu @click.prevent ile önleyin, useLocale ile yerel ayarı değiştirin ve Vue Router kullanarak programatik olarak gidin.

   html

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <ol>  <li>    <a      hreflang="x-default"      aria-label="Switch to English"      target="_self"      aria-current="page"      href="/doc/get-started"    >      <div>        <span dir="ltr" lang="en">English</span>        <span>English</span>        <span>EN</span>      </div>    </a>  </li>  <li>    <a      hreflang="es"      aria-label="Switch to Spanish"      target="_self"      href="/es/doc/get-started"    >      <div>        <span dir="ltr" lang="es">Español</span>        <span>Spanish</span>        <span>ES</span>      </div>    </a>  </li></ol>

9. 9

   HTML Dil ve Yön Niteliklerini Değiştirin

   İsteğe bağlı

   Uygulamanız birden fazla dili desteklediğinde, <html> etiketinin lang ve dir niteliklerini geçerli yerel ayar ile eşleşecek şekilde güncellemek önemlidir. Bunu yapmak şunları sağlar:

   • Erişilebilirlik: Ekran okuyucular ve yardımcı teknolojiler, içeriği doğru şekilde telaffuz etmek ve yorumlamak için doğru lang niteliğine güvenir.
   • Metin İşleme: dir (yön) niteliği, metnin doğru sırada işlenmesini sağlar (örneğin, İngilizce için soldan sağa, Arapça veya İbranice için sağdan sola), okunabilirlik için gereklidir.
   • SEO: Arama motorları, sayfanızın dilini belirlemek için lang niteliğini kullanır, arama sonuçlarında doğru yerelleştirilmiş içeriği sunmaya yardımcı olur.

   Yerel ayar değiştiğinde bu nitelikleri dinamik olarak güncellemek, tüm desteklenen diller için tutarlı ve erişilebilir bir deneyim sağlar.

   src/composables/useI18nHTMLAttributes.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { watch } from "vue";import { useLocale } from "vue-intlayer";import { getHTMLTextDir } from "intlayer";/** * Geçerli yerel ayara göre HTML <html> etiketinin `lang` ve `dir` niteliklerini günceller. * * @example * // App.vue'nuzda veya genel bir bileşende * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes' * * useI18nHTMLAttributes() */export const useI18nHTMLAttributes = () => {  const { locale } = useLocale();  // Yerel ayar değiştiğinde HTML niteliklerini güncelleyin  watch(    () => locale.value,    (newLocale) => {      if (!newLocale) return;      // Dil niteliğini güncelleyin      document.documentElement.lang = newLocale;      // Metin yönünü ayarlayın (çoğu dil için ltr, Arapça, İbranice vb. için rtl)      document.documentElement.dir = getHTMLTextDir(newLocale);    },    { immediate: true }  );};

   Bu composable'ı App.vue'nuzda veya genel bir bileşende kullanın:

   src/App.vue

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// Geçerli yerel ayara göre HTML niteliklerini uygulayınuseI18nHTMLAttributes();</script><template>  <!-- Uygulama şablonunuz --></template>

10. 10

    Yerelleştirilmiş Bağlantı Bileşeni Oluşturun

    İsteğe bağlı

    Uygulamanızın navigasyonunun geçerli yerel ayarı saygı gösterdiğinden emin olmak için özel bir Link bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'leri otomatik olarak geçerli dille önekler, böylece. Örneğin, bir Fransızca konuşan kullanıcı "Hakkında" sayfasına giden bir bağlantıya tıkladığında, /about yerine /fr/about'a yönlendirilir.

    Bu davranış çeşitli nedenlerle kullanışlıdır:

    • SEO ve Kullanıcı Deneyimi: Yerelleştirilmiş URL'ler, arama motorlarının dil özel sayfalarını doğru şekilde indekslemesine yardımcı olur ve kullanıcılara tercih ettikleri dilde içerik sunar.
    • Tutarlılık: Uygulamanız boyunca yerelleştirilmiş bir bağlantı kullanarak, navigasyonun aynı yerel ayar bağlamında kalmasını garanti edersiniz, beklenmedik dil anahtarlarını önlersiniz.
    • Bakım Kolaylığı: URL mantığını tek bir bileşende merkezileştirmek, yönetimini basitleştirir, uygulamanız büyüdükçe kod tabanınızı daha kolay yönetilebilir hale getirir.

    src/components/Link.vue

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    <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();// Bağlantının harici olup olmadığını kontrol edinconst isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));// Dahili bağlantılar için yerelleştirilmiş bir href oluşturunconst localizedHref = computed(() =>  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>

    Vue Router ile kullanmak için yönlendiriciye özel bir sürüm oluşturun:

    src/components/RouterLink.vue

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    <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();// Router-link için yerelleştirilmiş to-prop oluşturunconst localizedTo = computed(() => {  if (typeof props.to === "string") {    return getLocalizedUrl(props.to, locale.value);  } else {    // 'to' bir nesne ise, yol özelliğini yerelleştirin    return {      ...props.to,      path: getLocalizedUrl(props.to.path ?? "/", locale.value),    };  }});</script>

    Uygulamanızda bu bileşenleri kullanın:

    src/App.vue

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    <template>  <div>    <!-- Vue router  -->    <RouterLink to="/">Kök</RouterLink>    <RouterLink to="/home">Ana Sayfa</RouterLink>    <!-- Diğer -->    <Link href="/">Kök</Link>    <Link href="/home">Ana Sayfa</Link>  </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>

11. 11

    Markdown İşleyin

    İsteğe bağlı

    Intlayer, Vue uygulamanızda Markdown içeriğini doğrudan işleme desteği sağlar. Varsayılan olarak, Markdown düz metin olarak kabul edilir. Markdown'ı zengin HTML'ye dönüştürmek için markdown-it, bir Markdown ayrıştırıcısı entegre edebilirsiniz.

    Bu, çevirileriniz listeler, bağlantılar veya vurgu gibi biçimlendirilmiş içerik içerdiğinde özellikle kullanışlıdır.

    Varsayılan olarak Intlayer markdown'ı dize olarak işler. Ancak Intlayer, markdown'ı HTML'ye dönüştürmek için installIntlayerMarkdown işlevini kullanarak markdown'ı işleme konusunda bir yol sağlar.

    Markdown içeriğini intlayer paketi kullanarak nasıl bildireceğinizi görmek için markdown dokümantasyonuna bakın.

    main.ts

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    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, // HTML etiketlerine izin ver  linkify: true, // URL'leri otomatik olarak bağla  typographer: true, // Akıllı tırnaklar, tireler vb. etkinleştir});// Intlayer'a markdown'ı HTML'ye dönüştürmesi gerektiğinde md.render() kullanmasını söyleinstallIntlayerMarkdown(app, (markdown) => {  const html = md.render(markdown);  return h("div", { innerHTML: html });});

    Kaydedildikten sonra, bileşen tabanlı sözdizimini kullanarak Markdown içeriğini doğrudan görüntüleyebilirsiniz:

    vue

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

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

12. 12

    Bileşenlerinizin içeriğini çıkarın

    İsteğe bağlı

    Mevcut bir kod tabanınız varsa, binlerce dosyayı dönüştürmek zaman alıcı olabilir.

    Bu süreci kolaylaştırmak için Intlayer, bileşenlerinizi dönüştürmek ve içeriği çıkarmak için bir derleyici / çıkarıcı sunar.

    Kurulum için intlayer.config.ts dosyanıza bir compiler bölümü ekleyebilirsiniz:

    intlayer.config.ts

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Yapılandırmanızın geri kalanı
      compiler: {
        /**
         * Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.
         */
        enabled: true,
    
        /**
         * Çıktı dosyalarının yolunu tanımlar
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir. Bu sayede derleyici, uygulamayı dönüştürmek için yalnızca bir kez çalıştırılabilir ve ardından kaldırılabilir.
         */
        saveComponents: false,
    
        /**
         * Sözlük anahtarı öneki
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;

    Çıkarma komutuBabel derleyicisi

    Bileşenlerinizi dönüştürmek ve içeriği çıkarmak için çıkarıcıyı çalıştırın

    bash

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    npx intlayer extract

    vite.config.ts dosyanızı intlayerCompiler eklentisini içerecek şekilde güncelleyin:

    vite.config.ts

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Derleyici eklentisini ekler ],});

    bash

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    npm run build # Veya npm run dev

TypeScript Yapılandırın

Intlayer, modül genişletmesi kullanarak TypeScript avantajlarından yararlanır.

Otomatik oluşturulan türleri TypeScript yapılandırmanıza dahil edin.

{  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil et  ],}

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaları Git deponuza kaydetmekten kaçınmak için bunları yok saymanız önerilir. Bu, bunları Git deponuza kaydetmekten kaçınmanıza olanak tanır.

Bunu yapmak için .gitignore dosyanıza aşağıdaki talimatları ekleyin:

#  Intlayer tarafından oluşturulan dosyaları yok say.intlayer

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Uzantısı'nı kurun.

VS Code Marketplace'ten yükleyin

Bu uzantı şunları sağlar:

• Çeviri anahtarları için otomatik tamamlama.
• Eksik çeviriler için gerçek zamanlı hata algılama.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

Uzantıyı kullanma hakkında daha fazla ayrıntı için Intlayer VS Code Uzantısı dokümantasyonuna bakın.

(İsteğe bağlı) Sitemap ve robots.txt (build zamanı üretimi)

Intlayer, generateSitemap ve getMultilingualUrls ile tarayıcılar için çok dilli sitemap.xml ve robots.txt üretip bunları public/ klasörüne otomatik yazmanıza yardımcı olur. Genelde Vite’tan önce küçük bir Node betiği çalıştırılır (ör. npm predev / prebuild kancaları).

Sitemap

Intlayer sitemap oluşturucusu yerel ayarlarınıza uyar ve tarayıcılar için metadata ekler.

Üretilen sitemap xhtml:link (hreflang) ad alanını destekler. Düz URL listesi yerine, her sayfanın tüm dil sürümleri çift yönlü bağlanır (ör. /about, /fr/about veya /about?lang=fr - yönlendirme moduna bağlı).

Robots.txt

getMultilingualUrls kullanarak Disallow kurallarının hassas yolların tüm yerelleştirilmiş varyantlarını kapsamasını sağlayın.

1. Proje köküne generate-seo.mjs ekleyin

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.");

Betik intlayer içe aktarabilmeli; paket kurulu olmalı. Üretimde ortam değişkeni SITE_URL ayarlayın (ör. CI).

Node ESM için generate-seo.mjs tercih edin. generate-seo.js kullanıyorsanız package.json içinde "type": "module" veya ESM’yi başka şekilde etkinleştirin.

2. Betiği Vite’tan önce çalıştırın

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

pnpm veya yarn kullanıyorsanız komutları uyarlayın. CI’dan da çağrılabilir.

Daha Fazla İlerle

Daha fazla ilerlemek için görsel düzenleyici veya içeriğinizi CMS kullanarak dışa aktarmayı uygulayabilirsiniz.