Configurar un módulo

Last updated:

Al crear un módulo, hay una serie de opciones disponibles que influyen en el lugar en el que el módulo es visible, en cómo se identifica y en cómo se edita. Los módulos aparecen localmente como carpetas con el sufijo .module. Dentro de esa carpeta se encuentran los archivos que componen la configuración del módulo, y el código utilizado para renderizarlo. La configuración se guarda en el archivo meta.json. Los campos se configuran por separado en un archivo fields.json. La mayor parte de la configuración también puede modificarse mediante el editor de módulos del Administrador de diseño

Estructura de las carpetas de los módulos mostrada localmente

Adición de un icono

Los módulos pueden tener un icono que se utiliza en el Administrador de diseño y en los editores de páginas y correos electrónicos. Para los proveedores del mercado estos iconos son necesarios. La intención del icono es que pueda proporcionar un contexto visual al creador de contenido sobre el propósito del módulo. Así que es mejor tener diferentes iconos para los tipos de módulos en tu tema. Hay dos maneras de agregar un icono, a través del administrador de diseño o de la CLI del CMS.

Add an icon using the design manager

  1. abrir el módulo en el administrador de diseño,
  2. cuando está en el editor de módulos, el icono que aparece junto al título y el tipo de módulo es un botón. Al seleccionar ese botón se obtiene un campo de carga de iconos.
  3. Sube/selecciona tu icono y ahora podrás verlo en tu editor de páginas y en el administrador de diseño.
Change Icon

Agregar un icono mediante la CLI

Para agregar un icono al desarrollar localmente, abre el archivo meta.json del módulo y agrega o edita el valor del parámetro del icon para que sea un SVG desde el administrador de archivos.

// meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." }

Creación de un icono de módulo

Los iconos de los módulos deben ser un archivo .svg y tener un tamaño no superior a 10kb. Para obtener los mejores resultados, tu icono debe ser bastante sencillo y utilizar un solo color. Si tu icono utiliza más de un color, se convertirá automáticamente para ti. El icono del módulo predeterminado que se muestra es el de una llave inglesa y un pincel.

Cambio de la etiqueta

La etiqueta que se utiliza cuando se muestran los módulos en el editor puede ajustarse por separado del nombre del módulo. Esto es útil cuando se desarrolla localmente, ya que puedes tener un nombre que tenga sentido para ti y a la vez tener uno diferente que vean los creadores de contenido. Localmente, cambia el parámetro label para establecer la etiqueta. En el administrador de diseño hay un campo en el editor de módulos debajo del nombre del módulo.

Editor de módulos - campo de la etiqueta

Hacer global un módulo

Para los módulos normales, el contenido de cada instancia de un módulo en una página, correo electrónico o plantilla es independiente. Para algunos casos de uso, es útil poder hacer que todas las instancias de un módulo compartan el mismo contenido. Si se establece global en true se consigue esto. 

También es posible convertir los módulos de una plantilla de arrastrar y soltar en globales a través de la interfaz de usuario.

Controlar dónde se puede utilizar un módulo

Los módulos pueden limitarse a ciertos tipos de contenido a través de la configuración del hostTemplateTypes. Los módulos también se pueden ocultar para que no se puedan agregar directamente a las páginas mediante la configuración de is_available_for_new_content a false. Los módulos construidos para los menús de navegación y la búsqueda son buenos candidatos para ocultar mediante is_available_for_new_content.

Ambos se pueden administrar también a través del editor de módulos.

Adición de dependencias de CSS y JavaScript

Además de utilizar module.css y module.js para agregar CSS y JavaScript que se agregarán a todas las páginas que incluyan una instancia de módulo, las dependencias que se comparten entre módulos pueden adjuntarse utilizando css_assets y js_assets. Las rutas pueden ser absolutas o relativas al archivo meta.json.

// meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] }

Advertencia: Cuando se utilizan rutas relativas para referenciar dependencias, al ejecutar hs fetch --overwrite para actualizar el módulo para el desarrollo local se sobrescribirán las rutas relativas con rutas absolutas.

meta.json

Puedes agregar los parámetros de la tabla de abajo al archivo mea.json de un módulo.

ParameterTypeDescription Default
icon
String

URL de una imagen para usar como icono de un módulo.

null
label
String

Etiqueta utilizada cuando los módulos se muestran en los editores de contenido

module_id
Number

Id único para el módulo que es independiente de la ruta.

is_available_for_new_content
Boolean

El valor del interruptor en la esquina superior derecha del editor de módulos en HubSpot. Determina si el módulo puede ser utilizado en el contenido.

true
global
Boolean

Indica si el módulo es global o no

false
host_template_types
Array

Un array de tipos de contenido en los que se puede utilizar el módulo. Uno o más de [ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ].

["PAGE", "BLOG_POST", "BLOG_LISTING"]
css_assets
Array

Un array de archivos CSS de los que depende el módulo. Admite rutas relativas.

por ejemplo, "css_assets": [{"path": "../path/to/file.css" }]

[]
css_render_options
Object

Establece si el módulo CSS se renderiza de forma asíncrona con async: true, false 

{"async": false}
js_assets
Array

Un array de archivos JavaScript de los que depende el módulo. Admite rutas relativas.

por ejemplo, "js_assets": [{ "path": "../path/to/file.js" }]

[]
js_render_options
Object

Modifica la etiqueta JavaScript del módulo agregado a la página renderizada. Las opciones incluyen:

  • position: head , footer
  • async: true, false 
  • defer: true, false 
  • type: string

 

{"position":"footer"}
inline_help_text
String

Texto de ayuda que se mostrará en la parte superior del módulo en un cuadro de información azul (límite de 300 caracteres).

Se utiliza mejor para proporcionar la información necesaria para utilizar el módulo. Si tienes información de texto de ayuda específica para un campo, consulta nuestra documentación sobre el texto de ayuda para los campos.

null
master_language
String

El código del idioma en el que se escribieron originalmente los campos del módulo.

por ejemplo, en

placeholder
Object

Establece el contenido del marcador de posición para el módulo. Incluye las siguientes propiedades:

  • show_module_icon: si se muestra el icono del módulo. true, false.
  • title: el título que aparece en el módulo en el editor. String.
  • description: la descripción que aparece en el módulo en el editor. String.
False

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.