# CMS

Añade al proyecto un CMS de edición en línea, servido desde el propio servidor de la aplicación o desde uno alojado. Funciona en cualquier proyecto SvelteKit, también en uno que Vela no creó.

### Sintaxis

```
$ vela enable cms
$ vela enable cms --endpoint https://velastack.dev/v1/projects/<project>/cms
```

Esto instala [`@velastack/cms`](https://www.npmjs.com/package/@velastack/cms) y `marked`, y conecta el CMS a la aplicación:

- Una llamada a `loadCms` en el `+layout.server.ts` raíz, creado si el proyecto no lo tiene, para que cada página reciba su contenido y una página eliminada responda 404, 410 o una redirección
- Un `<AdminBar />` en el `+layout.svelte` raíz, donde los editores inician sesión para editar el texto en el sitio, subir medios y publicar
- El plugin de Vite, que encuentra cada campo editable al compilar

### Dónde vive el CMS

El comando decide dónde se ejecuta el backend del CMS, en este orden:

1. `--endpoint <url>` siempre gana: la aplicación lee del CMS alojado en esa URL.
2. Una aplicación que se ejecuta como servidor Node aloja el CMS ella misma. Es un proyecto con un [backend de PocketBase](/es/enable/backend), o uno con `@sveltejs/adapter-node` y sin PocketBase, que es como [`vela deploy`](/es/deploy) deja un proyecto de `npx sv create`. `@sveltejs/adapter-auto` no cuenta: decide según la plataforma, y casi nada de lo que elige tiene un disco donde guardar una base de datos.
3. Si no, un proyecto [vinculado](/es/link) a velastack.dev usa el CMS alojado de ese proyecto, así que `vela link` seguido de `vela enable cms` no necesita ninguna URL. El comando indica qué endpoint eligió.
4. Si no, se detiene sin cambiar nada y enumera las salidas: vincular el proyecto, pasar `--endpoint`, o darle un servidor a la aplicación con [`vela enable backend`](/es/enable/backend) o `@sveltejs/adapter-node`.

Una aplicación que aloja el CMS recibe además `better-sqlite3` y [`@velastack/kit`](/es/helpers/kit), y el backend montado en `/api/cms`, con su base de datos SQLite y las subidas en el directorio de datos. El CMS mantiene su propia base de datos; PocketBase nunca interviene.

Con un CMS alojado, por `--endpoint` o por el vínculo, la aplicación lee de un CMS que se ejecuta en otro lugar y la barra de administración inicia sesión allí. Es la única forma que puede usar un sitio estático, ya que no tiene servidor donde alojar el backend; `vela build` prerrenderiza entonces el contenido publicado y descarga sus medios al sitio. Un sitio que aloja velastack.dev se reconstruye así con [`vela cms deploy`](/es/cms/deploy) o con **Deploy Site…** en la barra de administración.

Cada proyecto en velastack.dev tiene un CMS alojado en `https://velastack.dev/v1/projects/<project>/cms`, donde `<project>` es el id que registra [`vela link`](/es/link). Las plantillas con CMS de [`vela create`](/es/create) llegan con esta conexión hecha y con el endpoint del proyecto vinculado ya en `src/lib/site.ts`, así que no necesitan `vela enable cms`.

Con [i18n](/es/enable/i18n) habilitado, cualquiera de las dos formas usa los idiomas del sitio en lugar de uno solo por defecto.

### Editores

Una aplicación que aloja el backend autentica a los editores contra la propia tabla del CMS, que empieza vacía. Crea el primer acceso, luego abre cualquier página con `?edit` en la URL e inicia sesión:

```
$ vela cms editor add you@example.com
```

La contraseña se genera y se muestra una sola vez. `vela cms editor password <email> <password>` establece una nueva, y `vela cms editor list` muestra quién puede iniciar sesión; consulta [`vela cms editor`](/es/cms/editor). Un CMS alojado gestiona sus propios editores.

### Hacer editable el contenido

Envuelve el texto con los componentes de `@velastack/cms`. Cada uno recibe un `name` para el campo y un `fallback` para cuando aún no se ha publicado nada:

```svelte
<script lang="ts">
	import { CmsText, CmsImage } from '@velastack/cms';
</script>

<h1><CmsText name="hero.title" fallback="Bienvenido" /></h1>
<CmsImage name="hero.image" alt="Hero" />
```

### Volver a ejecutar

Ejecutar el comando de nuevo solo completa lo que falta. `src/lib/cms.ts` y, para un backend alojado por la aplicación, `src/lib/server/cms.ts` y las dos rutas son tuyos una vez escritos y nunca se sobrescriben, así que cambios como añadir idiomas se conservan.

### Revertir

Todavía no existe `vela disable cms`. Elimina `src/lib/cms.ts` y, si la aplicación aloja el backend, `src/lib/server/cms.ts`, `src/routes/api/cms` y `src/routes/uploads`; quita `cms()` de `vite.config.ts`, la llamada a `loadCms` de `+layout.server.ts` y `<AdminBar />` de `+layout.svelte`; y luego desinstala `@velastack/cms`, `marked` y `better-sqlite3`. `@velastack/kit` se queda si el proyecto tiene un backend de PocketBase, que también lo usa.