Trong Intlayer, nội dung dựa trên giới tính được thực hiện thông qua hàm gender, hàm này ánh xạ các giá trị giới tính cụ thể ('male', 'female') tới nội dung tương ứng của chúng. Cách tiếp cận này cho phép bạn chọn nội dung một cách động dựa trên giới tính được cung cấp. Khi tích hợp với React Intlayer hoặc Next Intlayer, nội dung phù hợp sẽ tự động được chọn dựa trên giới tính được cung cấp tại thời điểm chạy.

Thiết lập Nội dung Dựa trên Giới tính

Để thiết lập nội dung dựa trên giới tính trong dự án Intlayer của bạn, hãy tạo một module nội dung bao gồm các định nghĩa theo giới tính của bạn. Dưới đây là các ví dụ ở nhiều định dạng khác nhau.

**/*.content.ts

Sao chép mã

Sao chép mã vào clipboard

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "nội dung của tôi dành cho người dùng nam",
      female: "nội dung của tôi dành cho người dùng nữ",
      fallback: "nội dung của tôi khi giới tính không được chỉ định", // Tùy chọn
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Nếu không khai báo fallback, khóa cuối cùng được khai báo sẽ được sử dụng làm fallback nếu giới tính không được chỉ định hoặc không khớp với bất kỳ giới tính nào đã định nghĩa.

Sử dụng Nội dung Dựa trên Giới tính với 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

Sao chép mã

Sao chép mã vào clipboard

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

Sao chép mã

Sao chép mã vào clipboard

"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

Sao chép mã

Sao chép mã vào clipboard

<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

Sao chép mã

Sao chép mã vào clipboard

<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

Sao chép mã

Sao chép mã vào clipboard

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

Sao chép mã

Sao chép mã vào clipboard

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

Sao chép mã

Sao chép mã vào clipboard

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

Sao chép mã

Sao chép mã vào clipboard

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

Tài Nguyên Bổ Sung

Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, hãy tham khảo các tài nguyên sau:

Những tài nguyên này cung cấp thêm cái nhìn sâu sắc về việc thiết lập và sử dụng Intlayer trên nhiều môi trường và framework khác nhau.

Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về việc thiết lập và sử dụng Intlayer trên nhiều môi trường và framework khác nhau.

Điều kiện

Chèn