अंतर्राष्ट्रीयकरण (i18n)

Starlight बहुभाषी साइटों के लिए अंतर्निहित समर्थन प्रदान करता है, जिसमें रूटिंग, फ़ॉलबैक कंटेंट और पूर्ण दाएं से बाएं (RTL) भाषा समर्थन शामिल है।

i18n कॉन्फ़िगर करें

1. Starlight एकीकरण में locales और defaultLocale पास करके Starlight को उन भाषाओं के बारे में बताएं जिनका आप समर्थन करते हैं:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'मेरे दस्तावेज़',
         // इस साइट के लिए अंग्रेजी को डिफ़ॉल्ट भाषा के रूप में सेट करें।
         defaultLocale: 'en',
         locales: {
           // `src/content/docs/en/` में अंग्रेजी दस्तावेज़
           en: {
             label: 'English',
           },
           // `src/content/docs/zh-cn/` में सरलीकृत चीनी दस्तावेज़
           'zh-cn': {
             label: '简体中文',
             lang: 'zh-CN',
           },
           // `src/content/docs/ar/` में अरबी दस्तावेज़
           ar: {
             label: 'العربية',
             dir: 'rtl',
           },
         },
       }),
     ],
   });

   आपके defaultLocale का उपयोग फ़ॉलबैक कंटेंट और UI लेबल के लिए किया जाएगा, इसलिए वह भाषा चुनें जिसमें आप कंटेंट लिखने की सबसे अधिक संभावना रखते हैं, या जिसके लिए आपके पास पहले से ही कंटेंट है।

2. src/content/docs/ में प्रत्येक भाषा के लिए एक निर्देशिका बनाएं। उदाहरण के लिए, ऊपर दिखाए गए कॉन्फ़िगरेशन के लिए, निम्नलिखित फ़ोल्डर बनाएं:

   • Directorysrc/

     • Directorycontent/

       • Directorydocs/

         • Directoryar/

           • …
         • Directoryen/

           • …
         • Directoryzh-cn/

           • …

3. अब आप अपनी भाषा निर्देशिकाओं में कंटेंट फ़ाइलें जोड़ सकते हैं। सभी भाषाओं में पेजों को संबद्ध करने के लिए एक ही फ़ाइल नाम का उपयोग करें और फ़ॉलबैक कंटेंट अनुवाद सूचनाएं और बहुत कुछ सहित Starlight के i18n सुविधाओं के पूर्ण सेट का लाभ उठाएं।

   उदाहरण के लिए, अरबी और अंग्रेजी के मुखपेज को दर्शाने के लिए क्रमशः ar/index.md और en/index.md बनाएं।

अधिक उन्नत i18n परिदृश्यों के लिए, Starlight Astro के i18n कॉन्फ़िगरेशन विकल्प का उपयोग करके अंतर्राष्ट्रीयकरण को कॉन्फ़िगर करने का भी समर्थन करता है।

root locale का उपयोग करें

आप किसी भाषा को उसके पथ में बिना किसी i18n उपसर्ग के प्रस्तुत करने के लिए “root” locale का उपयोग कर सकते हैं। उदाहरण के लिए, यदि अंग्रेजी आपका मूल स्थान है, तो एक अंग्रेजी पेज पथ /en/about के बजाय /about जैसा दिखेगा।

root locale सेट करने के लिए, अपने locales कॉन्फ़िगरेशन में root कुंजी का उपयोग करें। यदि root locale आपकी कंटेंट के लिए डिफ़ॉल्ट locale भी है, तो defaultLocale को हटा दें या इसे “root” पर सेट करें।

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'मेरे दस्तावेज़',
      defaultLocale: 'root', // वैकल्पिक
      locales: {
        root: {
          label: 'English',
          lang: 'en', // रूट स्थानों के लिए भाषा विशेषता आवश्यक है
        },
        'zh-cn': {
          label: '简体中文',
          lang: 'zh-CN',
        },
      },
    }),
  ],
});

root locale का उपयोग करते समय, उस भाषा के पेजों को समर्पित भाषा फ़ोल्डर के बजाय src/content/docs/ में रखें। उदाहरण के लिए, उपरोक्त कॉन्फ़िगरेशन का उपयोग करते समय अंग्रेजी और चीनी के लिए होम पेज फ़ाइलें यहां दी गई हैं:

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • index.md
      • Directoryzh-cn/

        • index.md

एकभाषी साइटें

डिफ़ॉल्ट रूप से, Starlight एक एकभाषी (अंग्रेजी) साइट है। किसी अन्य भाषा में एकल भाषा साइट बनाने के लिए, इसे अपने locales कॉन्फ़िगरेशन में root के रूप में सेट करें:

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'मेरे दस्तावेज़',
      locales: {
        root: {
          label: '简体中文',
          lang: 'zh-CN',
        },
      },
    }),
  ],
});

