--- title: Escritura de Contenido description: Cómo escribir páginas de documentación usando MDX, frontmatter y componentes integrados. url: https://docs.thally.io/es/guides/writing-content --- # Escritura de Contenido Cómo escribir páginas de documentación usando MDX, frontmatter y componentes integrados. ## Conceptos básicos de MDX Cada página en Thally es un archivo `.mdx` — Markdown con soporte para JSX. Puedes usar la sintaxis estándar de Markdown además de componentes React en línea. ```mdx # Encabezado Párrafo normal con **negrita**, *cursiva* y `código en línea`. - Listas con viñetas - Funcionan como se espera 1. Las listas numeradas también ``` ## Frontmatter Cada página necesita un bloque de frontmatter al inicio: ```yaml --- title: Título de la Página description: Un breve resumen para los resultados de búsqueda y las metaetiquetas. --- ``` | Campo | Requerido | Propósito | | --- | --- | --- | | `title` | Sí | Encabezado de la página y etiqueta en la barra lateral | | `description` | Sí | Meta descripción y fragmento de búsqueda | El título del frontmatter se renderiza automáticamente como el encabezado de la página — no es necesario agregar un `# H1` en el cuerpo. ## Bloques de código Los bloques de código delimitados obtienen resaltado de sintaxis automáticamente: ````mdx ```javascript const greeting = 'Hello from Thally!' console.log(greeting) ``` ```` Usa `bash`, `typescript`, `python`, `json`, u cualquier otro identificador de lenguaje compatible con Shiki. ## Avisos y notas Usa el componente `` para destacar información importante: ```mdx Notes support **Markdown** inside them. This is a warning callout. ``` Tipos disponibles: `info`, `warning`, `danger`, `tip`. ## Enlaces Los enlaces estándar de Markdown funcionan tanto para páginas internas como externas: ```mdx Check the [Quickstart](/quickstart) guide or visit [GitHub](https://github.com). ``` ## Pestañas Usa `` y `` para mostrar contenido específico por plataforma o variantes sin bloques de código: ```mdx Install with Homebrew: \`\`\`bash brew install your-cli \`\`\` Install with apt: \`\`\`bash sudo apt install your-cli \`\`\` ``` Cada `` admite contenido MDX completo en su interior — bloques de código, listas, avisos y más. ## Pasos Usa `` y `` para instrucciones secuenciales con círculos numerados y líneas conectoras: ```mdx Run the installer: \`\`\`bash npm install your-package \`\`\` Create a config file and add your API key. ``` ## Tarjetas Usa `` y `` para crear cuadrículas de tarjetas clicables para páginas de inicio o secciones de "próximos pasos": ```mdx Get up and running in five minutes. Explore the full API. ``` Iconos disponibles: `book-open`, `code-simple`, `grid-round`, `link-simple`, `wrench`, `party-horn`, `telegram`, `envelope`, `x-twitter`, `message`. ## Imágenes y marcos Coloca las imágenes en la carpeta `public/` y referéncialas con una barra diagonal al inicio: ```mdx ![Screenshot](/images/image1.jpg) ``` Envuelve las imágenes en un `` para obtener un borde estilizado con un pie de foto opcional. Los marcos tienen zoom al hacer clic por defecto: ```mdx ![Screenshot](/images/image1.jpg) ``` Desactiva el zoom con ``. ## Enlaces ancla en encabezados Cada encabezado desde `h2` hasta `h6` es un enlace permanente. Al seleccionar el encabezado se copia la URL de la sección sin agregar un marcador visible, lo que permite compartir una respuesta específica manteniendo la página limpia visualmente. Los IDs de los anclas se generan a partir del texto del encabezado. Los caracteres no latinos, como CJK, cirílico o letras latinas acentuadas, se conservan en el ID, por ejemplo "Überblick" genera `#überblick` y "日本語 API" genera `#日本語-api`. Los encabezados duplicados en la misma página reciben un sufijo numérico (`-2`, `-3`, etc.). Cuando un encabezado contiene un enlace, Thally renderiza el enlace permanente como un elemento separado visible solo para lectores de pantalla, en lugar de anidar anclas, manteniendo el HTML válido y preservando el acceso por teclado y tecnologías de asistencia a la URL de la sección. Para definir un ancla personalizada, escribe el encabezado como JSX con un atributo `id`: ```mdx

Mi encabezado

``` El ID definido se conserva; si se omite, Thally lo genera a partir del texto. ## Tablas Las tablas estándar de Markdown se renderizan con el estilo adecuado: ```mdx | Method | Endpoint | Description | | --- | --- | --- | | GET | /pets | List all pets | | POST | /pets | Create a pet | ``` ## Organización de archivos Todo el contenido se encuentra en `src/content/`. Puedes usar subdirectorios para organizar páginas relacionadas: ``` src/content/ introduction.mdx → /introduction (or / for the root) quickstart.mdx → /quickstart guides/ getting-started.mdx → /guides/getting-started writing-content.mdx → /guides/writing-content ``` La ruta URL coincide con la ruta del archivo relativa a `src/content/`, sin la extensión `.mdx`.