Skip to main content
Um dos princípios fundamentais do desenvolvimento de software é DRY (Don’t Repeat Yourself - Não Se Repita). Este é um princípio que se aplica à documentação também. Se você se encontrar repetindo o mesmo conteúdo em vários lugares, você deve considerar criar um trecho personalizado para manter seu conteúdo sincronizado.

​
Criando um trecho personalizado

Pré-condição: Você deve criar seu arquivo de trecho no diretório snippets.
Qualquer página no diretório snippets será tratada como um trecho e não será renderizada em uma página independente. Se você quiser criar uma página independente a partir do trecho, importe o trecho em outro arquivo e chame-o como um componente.

​
Exportação padrão

  1. Adicione conteúdo ao seu arquivo de trecho que você deseja reutilizar em vários locais. Opcionalmente, você pode adicionar variáveis que podem ser preenchidas via props quando você importa o trecho.
snippets/my-snippet.mdx
Olá mundo! Este é o meu conteúdo que quero reutilizar em várias páginas. Minha palavra-chave do
dia é {word}.
O conteúdo que você deseja reutilizar deve estar dentro do diretório snippets para que a importação funcione.
  1. Importe o trecho no seu arquivo de destino.
destination-file.mdx
---
title: Meu título
description: Minha Descrição
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Cabeçalho

Lorem ipsum dolor sit amet.

<MySnippet word="bananas" />

​
Variáveis reutilizáveis

  1. Exporte uma variável do seu arquivo de trecho:
snippets/path/to/custom-variables.mdx
export const myName = 'meu nome';

export const myObject = { fruit: 'morangos' };
  1. Importe o trecho do seu arquivo de destino e use a variável:
destination-file.mdx
---
title: Meu título
description: Minha Descrição
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Olá, meu nome é {myName} e eu gosto de {myObject.fruit}.

​
Componentes reutilizáveis

  1. Dentro do seu arquivo de trecho, crie um componente que receba props exportando seu componente na forma de uma função de seta.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... conteúdo do trecho ...</p>
  </div>
);
O MDX não compila dentro do corpo de uma função de seta. Use sintaxe HTML quando puder ou use uma exportação padrão se precisar usar MDX.
  1. Importe o trecho no seu arquivo de destino e passe as props
destination-file.mdx
---
title: Meu título
description: Minha Descrição
---

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'Título personalizado'} />