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

Requisito previo: Debes crear tu archivo de 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 renderizará como una página independiente. Si deseas crear una página independiente a partir del fragmento, importa el fragmento en otro archivo e invócalo como un componente.

​
Exportación por defecto

  1. Agrega contenido al archivo del fragmento que quieras reutilizar. Opcionalmente, puedes agregar variables que se puedan completar mediante props cuando importes el fragmento. En este ejemplo, nuestra variable es word.
snippets/my-snippet.mdx
¡Hola mundo! Este es mi contenido que quiero reutilizar en todas las páginas.
  1. Importa el fragmento en tu 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/>

​
Exportación con variables

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

​
Variables reutilizables

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

export const myObject = { fruit: 'fresas' };
  1. Importa el fragmento desde el archivo de destino y usa 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}.

​
Fragmentos de 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 de JSX, usa la sintaxis de funciones flecha (=>) en lugar de declaraciones de función. La palabra clave function no es compatible en este contexto.
  1. Importa el fragmento desde tu archivo de destino y utiliza el componente:
destination-file.mdx
---
title: Mi título
description: Mi descripción
---

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

<MyJSXSnippet />
⌘I