Skip to main content
Uno de los principios del desarrollo de software es DRY (Don’t Repeat Yourself). También aplica a la documentación. Si repites el mismo contenido en varios sitios, considera crear un fragmento personalizado para mantenerlo sincronizado.

​
Crear un fragmento personalizado

Requisito: el archivo del fragmento debe estar en el directorio snippets.
Cualquier página en snippets se trata como fragmento y no se renderiza como página sola. Para una página independiente, importa el fragmento en otro archivo y úsalo como componente.

​
Export por defecto

  1. Añade el contenido que quieras reutilizar. Opcionalmente usa variables rellenadas por props al importar.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages. My keyword of the
day is {word}.
El contenido reutilizable debe estar dentro de snippets para que el import funcione.
  1. Importa el fragmento en el archivo destino.
destination-file.mdx
---
title: My title
description: My Description
---

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

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

​
Variables reutilizables

  1. Exporta variables desde el fragmento:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. Importa y usa en el destino:
destination-file.mdx
---
title: My title
description: My Description
---

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

Hello, my name is {myName} and I like {myObject.fruit}.

​
Componentes reutilizables

  1. En el fragmento, exporta un componente con props como función flecha.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);
MDX no compila dentro del cuerpo de una función flecha. Usa HTML cuando puedas o un export por defecto si necesitas MDX.
  1. Importa en el destino y pasa props:
destination-file.mdx
---
title: My title
description: My Description
---

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

Lorem ipsum dolor sit amet.

<MyComponent title={'Custom title'} />