Saltar al contenido principal
Uno de los principios fundamentales del desarrollo de software es DRY (“Don’t Repeat Yourself”), que también aplica a la documentación. Si te encuentras repitiendo el mismo contenido en varios lugares, crea un fragmento personalizado para mantener tu contenido sincronizado.

​
Creación de un fragmento personalizado

Condición previa: Debes crear el archivo del fragmento en el directorio snippets para que la importación funcione. Cualquier página en el directorio snippets se tratará como un fragmento y no se mostrará como una página independiente. Si deseas crear una página independiente a partir del fragmento, importa el fragmento en otro archivo y úsalo como componente.

​
Exportación predeterminada

  1. Agrega contenido al archivo del fragmento que quieras reutilizar. Opcionalmente, puedes agregar variables que puedan completarse mediante props cuando importes el fragmento. En este ejemplo, nuestra variable es word.
fragmentos/mi-fragmento.mdx
¡Hola, mundo! Este es el contenido que quiero reutilizar en varias páginas.
  1. Importa el fragmento en tu archivo de destino.
archivo-destino.mdx
---
title: Mi título
description: Mi descripción
---

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

## Encabezado

Lorem impsum dolor sit amet.

<MySnippet/>

​
Exportar con variables

  1. Opcionalmente, puedes añadir variables que se puedan completar mediante props al importar el fragmento. En este ejemplo, nuestra variable es word.
fragmentos/mi-fragmento.mdx
Mi palabra del día es {word}.
  1. Importa el fragmento en tu archivo de destino con la variable. La propiedad se completará según tu especificación.
archivo-destino.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="bananas" />

​
Variables reutilizables

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

export const myObject = { fruit: 'fresas' };
  1. Importa el fragmento en tu archivo de destino y usa la variable:
archivo-destino.mdx
---
title: Mi título
description: Mi descripción
---

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

Hola, me llamo {myName} y me gusta {myObject.fruit}.

​
Fragmentos JSX

  1. Exporta un componente JSX desde tu archivo de fragmento. (Consulta Componentes de React para obtener más información):
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>¡Hola, mundo!</h1>
    </div>
  )
}
Importante: Al crear fragmentos JSX, usa la sintaxis de funciones flecha (=>) en lugar de declaraciones de función. La palabra clave function no está admitida en este contexto.
  1. Importa el fragmento desde tu archivo de destino y usa el componente:
archivo-de-destino.mdx
---
title: Mi título
description: Mi descripción
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />