> ## Documentation Index
> Fetch the complete documentation index at: https://ai-kb.automationanywhere.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Fragmentos reutilizables

> Fragmentos personalizados reutilizables para mantener el contenido sincronizado

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`.

<Note>
  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.
</Note>

### 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.

```mdx snippets/my-snippet.mdx theme={null}
¡Hola mundo! Este es mi contenido que quiero reutilizar en varias páginas. Mi palabra clave del
día es {word}.
```

<Warning>
  El contenido que desea reutilizar debe estar dentro del directorio `snippets` para
  que la importación funcione.
</Warning>

2. Importe el fragmento en su archivo de destino.

```mdx destination-file.mdx theme={null}
---
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:

```mdx snippets/path/to/custom-variables.mdx theme={null}
export const myName = 'mi nombre';

export const myObject = { fruit: 'fresas' };
```

2. Importe el fragmento desde su archivo de destino y use la variable:

```mdx destination-file.mdx theme={null}
---
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.

```mdx snippets/custom-component.mdx theme={null}
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... contenido del fragmento ...</p>
  </div>
);
```

<Warning>
  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.
</Warning>

2. Importe el fragmento en su archivo de destino y pase las props

```mdx destination-file.mdx theme={null}
---
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'} />
```