Intlayer में, लिंग-आधारित सामग्री gender फ़ंक्शन के माध्यम से प्राप्त की जाती है, जो विशिष्ट लिंग मानों ('male', 'female') को उनके संबंधित सामग्री से मैप करता है। यह तरीका आपको दिए गए लिंग के आधार पर सामग्री को गतिशील रूप से चुनने में सक्षम बनाता है। जब इसे React Intlayer या Next Intlayer के साथ एकीकृत किया जाता है, तो रनटाइम पर प्रदान किए गए लिंग के अनुसार उपयुक्त सामग्री स्वचालित रूप से चुनी जाती है।

लिंग-आधारित सामग्री सेटअप करना

अपने Intlayer प्रोजेक्ट में लिंग-आधारित सामग्री सेटअप करने के लिए, एक सामग्री मॉड्यूल बनाएं जिसमें आपके लिंग-विशिष्ट परिभाषाएँ शामिल हों। नीचे विभिन्न प्रारूपों में उदाहरण दिए गए हैं।

**/*.content.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { gender, type Dictionary } from "intlayer";

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "पुरुष उपयोगकर्ताओं के लिए मेरी सामग्री",
      female: "महिला उपयोगकर्ताओं के लिए मेरी सामग्री",
      fallback: "जब लिंग निर्दिष्ट नहीं होता है तो मेरी सामग्री", // वैकल्पिक
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

यदि कोई फॉलबैक घोषित नहीं किया गया है, तो अंतिम घोषित कुंजी को फॉलबैक के रूप में लिया जाएगा यदि लिंग निर्दिष्ट नहीं है या किसी परिभाषित लिंग से मेल नहीं खाता है।

React Intlayer के साथ लिंग-आधारित सामग्री का उपयोग करना

To utilize gender-based content within a React component, import and use the useIntlayer hook from the react-intlayer package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const GenderComponent: FC = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>
      {
        /* Output: my content for male users */
        myGender("male")
      }
    </p>
    <p>
      {
        /* Output: my content for female users */
        myGender("female")
      }
    </p>
    <p>
      {
        /* Output: my content for male users */
        myGender("m")
      }
    </p>
    <p>
      {
        /* Output: my content for female users */
        myGender("f")
      }
    </p>
    <p>
      {
        /* Output: my content when gender is not specified */
        myGender("")
      }
    </p>
    <p>
      {
        /* Output: my content when gender is not specified */
        myGender(undefined)
      }
    </p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const GenderComponent: FC = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>{myGender("male")}</p>
    <p>{myGender("female")}</p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myGender } = useIntlayer("my_key");</script><template><div>  <p>{{ myGender("male") }}</p>  <p>{{ myGender("female") }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myGender } = useIntlayer("my_key");</script><template><div>  <p>{{ myGender("male") }}</p>  <p>{{ myGender("female") }}</p></div></template>

To utilize gender-based content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myGender("male")}</p><p>{$content.myGender("female")}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myGender("male")}</p><p>{$content.myGender("female")}</p></div>

To utilize gender-based content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const GenderComponent: FC = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>{myGender("male")}</p>
    <p>{myGender("female")}</p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const GenderComponent: Component = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>{myGender("male")}</p>
    <p>{myGender("female")}</p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-gender",template: `  <div>    <p>{{ content().myGender("male") }}</p>    <p>{{ content().myGender("female") }}</p>  </div>`,})export class GenderComponent {content = useIntlayer("my_key");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-gender",template: `  <div>    <p>{{ content().myGender("male") }}</p>    <p>{{ content().myGender("female") }}</p>  </div>`,})export class GenderComponent {content = useIntlayer("my_key");}

To utilize gender-based content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("gender-male")!.textContent =
  newContent.myGender("male");
document.getElementById("gender-female")!.textContent =
  newContent.myGender("female");
});

// Initial render
document.getElementById("gender-male")!.textContent = content.myGender("male");
document.getElementById("gender-female")!.textContent =
content.myGender("female");

अतिरिक्त संसाधन

कॉन्फ़िगरेशन और उपयोग के बारे में अधिक विस्तृत जानकारी के लिए, निम्नलिखित संसाधनों को देखें:

ये संसाधन विभिन्न वातावरणों और फ्रेमवर्क्स में Intlayer की सेटअप और उपयोग के बारे में और अधिक जानकारी प्रदान करते हैं।

शर्त

सम्मिलन