यह आपको भाषा पिकर जैसी बहु-भाषा साइटों के लिए अन्य अंतर्राष्ट्रीयकरण सुविधाओं को सक्षम किए बिना Starlight की डिफ़ॉल्ट भाषा को ओवरराइड करने की अनुमति देता है।

फ़ॉलबैक कंटेंट

Starlight आपसे अपेक्षा करता है कि आप अपनी सभी भाषाओं में समान पेज बनाएं। उदाहरण के लिए, यदि आपके पास en/about.md फ़ाइल है, तो आपके द्वारा समर्थित प्रत्येक अन्य भाषा के लिए about.md बनाएं। यह Starlight को उन पेजों के लिए स्वचालित फ़ॉलबैक कंटेंट प्रदान करने की अनुमति देता है जिनका अभी तक अनुवाद नहीं किया गया है।

यदि किसी भाषा के लिए अनुवाद अभी तक उपलब्ध नहीं है, तो Starlight पाठकों को उस पेज की कंटेंट डिफ़ॉल्ट भाषा में दिखाएगा (defaultLocale के माध्यम से सेट होकर)। उदाहरण के लिए, यदि आपने अभी तक अपने About पेज का फ्रेंच संस्करण नहीं बनाया है और आपकी डिफ़ॉल्ट भाषा अंग्रेजी है, तो /fr/about पर आने वाले दर्शकों को /en/about से अंग्रेजी कंटेंट इस सूचना के साथ दिखाई देगी कि इस पेज पर है अभी तक अनुवाद नहीं किया गया है। यह आपको अपनी डिफ़ॉल्ट भाषा में कंटेंट जोड़ने में मदद करता है और फिर जब आपके अनुवादकों के पास समय हो तो उसका उत्तरोत्तर अनुवाद करने में मदद करता है।

साइट शीर्षक का अनुवाद करें

डिफ़ॉल्ट रूप से, Starlight सभी भाषाओं के लिए समान साइट शीर्षक का उपयोग करेगा। यदि आपको प्रत्येक स्थान के लिए शीर्षक को अनुकूलित करने की आवश्यकता है, तो आप Starlight के विकल्पों में title के लिए एक ऑब्जेक्ट पास कर सकते हैं:

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'मेरे दस्तावेज़',
      title: {
        hi: 'मेरे दस्तावेज़',
        'zh-CN': '我的文档',
      },
      defaultLocale: 'hi',
      locales: {
        hi: { label: 'Hindi' },
        'zh-cn': { label: '简体中文', lang: 'zh-CN' },
      },
    }),
  ],
});

Starlight के UI का अनुवाद करें

अनुवादित कंटेंट फ़ाइलों को होस्ट करने के अलावा, Starlight आपको डिफ़ॉल्ट UI स्ट्रिंग्स (उदाहरण के लिए कंटेंट तालिका में “इस पेज पर” शीर्षक) का अनुवाद करने की अनुमति देता है ताकि आपके पाठक आपकी साइट को पूरी तरह से चयनित भाषा में अनुभव कर सकें।

अंग्रेज़ी, अरबी, इंडोनेशियाई, इतालवी, कोरियाई, गैलिशियन, चीनी, चीनी (ताइवान), चेक, जर्मन, जापानी, डच, डेनिश, तुर्की, नॉर्वेजियाई बोकमाल, पुर्तगाली, पोलिश, फ़ारसी, फ़्रेंच, यूक्रेनियाई, रूसी, रोमानियाई, वियतनामी, स्पेनिश, स्लोवाक, स्वीडिश, हिन्दी, और हिब्रू अनुवादित UI स्ट्रिंग्स सामने से मिलती हैं , और हम अधिक डिफ़ॉल्ट भाषाएँ जोड़ने के लिए योगदान का स्वागत करते हैं।

आप i18n डेटा संग्रह के माध्यम से उन अतिरिक्त भाषाओं के लिए अनुवाद प्रदान कर सकते हैं जिनका आप समर्थन करते हैं - या हमारे डिफ़ॉल्ट लेबल को ओवरराइड कर सकते हैं।

1. i18n डेटा संग्रह को src/content/config.ts में कॉन्फ़िगर करें यदि यह पहले से कॉन्फ़िगर नहीं है:

   src/content/config.ts

   import { defineCollection } from 'astro:content';
   import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
   
   export const collections = {
     docs: defineCollection({ schema: docsSchema() }),
     i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
   };

2. प्रत्येक अतिरिक्त locale के लिए src/content/i18n/ में एक JSON फ़ाइल बनाएं, जिसके लिए आप UI अनुवाद स्ट्रिंग प्रदान करना चाहते हैं। उदाहरण के लिए, यह अरबी और सरलीकृत चीनी के लिए अनुवाद फ़ाइलें जोड़ेगा:

   • Directorysrc/

     • Directorycontent/

       • Directoryi18n/

         • ar.json
         • zh-CN.json

