Resumen de temas

Last updated:

Un tema es una colección portátil y contenida de materiales para desarrolladores diseñada para permitir una experiencia de edición de contenido flexible.  Puedes construir temas localmente usando la CLI de HubSpot utilizando las herramientas, tecnologías y workflows que prefieras. Los temas y todos sus archivos también son portables entre entornos y cuentas. Para ver un video de cómo empezar a desarrollar temas, ve el video de HubSpot Academy a continuación:

Temas como un paquete

Los temas son un paquete que se extiende por toda la aplicación de HubSpot en varios lugares para permitir una experiencia eficiente de creación de contenido. Los desarrolladores pueden utilizar los temas para construir un sistema de diseño con el que los creadores de contenido puedan trabajar. Cualquier cantidad de flexibilidad, o barandillas pueden ser construidas en un tema para satisfacer las necesidades de tu negocio. 

Crear páginas

Cuando los creadores de contenido comienzan a crear nuevas páginas, se les pide que empiecen por seleccionar el tema desde el que van a crear una página, seguido de la selección de la plantilla que van a utilizar dentro del tema.

Selección de temas dentro de HubSpotLa imagen de vista preliminar del tema, así como otras configuraciones para un tema, se establecen en el archivo theme.json. 

Campos temáticos

Los temas permiten a los desarrolladores crear un conjunto de campos temáticos, similares a los campos de los módulos, que permiten a los creadores de contenido ajustar varios mandos y diales diseñados por un desarrollador para permitir el control estilístico global de un sitio web sin tener que editar el CSS. Los desarrolladores utilizan HubL para acceder a los valores de los campos temáticos en todo su CSS. Los creadores de contenido utilizan el Editor de temas para modificar los campos del tema, previsualizar esos cambios con las plantillas existentes dentro de un tema y publicar sus cambios.

temas

Los campos de los temas son dictados por el archivo fields.json de un tema. 

Al editar un tema en modo de prueba, también puedes copiar la configuración JSON del tema. Esto te permite pegar cualquier actualización en el archivo fields.json local del tema.copy-theme-settings-test-mode

 

Módulos de tema

Los módulos de un tema deben estar diseñados específicamente para su uso dentro de las plantillas de ese tema. El editor de contenido destacará estos módulos temáticos, lo que hará que los creadores de contenido puedan agregar de forma rápida y sencilla módulos a las páginas que están construyendo y que están diseñados para funcionar bien en el contexto de esa página. Los módulos predeterminados y el resto de módulos de tu cuenta HubSpot seguirán estando disponibles.

Módulos temáticos dentro de un tema

Al desarrollar un tema, puedes ocultar módulos y secciones del editor de páginas para crear una experiencia de creación de contenido más ágil.

Estructura de los archivos del tema

Un tema es un único directorio de archivos. Puedes incluir archivos HTML, CSS y Javascript, módulos y archivos adicionales que pueden organizarse de cualquier manera dentro de los subdirectorios de la carpeta del tema principal. Se necesitan dos archivos JSON para construir un tema: theme.json y fields.json. Estos archivos deben incluirse en la carpeta raíz del tema.

Para comenzar con un ejemplo, consulta la plantilla de CMS de HubSpot.

estructura de los archivos del tema

En este momento los archivos .json sólo pueden ser creados y cargados a una cuenta de HubSpot a través de las herramientas de desarrollo local.

theme.json

El archivo theme.json contiene la meta-información para tu directorio de temas, como la etiqueta legible de los temas, tu captura de pantalla de vista preliminar y varias configuraciones de cómo debe comportarse el tema. Tu archivo theme.json tendrá un aspecto similar al siguiente:

// theme.json { "label": "Cool Theme", "preview_path": "./templates/home-page.html", "screenshot_path":"./images/templates/homepage.jpg", "enable_domain_stylesheets": false, "version":"1.0", "author":{ "name":"Jon McLaren", "email":"noreply@hubspot.com", "url":"https://theme-provider.com/" }, "documentation_url":"https://theme-provider.com/cool-theme/documentation", "license":"./license.txt", "example_url":"https://theme-provider.com/cool-theme/demo", "is_available_for_new_content":true }
theme.json
ParameterTypeDescription
label
String

La etiqueta legible del tema, utilizada en varios lugares en los que el tema se muestra en toda la aplicación HubSpot, como la pantalla de selección de plantillas y el editor de temas. 

preview_path
String

Una ruta relativa a un archivo de plantilla en el tema que debería ser la plantilla predeterminada, utilizada cuando se previsualiza un tema en el editor de temas. 

screenshot_path
String

