Saltearse al contenido
Astro Astro

Front Matter CMS y Astro

Front Matter CMS trae el CMS a tu editor, se ejecuta dentro de Visual Studio Code, GitPod y muchos más.

Integración con Astro

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

Prerrequistos

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

Instala la extensión de Front Matter CMS

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

Inicialización del proyecto

Una vez instalado Front Matter CMS, obtendrás un nuevo icono 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

  • La pantalla de bienvenida se abrirá 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.

  • Se te pedirá que introduzcas el nombre de la carpeta. De forma predeterminada, toma el nombre de la carpeta.

  • Haz clic en Start the dashboard para abrir el panel de contenido

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(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 deseas usar para tu sitio web.

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

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

  • Abre el archivo frontmatter.json
  • Reemplaza el arreglo frontMatter.taxonomy.contentTypes con la siguiente configuración de tipos de contenido:
frontmatter.json
"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 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 en ejecución, puedes abrir el panel 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.

Crea nuevos artículos

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

  • Abre el panel de contenido de Front Matter CMS
  • Haz clic en el botón Create new article
  • Front Matter te preguntará por el título del artículo. Rellénalo y pulsa enter
  • Tu nuevo artículo será creado y abierto en el editor. Puedes empezar a escribir tu artículo.

Usando 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 la opción de la siguiente manera:

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

Para permitir que el contenido se cree como Markdoc, especifica la propiedad fileType en el tipo de contenido.

frontmatter.json
"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