3. जिन कुंजियों का आप JSON फ़ाइलों में अनुवाद करना चाहते हैं उनके लिए अनुवाद जोड़ें। केवल मूल्यों का अनुवाद करें, कुंजियाँ अंग्रेजी में छोड़ें (जैसे की "search.label": "Buscar") ये मौजूदा स्ट्रिंग्स के अंग्रेजी डिफ़ॉल्ट हैं जिन्हे Starlight प्रदर्शित करता हैं :

   {
     "skipLink.label": "Skip to content",
     "search.label": "Search",
     "search.ctrlKey": "Ctrl",
     "search.cancelLabel": "Cancel",
     "search.devWarning": "Search is only available in production builds. \nTry building and previewing the site to test it out locally.",
     "themeSelect.accessibleLabel": "Select theme",
     "themeSelect.dark": "Dark",
     "themeSelect.light": "Light",
     "themeSelect.auto": "Auto",
     "languageSelect.accessibleLabel": "Select language",
     "menuButton.accessibleLabel": "Menu",
     "sidebarNav.accessibleLabel": "Main",
     "tableOfContents.onThisPage": "On this page",
     "tableOfContents.overview": "Overview",
     "i18n.untranslatedContent": "This content is not available in your language yet.",
     "page.editLink": "Edit page",
     "page.lastUpdated": "Last updated:",
     "page.previousLink": "Previous",
     "page.nextLink": "Next",
     "page.draft": "This content is a draft and will not be included in production builds.",
     "404.text": "Page not found. Check the URL or try using the search bar.",
     "aside.note": "Note",
     "aside.tip": "Tip",
     "aside.caution": "Caution",
     "aside.danger": "Danger",
     "fileTree.directory": "Directory",
     "builtWithStarlight.label": "Built with Starlight"
   }

   Starlight के कोड ब्लॉक Expressive Code लाइब्रेरी द्वारा संचालित होते हैं। आप expressiveCode कुंजियों का उपयोग करके उसी JSON फ़ाइल में इसके UI स्ट्रिंग्स के लिए अनुवाद सेट कर सकते हैं:

   {
     "expressiveCode.copyButtonCopied": "Copied!",
     "expressiveCode.copyButtonTooltip": "Copy to clipboard",
     "expressiveCode.terminalWindowFallbackTitle": "Terminal window"
   }

   Starlight का खोज मोडल Pagefind लाइब्रेरी द्वारा संचालित है। आप pagefind कुंजियों का उपयोग करके उसी JSON फ़ाइल में Pagefind के UI के लिए अनुवाद सेट कर सकते हैं:

   {
     "pagefind.clear_search": "Clear",
     "pagefind.load_more": "Load more results",
     "pagefind.search_label": "Search this site",
     "pagefind.filters_label": "Filters",
     "pagefind.zero_results": "No results for [SEARCH_TERM]",
     "pagefind.many_results": "[COUNT] results for [SEARCH_TERM]",
     "pagefind.one_result": "[COUNT] result for [SEARCH_TERM]",
     "pagefind.alt_search": "No results for [SEARCH_TERM]. Showing results for [DIFFERENT_TERM] instead",
     "pagefind.search_suggestion": "No results for [SEARCH_TERM]. Try one of the following searches:",
     "pagefind.searching": "Searching for [SEARCH_TERM]..."
   }

अनुवाद स्कीमा विस्तृत करें

i18nSchema() विकल्पों में विस्तार सेट करके अपनी साइट के अनुवाद शब्दकोशों में कस्टम कुंजियाँ जोड़ें। निम्नलिखित उदाहरण में, डिफ़ॉल्ट कुंजियों में एक नई, वैकल्पिक custom.label कुंजी जोड़ी गयी है:

src/content/config.ts

import { defineCollection, z } from 'astro:content';
import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';

export const collections = {
  docs: defineCollection({ schema: docsSchema() }),
  i18n: defineCollection({
    type: 'data',
    schema: i18nSchema({
      extend: z.object({
        'custom.label': z.string().optional(),
      }),
    }),
  }),
};

Astro दस्तावेज़ में “एक संग्रह स्कीमा को परिभाषित करना” में कंटेंट संग्रह स्कीमा के बारे में और जानें।

वर्तमान लोकेल तक पहुँचना

आप .astro अवयवों में वर्तमान लोकेल पढ़ने के लिए Astro.currentLocale का उपयोग कर सकते हैं।

निम्नलिखित उदाहरण वर्तमान लोकेल को पढ़ता है और इसका उपयोग वर्तमान भाषा में एक परिचय पेज के लिए लिंक बनाने के लिए करता है:

src/components/AboutLink.astro

<a href={`/${Astro.currentLocale}/about`}>के बारे में</a>