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 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, o uno con @sveltejs/adapter-node y sin PocketBase, que es como vela 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 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 o @sveltejs/adapter-node.

Una aplicación que aloja el CMS recibe además better-sqlite3 y @velastack/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 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. Las plantillas con CMS de vela 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 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. 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:

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