One of the core principles of software development is DRY (Don’t Repeat Yourself). This is a principle that apply 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.

​
Creando un fragmento personalizado

Precondición: Debes crear tu archivo de fragmento en el directorio snippets.
Cualquier página en el directorio snippets será tratada como un fragmento y no se renderizará como una página independiente. Si deseas crear una página independiente a partir del fragmento, importa el fragmento a otro archivo y llámalo como un componente.

​
Exportación por defecto

  1. Añade contenido a tu archivo de fragmento que quieras reutilizar en múltiples ubicaciones. Opcionalmente, puedes añadir variables que se pueden rellenar mediante props cuando importes el fragmento.
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 que quieres reutilizar debe estar dentro del directorio snippets para que la importación funcione.
  1. Importa el fragmento en tu archivo de 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 una variable desde tu archivo de fragmento:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. Importa el fragmento desde tu archivo de destino y usa la variable:
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. Dentro de tu archivo de fragmento, crea un componente que reciba props exportando tu componente en forma de función flecha.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);
MDX no se compila dentro del cuerpo de una función flecha. Utiliza la sintaxis HTML cuando puedas o usa una exportación por defecto si necesitas usar MDX.
  1. Importa el fragmento en tu archivo de destino y pasa las 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'} />