Saltar al contenido principal
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.

​
Crear un fragmento personalizado

Condición previa: Debe crear su archivo de fragmento en el directorio snippets.
Cualquier página en el directorio snippets se tratará como un fragmento y no se renderizará como una página independiente. Si desea crear una página independiente a partir del fragmento, importe el fragmento en otro archivo y llámelo como un componente.

​
Exportación predeterminada

  1. Agregue contenido a su archivo de fragmento que desee reutilizar en múltiples ubicaciones. Opcionalmente, puede agregar variables que se pueden completar a través de props cuando importe el fragmento.
snippets/my-snippet.mdx
¡Hola mundo! Este es mi contenido que quiero reutilizar en varias páginas. Mi palabra clave del
día es {word}.
El contenido que desea reutilizar debe estar dentro del directorio snippets para que la importación funcione.
  1. Importe el fragmento en su archivo de destino.
destination-file.mdx
---
title: Mi título
description: Mi Descripción
---

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

## Encabezado

Lorem ipsum dolor sit amet.

<MySnippet word="plátanos" />

​
Variables reutilizables

  1. Exporte una variable desde su archivo de fragmento:
snippets/path/to/custom-variables.mdx
export const myName = 'mi nombre';

export const myObject = { fruit: 'fresas' };
  1. Importe el fragmento desde su archivo de destino y use la variable:
destination-file.mdx
---
title: Mi título
description: Mi Descripción
---

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

Hola, mi nombre es {myName} y me gusta {myObject.fruit}.

​
Componentes reutilizables

  1. Dentro de su archivo de fragmento, cree un componente que reciba props exportando su componente en forma de función flecha.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... contenido del fragmento ...</p>
  </div>
);
MDX no compila dentro del cuerpo de una función flecha. Prefiera la sintaxis HTML cuando sea posible o use una exportación predeterminada si necesita usar MDX.
  1. Importe el fragmento en su archivo de destino y pase las props
destination-file.mdx
---
title: Mi título
description: Mi Descripción
---

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

Lorem ipsum dolor sit amet.

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