Front Matter CMS y Astro

Front Matter CMS lleva el CMS a tu editor, permitiéndote crear y previsualizar contenido en tiempo real en Visual Studio Code.

Integración con Astro

En esta sección, veremos cómo agregar Front Matter CMS a tu proyecto de Astro.

Requisitos previos

Visual Studio Code
Usa la plantilla Astro Blog para proporcionar la configuración base y el contenido de muestra para comenzar con Front Matter CMS.

Instalar la extensión Front Matter CMS

Puedes obtener la extensión en el Marketplace de Visual Studio Code - Front Matter o haciendo clic en el siguiente enlace: abrir la extensión Front Matter CMS en VS Code

Inicialización del proyecto

Una vez instalado Front Matter CMS, verás un nuevo icono en la barra de actividad. Al hacer clic en él, se abrirá el panel Front Matter CMS en la barra lateral principal. Sigue los siguientes pasos para inicializar tu proyecto:

Haz clic en el botón Initialize project en el panel de Front Matter
Se abrirá la pantalla de bienvenida y podrás comenzar a inicializar el proyecto
Haz clic en el primer paso para inicializar el proyecto
Dado que Astro es uno de los frameworks compatibles, puedes seleccionarlo de la lista
Registra tus carpetas de contenido, en este caso, la carpeta src/content/blog.

Se requiere registrar carpetas para que Front Matter CMS sepa dónde puede encontrar y crear tu contenido. Puedes tener múltiples tipos de carpetas como páginas, blog, documentación y muchas más.
Se te pedirá que ingreses el nombre de la carpeta. Por defecto, toma el nombre de la carpeta.

El nombre se utiliza durante el proceso de creación de nuevo contenido. Por ejemplo, tener múltiples registros de carpetas te permite elegir el tipo de contenido que deseas crear.
Haz clic en Show the dashboard para abrir el panel de control de contenido
Consejo
Una vez inicializado Front Matter CMS, puedes abrir el panel de control de la siguiente manera:
- Usando el atajo de teclado: alt + d (Windows y Linux) u options + d (macOS)
- Abre la paleta de comandos y busca Front Matter: Open dashboard
- Haz clic en el icono de Front Matter en la barra de título del panel o de los archivos.

Configuración del proyecto

Una vez inicializado el proyecto, obtendrás un archivo de configuración frontmatter.json y una carpeta .frontmatter en la raíz de tu proyecto.

Directorio.frontmatter/
- Directoriodatabase/
  - mediaDb.json
Directoriosrc/
- …
astro.config.mjs
frontmatter.json
package.json

Configuración del tipo de contenido

Los tipos de contenido (content-types) son la forma en que Front Matter CMS gestiona tu contenido. Cada tipo de contenido contiene un conjunto de campos, que se pueden definir por tipo de contenido que desees utilizar para tu sitio web.

Los campos corresponden al front matter del contenido de tu página.

Puedes configurar los tipos de contenido en el archivo frontmatter.json.

Abre el archivo frontmatter.json
Reemplaza la matriz frontMatter.taxonomy.contentTypes con la siguiente configuración de tipos de contenido:

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]

Previsualizar tus artículos en el editor

Desde el panel de Front Matter CMS, haz clic en el botón Start server. Esta acción inicia el servidor de desarrollo local de Astro. Una vez que esté ejecutándose, puedes abrir el panel de control de contenido, seleccionar uno de los artículos y hacer clic en el botón Open preview para abrir el artículo en el editor.

Crear nuevos artículos

Abre el panel de control de Front Matter CMS; puedes hacerlo de la siguiente manera:

Abre el panel de control de contenido de Front Matter CMS
Haz clic en el botón Create content
Front Matter te pedirá el título del artículo. Complétalo y presiona enter
Tu nuevo artículo será creado y abierto en el editor. Puedes comenzar a escribir tu artículo.

Uso de Markdoc con Front Matter CMS

Para usar Markdoc con Front Matter CMS, debes configurarlo en frontMatter.content.supportedFileTypes. Esta configuración le permite al CMS saber qué tipos de archivos puede procesar.

Puedes configurar los ajustes de la siguiente manera:

"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]

Para permitir que tu contenido se cree como Markdoc, especifica la propiedad fileType en el tipo de contenido (content-type).

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]

Recursos oficiales

Más guías de CMS

Socios de CMS destacados

CloudCannon

CMS basado en Git creado para mayor velocidad, seguridad y cero dolores de cabeza.

Todas las guías de CMS

Contribuir Comunidad Patrocinar