\n\n\n```\n\n \n \n\nWith `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n
\n

{$content.welcomeMessage}

\n
\n```\n\n \n \n\nWith `preact-intlayer`, you can use translations in Preact components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst MyComponent: FC = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n
\n

{content.welcomeMessage}

\n
\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `solid-intlayer`, you can use translations in SolidJS components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst MyComponent: Component = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n
\n

{content.welcomeMessage}

\n
\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `angular-intlayer`, you can use translations in Angular components. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my-component\",\n template: `\n
\n

{{ content().welcomeMessage }}

\n
\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"multi_lang\");\n}\n```\n\n \n \n\nWith `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"multi_lang\").onChange((newContent) => {\n document.getElementById(\"welcome-message\")!.textContent = String(\n newContent.welcomeMessage\n );\n});\n\n// Initial render\ndocument.getElementById(\"welcome-message\")!.textContent = String(\n content.welcomeMessage\n);\n```\n\n \n\n\n## कस्टम कंटेंट ऑब्जेक्ट्स\n\n`intlayer` अनुवाद के लिए कस्टम कंटेंट ऑब्जेक्ट्स का समर्थन करता है, जिससे आप अधिक जटिल संरचनाओं को परिभाषित कर सकते हैं और टाइप सुरक्षा सुनिश्चित कर सकते हैं। यहाँ एक कस्टम ऑब्जेक्ट के साथ उदाहरण दिया गया है:\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { t, type Dictionary } from \"intlayer\";\n\ninterface ICustomContent {\n title: string;\n content: string;\n}\n\nconst customContent = {\n key: \"custom_content\",\n content: {\n profileText: t({\n en: {\n title: \"Page Title\",\n content: \"Page Content\",\n },\n fr: {\n title: \"Titre de la Page\",\n content: \"Contenu de la Page\",\n },\n es: {\n title: \"Título de la Página\",\n content: \"Contenido de la Página\",\n },\n }),\n },\n} satisfies Dictionary;\n\nexport default customContent;\n```\n\n```json fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"custom_content\",\n \"content\": {\n \"profileText\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": {\n \"title\": \"Page Title\",\n \"content\": \"पृष्ठ सामग्री\"\n },\n \"fr\": {\n \"title\": \"पृष्ठ का शीर्षक\",\n \"content\": \"पृष्ठ की सामग्री\"\n },\n \"es\": {\n \"title\": \"पृष्ठ का शीर्षक\",\n \"content\": \"पृष्ठ की सामग्री\"\n }\n }\n }\n }\n}\n```\n","description":"अपनी बहुभाषी वेबसाइट में अनुवाद कैसे घोषित करें और उपयोग करें यह जानें। इस ऑनलाइन दस्तावेज़ में दिए गए चरणों का पालन करके कुछ ही मिनटों में अपने प्रोजेक्ट को सेटअप करें।","url":"https://intlayer.org/hi/doc/concept/content/translation","datePublished":"2024-08-11","dateModified":"2025-06-29","version":"5.5.10","keywords":"अनुवाद, अंतरराष्ट्रीयकरण, दस्तावेज़ीकरण, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"डेवलपर्स, सामग्री प्रबंधक"}}
    Author:
    Creation:2024-08-11Last update:2025-06-29

    अनुवाद

    अनुवाद परिभाषित करना

    intlayer में t फ़ंक्शन आपको कई भाषाओं में सामग्री घोषित करने की अनुमति देता है। यह फ़ंक्शन टाइप सुरक्षा सुनिश्चित करता है, यदि कोई अनुवाद गायब हो तो त्रुटि उत्पन्न करता है, जो विशेष रूप से TypeScript वातावरण में उपयोगी होता है।

    यहाँ अनुवादों के साथ सामग्री घोषित करने का एक उदाहरण दिया गया है।

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

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

    स्थानीय सेटिंग्स के लिए कॉन्फ़िगरेशन

    सही अनुवाद प्रबंधन सुनिश्चित करने के लिए, आप intlayer.config.ts में स्वीकार किए गए स्थानीय सेटिंग्स को कॉन्फ़िगर कर सकते हैं। यह कॉन्फ़िगरेशन आपको उन भाषाओं को परिभाषित करने की अनुमति देता है जिन्हें आपका एप्लिकेशन सपोर्ट करता है:

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

    React कंपोनेंट्स में अनुवाद का उपयोग करना

    With react-intlayer, you can use translations in React components. Here's an example:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

    This component fetches the corresponding translation based on the current locale set in your application.

    कस्टम कंटेंट ऑब्जेक्ट्स

    intlayer अनुवाद के लिए कस्टम कंटेंट ऑब्जेक्ट्स का समर्थन करता है, जिससे आप अधिक जटिल संरचनाओं को परिभाषित कर सकते हैं और टाइप सुरक्षा सुनिश्चित कर सकते हैं। यहाँ एक कस्टम ऑब्जेक्ट के साथ उदाहरण दिया गया है:

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

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;
    सामग्री घोषणाबहुवचन