Introducción: Un único editor enriquecido se atasca en la "operación"

Al crear un blog con un CMS sin cabeza como microCMS, a menudo se empieza solo con un "título" y un "cuerpo (editor enriquecido)". Sin embargo, al continuar con la operación, rápidamente se encontrará con obstáculos.

• "El enlace fácil de Moshimo Affiliate (etiqueta script) es eliminado por el editor"
• "Quiero crear una bonita tarjeta de producto con enlaces de Amazon y Rakuten alineados, pero escribir HTML directamente es difícil"
• "Quiero habilitar el resaltado de sintaxis para los bloques de código"

La solución a la que llegué para resolver esto fue convertir el cuerpo del artículo en un "campo repetible".

Esta vez, revelaré la visión completa del campo repetible llamado **body_blocks**, que actualmente está funcionando en mi blog, y su diseño de esquema (el punto clave).

Solución: Convertir todo el artículo en body_blocks (campo repetible)

En mi blog, la parte correspondiente al cuerpo del artículo se define como un único campo repetible llamado **body_blocks**. El autor crea el artículo apilando las partes (bloques) necesarias de arriba hacia abajo. Esta es la misma filosofía de "editor de bloques" que Notion o Gutenberg de WordPress.

Diseño de esquema clave: 11 tipos de definición de bloques

Este es el desglose de los campos personalizados que se definen realmente en microCMS. Las funciones están claramente divididas según su propósito.

1. "Texto" y "Publicidad" base

Esta es la parte que construye la estructura básica del artículo.

rich_text (Bloque de texto)

Un editor enriquecido para escribir texto normal.

• Campo: text_fields (Editor enriquecido)
• Función: Encargado de la redacción básica como encabezados (H2, H3), párrafos normales y texto en negrita.

affiliate_html (Bloque de publicidad)

Este es un punto clave para la monetización. Evita la sanitización del editor enriquecido.

• Campo: notes (Área de texto)
• Función: Pegue directamente el código HTML del banner y las etiquetas script de Moshimo Affiliate o A8.net. Al ser un área de texto, el CMS no realiza ningún procesamiento y puede ser emitido directamente por Next.js.

2. Tipo "Conversión" para acelerar la monetización

En lugar de simplemente pegar enlaces, al gestionarlos como datos estructurados, se transforman en una interfaz de usuario rica (como tarjetas) en el lado del frontend.

product_card (Tarjeta de producto)

Gestiona los "Enlaces fáciles de Moshimo" y enlaces de venta de productos propios.

• Campos:
  • notes (Código de enlace fácil de Moshimo)
  • title (Enlace de Amazon, Enlace de Rakuten, Enlace de Yahoo) *Cada URL
  • title (Nombre del producto)
  • insert_photo (URL de la imagen del producto)
• Ventajas: Al no guardar HTML, sino mantener la "URL" y el "nombre del producto" como datos, se puede cambiar el aspecto de todos los artículos anteriores a la vez cuando se modifica el diseño.

cta_button (Botón CTA)

Botones como "Contacto" o "Ir al sitio web oficial" que se colocan al final del artículo.

• Campos:
  • title (Etiqueta del botón)
  • title (URL de destino del enlace)
  • list (Selección de estilo de botón: Primary / Secondary / Outline etc.)
  • toggle_on (Detección de URL externa: si es true, target="_blank")
  • toggle_on (Detección de afiliado: si es true, rel="sponsored")
  • title (Texto complementario: "Ej: Puede registrarse en 3 minutos")

3. Tipo "Funcional" esencial para blogs técnicos

codeBlock (Bloque de código)

Indispensable para blogs de ingenieros.

• Campos:
  • notes (Cuerpo del código)
  • title (Idioma: js, css, python etc.)
  • title (Nombre de archivo/Título)

linkCard (Tarjeta de enlace externo)

Para tarjetas de enlace que obtienen y muestran OGP, como Zenn o Qiita.

• Campos: title (URL), notes (Nota)

4. Tipo "Decorativo" para enriquecer los artículos

• quotePanel (Cita): Gestiona el contenido de la cita y la información de la fuente por separado. También es compatible con citas de diálogos de manga, etc.
• infoBox (Nota de advertencia): Seleccione "Advertencia", "Información", "Éxito", etc. en un cuadro de selección para mostrar una alerta.
• figureImage (Imagen individual): Gestiona la imagen, el pie de foto y el texto alternativo (alt) como un conjunto.
• videoEmbed (Video): Introduce la URL de YouTube, etc.
• dataTable (Tabla): Se utiliza cuando se necesita una tabla más funcional que la función de tabla del editor enriquecido.

Imágen de implementación en el lado de Next.js

En el frontend, simplemente se itera sobre el array body_blocks recibido con una función map y se renderiza el componente correspondiente según fieldId.

3 ventajas de este diseño

1. Las etiquetas de publicidad (script) funcionan de forma segura

Al definir affiliate_html como un "área de texto" y procesarlo adecuadamente en el lado de Next.js (con dangerouslySetInnerHTML, etc.), se pueden usar las etiquetas ASP directamente sin que las especificaciones del editor de microCMS interfieran.

2. Resistente a los cambios de diseño (separación de datos y apariencia)

Por ejemplo, si se quiere "cambiar el diseño de un botón", con HTML escrito directamente se necesitaría modificar todos los artículos, pero con este diseño, solo cambiando una línea del CSS del componente CtaButton, se reflejará instantáneamente en todos los artículos, incluidos los antiguos.

3. Mejora la experiencia de escritura

Simplemente se elige el bloque y se rellena el formulario, como "Ahora código", "Ahora presentación de producto", por lo que no es necesario preocuparse por las etiquetas HTML. El autor puede concentrarse únicamente en el contenido.

Resumen: El "diseño" es clave para un CMS sin cabeza

Este diseño orientado a componentes que utiliza "campos repetibles", aunque requiere un esfuerzo inicial de construcción, reduce drásticamente los costos operativos a largo plazo.

Especialmente, tener partes relacionadas con la conversión, como "tarjetas de producto" y "CTA", como datos estructurados, aumentará en gran medida el valor del activo del blog en el futuro.

Si actualmente te preocupa la falta de libertad del editor enriquecido, considera migrar a body_blocks.