Modelo de contenido y medios
Cómo separa un sitio los textos del diseño, contra qué validan el editor, la API y los agentes, y cómo funcionan los medios.
Todos los sitios son proyectos de Astro que guardan en archivos de contenido tipado lo que modifica el propietario, y en el código el diseño. Una página lee el contenido y lo presenta. Nunca incluye por sí misma el nombre del negocio, un precio ni el horario de apertura.
El modelo de contenido es la lista de esos tipos de contenido y sus campos. Se define una sola vez en src/content.config.ts del proyecto (un esquema Zod por tipo). Cada compilación lo exporta como esquemas JSON, y el editor, la REST API, MCP y la CLI validan cada cambio con ellos. Si un valor no se ajusta al esquema, se rechaza y se indica el nombre del campo; no se guarda nada.
El modelo procede de la compilación más reciente. Compila el sitio una vez antes de consultar su modelo de contenido.
Colecciones y elementos únicos
Una colección contiene muchas entradas, una por archivo. El nombre del archivo es el slug de la entrada: letras minúsculas, números y guiones. Un elemento único es un documento JSON en una ruta fija.
El starter de Atelier201 incluye estos elementos:
| Nombre | Tipo | Contenido |
|---|---|---|
business | elemento único | Nombre, eslogan, descripción, teléfono, correo electrónico, dirección, horario de apertura, redes sociales, datos legales, enlaces de reservas y mapas, e idioma del sitio |
theme | elemento único | Cuatro colores de marca, radio de las esquinas, combinación de fuentes y modo claro, oscuro o automático |
navigation | elemento único | Enlaces de la cabecera y el pie de página, y botón de llamada a la acción |
integrations | elemento único | ID de Google Analytics, dominio de Plausible y código añadido a la cabecera o al final del cuerpo |
services | colección, JSON | Servicios con nombre, descripción, precio, orden e imagen |
blog | colección, Markdown | Publicaciones con título, descripción, fecha, autor, imagen de portada, etiquetas, los servicios de los que tratan (una relación con services mediante el slug) y un indicador de borrador |
El starter es un esqueleto: incluye estas dos colecciones de ejemplo y no presupone nada sobre el negocio. Cada sitio elimina las que no necesita y añade las suyas (un equipo, un menú o eventos).
Una colección de contenido usa Markdown: campos en el front matter y un cuerpo. Una colección de datos usa JSON y no tiene cuerpo.
Las entradas nuevas creadas mediante la API o MCP empiezan como borradores si su colección tiene un campo de borrador, para que alguien decida si quiere mostrarlas.
Cambia el contenido sin alterar el diseño
Para modificar textos, entradas y datos del negocio, es preferible usar las llamadas de contenido en lugar de editar archivos directamente:
| Tarea | REST | MCP | CLI |
|---|---|---|---|
| Consultar el modelo | Consultar el modelo de contenido | get_content_model | atelier201 content model |
| Crear una entrada | Crear o actualizar una entrada | save_entry | atelier201 content save |
| Cambiar un texto | Cambiar un campo | set_field | atelier201 content set |
Usa las llamadas de archivos solo para cambiar código: un diseño, un componente o el propio modelo de contenido. Para añadir un campo, inclúyelo en src/content.config.ts con .default() o .optional() para que las entradas existentes sigan siendo válidas.
Edición en línea: data-atelier201-field
El propietario hace clic en un texto breve de la página y lo edita directamente. Esto es posible porque el texto lleva la dirección del campo del que procede:
<h1 data-atelier201-field="business:/name">Morning Crumb Bakery</h1>
<time data-atelier201-field="business:/hours/2/close">15:00</time>La dirección tiene el formato <singleton>:<JSON pointer>: business, theme o navigation, dos puntos y luego un puntero RFC 6901 al archivo de ese elemento único. La misma dirección funciona con set_field y atelier201 content set.
Al editar un componente, sigue estas reglas:
- Pon el atributo en un elemento cuyo texto completo corresponda exactamente a ese campo, sin nada más dentro. Atelier201 sustituye el texto del elemento. En «Llámanos: 555 0100», aplica el atributo solo al número, dentro de un
span. - Mueve el atributo junto con el elemento cuando cambies su estilo y añádelo en cualquier lugar nuevo donde muestres un campo de un elemento único.
- No lo pongas en textos compuestos a partir de varios campos, textos transformados (como una fecha con formato), cuerpos Markdown ni entradas de colecciones. En su lugar, el contenedor de una entrada de una página lleva
data-atelier201-entry="<collection>/<slug>".
El sitio sigue siendo estático
Los sitios creados para Atelier201 son sitios estáticos de Astro: no usan adaptador de servidor, renderizado en el servidor, framework del lado del cliente ni solicitudes a otro origen durante la ejecución (incluidas las fuentes, las etiquetas de analítica y los mapas insertados). Usan un único idioma, definido en business.locale. Sus dependencias son astro y @astrojs/mdx (desactivada hasta que se añada mdx() a la configuración), porque la compilación se ejecuta sin acceso a la red. AGENTS.md del starter recoge estas reglas para los agentes que editan el código.
Medios
Sube una imagen, un PDF o un vídeo breve al sitio y luego haz referencia a él como /media/<filename> en el contenido, por ejemplo, en coverImage de una publicación del blog.
- Cada archivo puede ocupar 20 MB. En MCP, las subidas se codifican en base64 y tienen un límite de 5 MB.
- Añade un texto
alta las imágenes para las personas que no pueden verlas. - Los medios cuentan para el almacenamiento del plan: 100 MB en un borrador y 5 GB en un Site.
- Los archivos subidos se incluyen a partir de la siguiente compilación. Al eliminar un archivo, deja de incluirse en las compilaciones posteriores. Las compilaciones ya publicadas conservan su copia hasta que una publicación más reciente la sustituya.