Fragmentos reutilizables

Uno de los principios fundamentales del desarrollo de software es DRY (Don’t Repeat Yourself), que también se aplica a la documentación. Si te encuentras repitiendo el mismo contenido en varios lugares, crea un fragmento personalizado para ese contenido. Los fragmentos incluyen contenido que puedes importar en otros archivos para reutilizarlo. Tú controlas dónde aparece el fragmento en una página. Si alguna vez necesitas actualizar el contenido, solo tendrás que editar el fragmento en lugar de cada archivo donde se use. Los fragmentos no se renderizan como páginas independientes. Debes importarlos en otros archivos.

Crear snippets

Crea un archivo en una carpeta de snippets con el contenido que quieras reutilizar. Los snippets pueden contener todos los tipos de contenido compatibles con Mintlify y pueden importar otros snippets.

Importar fragmentos en páginas

Para usar fragmentos, impórtalos en las páginas usando una ruta absoluta o relativa.

Importaciones absolutas: Comienzan con /snippets/ para importaciones desde la raíz de tu proyecto.
Importaciones relativas: Usa ./ o ../ para importar fragmentos en relación con la ubicación del archivo actual.

Las importaciones relativas habilitan la navegación en el IDE. Pulsa CMD y haz clic en el nombre de un fragmento en tu editor para ir directamente a su definición.

Importar texto

Añade al archivo de fragmento el contenido que quieras reutilizar.

snippets/my-snippet.mdx

  Hello world! This is my content I want to reuse across pages.

Importa el snippet en tu archivo de destino utilizando una ruta absoluta o relativa.

---
title: "Una página de ejemplo"
description: "Esta es una página de ejemplo que importa un snippet."
---

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

El contenido del snippet aparece debajo de esta frase.

<MySnippet/>

---
title: "Una página de ejemplo"
description: "Esta es una página de ejemplo que importa un snippet."
---

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

El contenido del snippet aparece debajo de esta frase.

<MySnippet/>

Importar variables

Haz referencia a variables de un fragmento en una página.

Exporta variables desde un archivo de fragmento.

snippets/custom-variables.mdx

  export const myName = "Ronan";

  export const myObject = { fruit: "fresas" };

Importa el fragmento desde tu archivo de destino y usa la variable.

destination-file.mdx

  ---
  title: "Una página de ejemplo"
  description: "Esta es una página de ejemplo que importa un fragmento con variables."
  ---

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

  Hello, my name is {myName} and I like {myObject.fruit}.

Importar fragmentos con variables

Usa variables para pasar datos a un fragmento cuando lo importes.

Añade variables a tu fragmento y pásales propiedades cuando lo importes. En este ejemplo, la variable es {word}.

snippets/my-snippet.mdx

  Mi palabra clave del día es {word}.

Importa el fragmento en tu archivo de destino con la variable. La propiedad pasada reemplaza la variable en la definición del fragmento.

destination-file.mdx

  ---
  title: "Una página de ejemplo"
  description: "Esta es una página de ejemplo que importa un fragmento con una variable."
  ---

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

  <MySnippet word="bananas" />

Importar componentes de React

Crea un fragmento con un componente JSX. 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>
    );
  };

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 los fragmentos.

Importa el fragmento.

destination-file.mdx

  ---
  title: "Una página de ejemplo"
  description: "Esta es una página de ejemplo que importa un fragmento con un componente de React."
  ---

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

  <MyJSXSnippet />

Comenzar

Organizar

Personalizar

Crear contenido

Documentar APIs

Implementar

Optimizar

Crear snippets

Importar fragmentos en páginas

Importar texto

Importar variables

Importar fragmentos con variables

Importar componentes de React

​Crear snippets

​Importar fragmentos en páginas

​Importar texto

​Importar variables

​Importar fragmentos con variables

​Importar componentes de React

Crear snippets

Importar fragmentos en páginas

Importar texto

Importar variables

Importar fragmentos con variables

Importar componentes de React