Pular para o conteúdo principal

Snippets reutilizáveis

One of the core principles of software development is DRY (Don't Repeat Yourself). This is a principle that applies to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.

Criando um snippet personalizado​

Pré-condição: Você deve criar seu arquivo de snippet no diretório snippets.

Informação

Qualquer página no diretório snippets será tratada como um snippet e não será renderizada como uma página independente. Se você quiser criar uma página independente a partir do snippet, importe o snippet para outro arquivo e chamou-o como um componente.

Exportação padrão​

  1. Adicione conteúdo ao seu arquivo de snippet que você deseja reutilizar em vários locais. Opcionalmente, você pode adicionar variáveis que podem ser preenchidas via props quando você importar o snippet.
Olá mundo! Este é o meu conteúdo que quero reutilizar em páginas. Minha palavra-chave do
dia é {word}.
aviso

O conteúdo que você deseja reutilizar deve estar dentro do diretório snippets para que a importação funcione.

  1. Importe o snippet para seu arquivo de destino.
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 snippet:
export const myName = 'meu nome';

export const myObject = { fruit: 'morangos' };
  1. Importe o snippet do seu arquivo de destino e use a variável:
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 snippet, crie um componente que receba props exportando seu componente na forma de uma função arrow.
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... conteúdo do snippet ...</p>
  </div>
);
aviso

O MDX não compila dentro do corpo de uma função arrow. Prefira a sintaxe HTML quando possível ou use uma exportação padrão se precisar usar MDX.

  1. Importe o snippet para seu arquivo de destino e passe as props
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'} />