Autor:

Criação:2025-07-27Última atualização:2025-07-27

Referência esta documentação ao seu assistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Introdução de conteúdo baseado em gênero"
v5.7.227/07/2025

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Conteúdo Baseado em Gênero / Gênero no Intlayer

Name: Intlayer
Author: Intlayer

Como o Gênero Funciona

No Intlayer, o conteúdo baseado em gênero é realizado por meio da função gender, que mapeia valores específicos de gênero ('male', 'female') para seus conteúdos correspondentes. Essa abordagem permite selecionar dinamicamente o conteúdo com base em um gênero fornecido. Quando integrado com React Intlayer ou Next Intlayer, o conteúdo apropriado é automaticamente escolhido de acordo com o gênero fornecido em tempo de execução.

Configurando Conteúdo Baseado em Gênero

Para configurar conteúdo baseado em gênero em seu projeto Intlayer, crie um módulo de conteúdo que inclua suas definições específicas por gênero. Abaixo estão exemplos em vários formatos.

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "meu conteúdo para usuários do sexo masculino",
      female: "meu conteúdo para usuários do sexo feminino",
      fallback: "meu conteúdo quando o gênero não é especificado", // Opcional
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Se nenhum fallback for declarado, a última chave declarada será usada como fallback caso o gênero não seja especificado ou não corresponda a nenhum gênero definido.

Usando Conteúdo Baseado em Gênero com 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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

"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

Copiar código

Copiar o código para a área de transferência

<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

Copiar código

Copiar o código para a área de transferência

<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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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

Recursos Adicionais

Para informações mais detalhadas sobre configuração e uso, consulte os seguintes recursos:

Estes recursos oferecem mais informações sobre a configuração e o uso do Intlayer em vários ambientes e frameworks.

Condição Inserção