Front Matter CMS y Astro

Front Matter CMS lleva el CMS a tu editor, permitiéndote crear y previsualizar contenido en tiempo real dentro de 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 de blog de Astro para proporcionar la configuración base y el contenido de ejemplo para comenzar con Front Matter CMS.

Instalar la extensión Front Matter CMS

Puedes obtener la extensión desde el Visual Studio Code Marketplace - 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 que Front Matter CMS esté instalado, obtendrás un nuevo ícono en la barra de actividad. Se abrirá el panel Front Matter CMS en la barra lateral principal cuando hagas clic en él. 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 Initialize project
Como Astro es uno de los frameworks soportados, puedes seleccionarlo de la lista
Registra tus carpetas de contenido, en este caso, la carpeta src/content/blog.

El registro de carpetas es necesario 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 que Front Matter CMS esté inicializado, puedes abrir el panel de control de la siguiente manera:
- Usando el atajo de teclado: alt + d (Windows y Linux) o options + d (macOS)
- Abre la paleta de comandos y busca Front Matter: Open dashboard
- Haz clic en el ícono de Front Matter en la barra de título del panel o en los archivos.

Configuración del proyecto

Una vez que el proyecto esté inicializado, 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 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 usar en 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 el array 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
      }
    ]
  }
]

Previsualiza tus artículos en el editor

Desde el panel Front Matter CMS, haz clic en el botón Start server. Esta acción inicia el servidor de desarrollo local de Astro. Una vez en funcionamiento, 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. Rellénalo y presiona enter
Tu nuevo artículo se creará y se abrirá en el editor. Puedes comenzar a escribir tu artículo.

Usando Markdoc con Front Matter CMS

Para usar Markdoc con Front Matter CMS, debes configurar esto en frontMatter.content.supportedFileTypes. Esta configuración permite que el CMS sepa qué tipos de archivos puede procesar.

Puedes configurar la opción 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.

"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
      }
    ]
  }
]