Una ruta relativa a un archivo de imagen que se utiliza para dar una instantánea del aspecto del tema en varios lugares donde se produce la selección del tema, como en la pantalla de selección de plantillas. 

enable_domain_stylesheets
Boolean

Activar o desactivar las hojas de estilo adjuntas a los dominios en la Configuración del sitio web para que se incluyan en las plantillas del tema. El valor predeterminado es false.

version
String

Número entero de la versión que soporta . versiones.

Author
objeto

Objeto para proporcionar información sobre ti como proveedor del tema.

name
El nombre del proveedor.
email
La dirección de correo electrónico de soporte del proveedor.
url
El sitio web del proveedor.
documentation_url
String

Enlace a la documentación del tema.

example_url
String

Enlace de ejemplo del tema en vivo.

license
String

Un identificador SPDX válido o la ruta relativa a la licencia dentro de tu tema.

Esta licencia dicta el uso y la modificación que permite el creador del tema. Útil cuando se envía al mercado.

is_available_for_new_content
Boolean

Booleano que determina si un tema se muestra en la página del creador de contenido para su selección. El valor predeterminado es true.

fields.json

El archivo fields.json controla los campos y grupos de campos disponibles en el editor de temas, incluyendo los campos de estilo. Los campos que incluyas dependerán del control que quieras que tengan los creadores de contenido en el editor de páginas. El número de campos disponibles para los temas es más limitado que para los módulos, ya que los campos del tema son mejores para las opciones de estilo, mientras que el contenido global es mejor para el contenido del tema.

Por ejemplo, en lugar de agregar un campo de texto al field.json del tema para el eslogan de tu sitio, deberías agregarlo como un módulo global para que los creadores de contenido puedan actualizar el eslogan desde el editor de la página en lugar del editor del tema.

Los campos que están disponibles para su uso en los temas son:

Para obtener una documentación completa sobre las posibles opciones de los campos temáticos, consulta la documentación sobre módulos y campos temáticos. 

Utilizar los valores de los campos temáticos

Para acceder a los valores del campo, utiliza la notación de puntos y antepon la ruta al valor en fields.json con el tema. Puedes utilizar el valor de los campos temáticos en tus hojas de estilo utilizando una sintaxis como {{ theme.path.to.value }}. Por ejemplo, el campo de la fuente que se describe a continuación:

// fields.json [{ "type": "group", "name": "typography", "label": "Typography", "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } } ] }]

Se debe referenciar en el CSS con:

h1 { font-size: {{ theme.typography.h1_font.size }}px; font-family: {{ theme.typography.h1_font.font }}; color: {{ theme.typography.h1_font.color }}; text-decoration: {{ theme.typography.h1_font.styles.text-decoration }}; font-style: {{ theme.typography.h1_font.styles.font-style }}; font-weight: {{ theme.typography.h1_font.styles.font-weight }}; }

Vista preliminar de temas

Para los desarrolladores, a veces es necesario poder probar que los campos de tu tema funcionan correctamente, pero no quieren afectar a las páginas reales. Ahí es donde entra el modo de prueba de temas.

Modo de prueba

El modo de prueba te ofrece un entorno seguro para poder jugar con los campos de tu tema y asegurarte de que funcionan como espera. La interfaz tiene el mismo aspecto que la vista preliminar/el editor de temas que pueden ver los creadores de contenido, pero puedes estar seguro de que no estás cambiando la configuración real de tu sitio web. Para protegerte contra actualizaciones accidentales de la configuración del tema, la publicación estará bloqueada en el modo de prueba. Puedes saber si estás en modo de prueba cuando ?testmode=true aparece en la barra de direcciones, y un icono de modo de prueba se muestra en el encabezado del editor de temas.

Modo de prueba/vista preliminar de temas

Hay dos maneras de habilitar el modo de prueba:

  • Para activar el modo de prueba del administrador de diseño:
    • En el administrador de diseño, selecciona tu tema en el Finder.
    • En la parte superior de la barra lateral izquierda, haz clic en el botón Vista previa.
      copy-theme-settings-test-mode-design-manager (1)
  • Para activar el modo de prueba desde el editor de páginas:
    • En el editor de páginas, haz clic en la pestaña Diseño en la barra lateral izquierda y luego haz clic en Editar configuración del tema.
      page-editor-edit-theme
    • Agrega ?testmode=true a la URL, luego presiona Intro. Estarás en modo de prueba.

 Otro método es abrir la configuración del tema desde el editor de la página. Luego, una vez dentro, agrega el parámetro de consulta ?testmode=true a la URL en tu barra de direcciones.

Recursos relacionados

¿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.