Saltar al contenido principal

Fragmentos reutilizables

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.

Información

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.
¡Hola mundo! Este es mi contenido que quiero reutilizar en varias páginas. Mi palabra clave del
día es {word}.
aviso

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.
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:
export const myName = 'mi nombre';

export const myObject = { fruit: 'fresas' };
  1. Importe el fragmento desde su archivo de destino y use la variable:
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.
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... contenido del fragmento ...</p>
  </div>
);
aviso

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
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'} />