| Suite | Growth, Professional, Enterprise o Enterprise Plus |
| Support con | Guide Professional o Enterprise |
) > Personalizar > Editar códigoLos administradores de Guide con conocimientos en diseño web pueden trabajar directamente con el código de la página para crear un tema personalizado para el centro de ayuda. Los temas personalizados pueden incluir:
- Plantillas editables que definen el diseño de cada página (por ejemplo, página de artículo, página de categoría o página de tema de la comunidad)
- Páginas personalizadas que se crean desde cero y se pueden colocar en cualquier parte del centro de ayuda
- Encabezado y pie de página globales para el centro de ayuda
También se puede usar un lenguaje de plantillas con todas las funciones necesarias llamado Curlybars que sirve para obtener acceso a los datos del centro de ayuda y manipular el contenido en las plantillas de página y las páginas personalizadas. Asimismo, se pueden usar los archivos JavaScript y CSS que vienen incluidos con el tema para hacer cambios en el aspecto y el comportamiento del tema en todo el sitio. Si desea usar su propio código HTML para editar el tema de su centro de ayuda, consulte Editar el código fuente de los artículos del centro de ayuda.
Cuando se modifica el código de un tema (por ejemplo, las plantillas, JavaScript o CSS), la vista previa del tema muestra el icono </>, para indicar que el código del tema ha sido modificado y ya no recibirá funciones nuevas ni actualizaciones.
En este artículo se tratan los siguientes temas:
Artículos relacionados:
Personalizar plantillas de página y páginas personalizadas con HTML y Curlybars
El HTML para el centro de ayuda viene incluido en plantillas editables que definen el diseño de tipos de páginas, páginas personalizadas y encabezados y pies de página globales. También se puede usar un lenguaje de plantillas con todas las funciones necesarias llamado Curlybars para crear o manipular el contenido para estos elementos.
Puede personalizar la plantilla de cualquiera de los siguientes elementos o tipos de página, o bien puede crear sus propias páginas personalizadas:
- Páginas personalizadas (página_personalizada.hbs): las páginas personalizadas que se crean desde cero y se vinculan desde cualquier parte del centro de ayuda
- Página de artículo (article_page.hbs): las páginas de artículo individuales de la base de conocimientos
- Página de categoría (category_page.hbs): páginas de aterrizaje
- Página de lista de publicaciones de la comunidad (community_post_list_page.hbs)
- Página de publicación de la comunidad (community_post_page.hbs)
- Página de lista de temas de la comunidad (community_topic_list_page.hbs)
- Página de temas de la comunidad (community_topic_page.hbs)
- Página de aportaciones (contributions_page.hbs): las listas de publicaciones, comentarios de la comunidad y comentarios de los artículos hechos por el usuario final
-
Cabecera de documento: (document_head.hbs): la etiqueta
headdel documento - Página de error (error_page.hbs): el mensaje que se muestra cuando un usuario llega a una página que no existe
- Pie de página (footer.hbs): las barras que se ven en la parte inferior de todas las páginas del centro de ayuda
- Encabezado (header.hbs): las barras que se ven en la parte superior de todas las páginas del centro de ayuda
- Página principal: (home_page.hbs): la página de aterrizaje de alto nivel del centro de ayuda
- Página de nueva publicación de la comunidad (new_community_post_page.hbs)
- Página de nueva solicitud (new_request_page.hbs): el formulario de solicitud o de envío de ticket
- Página de solicitud (request_page.hbs): la solicitud individual o las páginas de tickets
- Página de solicitudes (requests_page.hbs): las listas de solicitudes o los tickets asignados a un usuario o de los que el usuario recibe una copia (CC)
- Resultados de búsqueda (search_results.hbs): el formato de visualización de los resultados de las búsquedas
- Página de sección (section_page.hbs): páginas de aterrizaje
- Página de seguimiento (subscriptions_page.hbs): la lista de categorías, secciones y artículos que un usuario está siguiendo
- Página de perfil de usuario (user_profile_page.hbs)
Para editar las plantillas de página
- En la interfaz Administrador de Conocimiento, haga clic en Personalizar diseño () en la barra lateral.
- En el tema que desea editar, haga clic en Personalizar.
- Haga clic en Editar código.
- En la sección Plantillas, haga clic en la plantilla o la página personalizada que desea modificar.
La página se abre en el editor de código.
- Utilice la vista de código para editar la plantilla o la página.
Puede agregar, eliminar o cambiar el orden de los siguientes elementos:
-
Expresiones de plantilla para mostrar y manipular el contenido en sus páginas
Por ejemplo, el helper de la plantilla de ruta de navegación
{{breadcrumbs}}muestra un elemento de ruta de navegación en una página. Si desea una guía detallada sobre expresiones de plantilla, consulte Plantillas del centro de ayuda. - Marcadores de posición de contenido dinámico (consulte Localización del contenido del centro de ayuda)
- Widgets incrustables creados por terceros
- Marcado HTML
-
Expresiones de plantilla para mostrar y manipular el contenido en sus páginas
- Haga clic en Guardar en la esquina superior derecha para guardar los cambios.
Si editó una plantilla, los cambios se aplicarán en todas las páginas del tema que se basen en la plantilla que se modificó.
- Para previsualizar los cambios, haga clic en Previsualizar. Consulte Vista previa del tema en el centro de ayuda.
Nota: Puede ser que no todas las funciones estén en servicio cuando se previsualiza un tema. La funcionalidad de previsualización tiene por objeto mostrar los cambios de aspecto y funcionamiento, pero no es para hacer pruebas de principio a fin de la funcionalidad del tema interactivo. Le recomendamos que para este tipo de pruebas use un sandbox.
- Haga los demás cambios de código que necesite y luego haga clic en Guardar.
Cuando termine de editar la plantilla de página o la página personalizada, puede cerrarla.
Personalizar CSS o JavaScript
Puede agregar código JavaScript o personalizar las CSS del sitio. Si desea ver una muestra de lo que se puede hacer en el centro de ayuda con solo un poco de codificación, dele una mirada a los siguientes recursos:
- Sugerencias de la comunidad del centro de ayuda
- Recetario de CSS del centro de ayuda
- Recetario de JavaScript del centro de ayuda
Para personalizar CSS o JavaScript
- En la interfaz Administrador de Conocimiento, haga clic en Personalizar diseño () en la barra lateral.
- En el tema que desea editar, haga clic en Personalizar.
- Haga clic en Editar código.
- Haga clic en script.js para modificar JavaScript, o en style.css para modificar CSS.
El archivo se abre en el editor de código.
- Agregue o modifique JavaScript o CSS en la vista de código.
- Haga clic en Guardar en la parte superior para guardar los cambios.
Los cambios se aplican a su tema.
- Para previsualizar los cambios, haga clic en Previsualizar (consulte Vista previa del tema del centro de ayuda).
- Haga los demás cambios de código que necesite y luego haga clic en Guardar.
Cuando termine, puede cerrar el archivo.
Usar variables en CSS y HTML
Las propiedades que elija en el panel Configuración o que establezca en el archivo de manifiesto para colores, fuentes e imágenes de tema se almacenan en variables. Puede usar estas variables en el archivo style.css del tema. También puede hacer referencia a las variables usando expresiones de Curlybars en las plantillas de páginas HTML.
Las variables son útiles si desea especificar el mismo valor en varios lugares y actualizarlo rápidamente. Al actualizar la propiedad, esta se actualiza en todos los lugares donde se usa. El tema Copenhagen predeterminado incluye algunas variables de colores y fuentes. Puede modificar los nombres y rótulos, borrar variables o agregar las suyas (consulte la información sobre el archivo de manifiesto del panel Configuración).
En el tema estándar Copenhagen, tiene las siguientes variables predeterminadas:
-
brand_colores el color de la marca para los elementos de navegación principales -
brand_text_colores el color de la marca para cuando se pasa el mouse sobre el tema o cuando este está activo -
text_colores el color de texto para los elementos de cuerpo y encabezado -
link_colores el color de texto para los elementos de vínculo -
background_colores el color del fondo del centro de ayuda -
heading_fontes la fuente de los encabezados -
text_fontes la fuente del texto del cuerpo -
logoes el logotipo de la compañía -
favicones el icono que se muestra en la barra de direcciones del navegador -
homepage_background_imagees la imagen hero de la página principal -
community_background_imagees la imagen hero de la página de temas de la comunidad -
community_imagees la imagen de la sección de la comunidad en la página principal
Ejemplos del uso de variables en CSS
Las propiedades que configura para colores, fuentes e imágenes de temas se almacenan en variables que puede usar en el archivo style.css de su tema.
Por ejemplo, puede usar algunas de las variables predeterminadas en CSS con esta sintaxis:
-
$brand_color -
$brand_tex_color -
$heading_font -
$text_font
En el archivo CSS, asigne una variable a una propiedad de CSS de la misma manera que asignaría un valor normal. Por ejemplo:
.button {
label-color: $text_font;
}También puede usar llaves sencillas para incrustar el helper en una expresión de CSS de la siguiente manera:
max-width: #{$search_width}pxEjemplos del uso de variables en Curlybars en HTML
Las propiedades que configura para colores, fuentes e imágenes de temas se almacenan en variables a las que puede hacer referencia con expresiones de Curlybars en las plantillas de páginas HTML.
Las variables se convierten en propiedades del objeto settings en Curlybars. Como sucede con cualquier objeto de Curlybars, puede usar llaves dobles y notación de puntos para insertar una propiedad en una plantilla de página.
Por ejemplo:
-
{{settings.color_1}}es el valor hexadecimal de un color. Por ejemplo:#FF00FF -
{{{settings.font_1}}es la pila de fuentes. Por ejemplo, sistema se define como:'-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" -
{{settings.homepage_background_image}}es la ruta al archivo almacenado en este campo. Por ejemplo:p8.zdassets.com/theme_assets/... -
{{settings.range_input}}es el valor de la entrada de intervalo.
El objeto de configuración se puede usar como entrada para cualquier helper. Por ejemplo:
{{is settings.enabled}} ... {{/is}}
0 comentarios
Iniciar sesión para dejar un comentario.