Cada tema del centro de ayuda consta de una colección de plantillas de páginas editables y páginas personalizadas. El lenguaje de plantillas del centro de ayuda, Curlybars, se puede usar para obtener acceso a los datos del centro de ayuda y manipular el contenido de las páginas.
En este artículo se proporciona una lista de recetas con fragmentos de código que se pueden usar. Tenga en cuenta que algunas de las funciones que se mencionan en estas recetas ya podrían existir en el centro de ayuda, dependiendo de si se está usando un tema estándar o uno personalizado, y la fecha de activación del centro de ayuda.
- Acerca del lenguaje de plantillas Curlybars
- Personalizar las plantillas de páginas para categorías, secciones o artículos específicos
- Personalizar los nombres de los idiomas en el selector de idiomas
- Ocultar uno o varios idiomas en el selector de idiomas
- Permitir que los usuarios ordenen los comentarios de los artículos por fecha o por votos
- Agregar una barra de herramientas de formato al editor de comentarios del artículo
- Permitir que los usuarios emitan votos sobre los comentarios de los artículos
- Agregar resultados de búsquedas inmediatas (autocompletar) al centro de ayuda
- Agregar la búsqueda federada para incluir contenido externo en la búsqueda del centro de ayuda
- Agregar clasificación de tipos de suscripción en la página Siguiendo de Mis actividades
- Agregar las opciones de clasificación “created at” y “updated at” para las solicitudes en Mis actividades
- Agregar botones Seguir/Dejar de seguir en una organización compartida
- Permitir que los usuarios envíen copias (CC) de solicitudes de soporte a otros usuarios
- Agregar un vínculo a la solicitud principal en las solicitudes de seguimiento
- Activar CSAT para tickets resueltos en el Portal del cliente
- Agregar botones para votar en los artículos
- Agregar etiquetas de contenido a artículos y publicaciones
- Agregar insignias al tema personalizado del centro de ayuda
- Permitir que los usuarios vean los perfiles de usuario en el centro de ayuda
- Activar subsecciones en el tema del centro de ayuda
- Agregar filtros y resultados a la barra lateral de varios centros de ayuda en la página de resultados de la búsqueda
Acerca del lenguaje de plantillas Curlybars
El centro de ayuda está basado en un framework de temas que tiene su propio lenguaje de plantillas para las personalizaciones avanzadas. Cada tema del centro de ayuda consta de una colección de plantillas editables y páginas personalizadas opcionales.
Las plantillas de páginas editables definen el diseño de cada página. Por ejemplo, hay una plantilla para los artículos de la base de conocimientos, una para la lista de solicitudes, etc. Una plantilla es simplemente un archivo de texto que se presenta en una página HTML cuando un usuario la quiere ver. Cada plantilla consta de una mezcla de marcado HTML y expresiones fáciles de identificar por sus llaves dobles, como {{post.title}}.
Las páginas personalizadas están integradas en el código base del tema del centro de ayuda, y tienen un URL específico al cual se puede acceder desde cualquier punto del centro de ayuda por medio de un vínculo. Las páginas personalizadas se pueden usar para crear y codificar páginas a partir de cero conforme a las necesidades particulares. Por ejemplo, las páginas personalizadas se pueden usar para crear páginas de aterrizaje especiales para el centro de ayuda, o incluso para crear páginas nuevas para incrustar contenido de fuentes exteriores a Zendesk.
El lenguaje de plantillas se llama Curlybars y es el que se encarga de implementar un extenso subconjunto del lenguaje Handlebars. Pero a diferencia de Handlebars que se renderiza en el lado del cliente, Curlybars se renderiza en el lado del servidor.
El lenguaje de plantillas del centro de ayuda se puede usar para obtener acceso a los datos del centro de ayuda y manipular el contenido de las páginas. En el siguiente ejemplo, el centro de ayuda devuelve una lista de los nombres y avatares de todas las personas que dejaron comentarios en la página:
{{#each comments}}
<li>
<div class="comment-avatar">
<img src="{{author.avatar_url}}" alt="Avatar" />
</div>
<div class="comment-author">
{{author.name}}
</div>
</li>
{{/each}} Anteriormente, se podían usar componentes para personalizar el centro de ayuda, pero no se podían personalizar los componentes en sí, a menos que se manipularan con JavaScript. Con Curlybars ahora se puede obtener acceso al HTML que antes estaba oculto dentro del componente y editarlo.
Personalizar las plantillas de páginas para categorías, secciones o artículos específicos
Se pueden personalizar las plantillas de categoría, sección y artículo para categorías, secciones y artículos específicos respectivamente.
- Categoría
- Sección
- Artículo
- Especifique la ID de la categoría, la sección o el artículo en un bloque
is:{{#is id 200646205}} ... {{/is}}
Ejemplo
Si se inserta el siguiente bloque en la plantilla de sección, se personalizará la plantilla para las secciones 200646205 y 203133596:
{{#is section.id 200646205}}
<p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
<p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}Referencia
Personalizar los nombres de los idiomas en el selector de idiomas
Se pueden personalizar los nombres de los idiomas en el selector de idiomas de todas las páginas del centro de ayuda. Esto es útil si se desea usar una variante del idioma, por ejemplo, "English (US)" para todas las variantes del idioma "English".
- Encabezado
{{#if alternative_locales}}...{{/if}}
- Reemplace la expresión
{{current_locale.name}}con la siguiente expresión condicional:{{#is current_locale.name 'English (US)'}} English {{else}} {{current_locale.name}} {{/is}}También reemplace la expresión de región alternativa
{{name}}con la siguiente expresión condicional:{{#is name 'English (US)'}} English {{else}} {{name}} {{/is}}
Ejemplo
{{#if alternative_locales}}
<div class="dropdown language-selector" aria-haspopup="true">
<a class="dropdown-toggle">
{{#is current_locale.name 'English (US)'}}
English
{{else}}
{{current_locale.name}}
{{/is}}
</a>
<span class="dropdown-menu dropdown-menu-end" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{#is name 'English (US)'}}
English
{{else}}
{{name}}
{{/is}}
</a>
{{/each}}
</span>
</div>
{{/if}}Referencia
Ocultar uno o varios idiomas en el selector de idiomas
Puede ser útil ocultar un idioma en el selector de idiomas si el contenido de ese idioma todavía no está listo para su publicación.
- Encabezado
{{#each alternative_locales}}...{{/each}}
- Reemplace la expresión
{{name}}con la siguiente expresión condicional:{{#is name 'Français'}} {{! do nothing }} {{else}} <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> {{/is}}
Ejemplo
{{#each alternative_locales}}
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/is}}
{{/each}}Referencia
Permitir que los usuarios ordenen los comentarios de los artículos por fecha o por votos
De manera predeterminada, los comentarios de los artículos se ordenan por fecha, del más reciente al más antiguo. Se pueden agregar vínculos Fecha y Votos que los usuarios pueden usar para ordenar los comentarios por fecha o por número de votos.
- Artículo
...
- Inserte la siguiente etiqueta div después de la etiqueta de encabezado de la sección de comentarios,
{{t 'comments'}}
{{#if comments}}, si existe, para cerciorarse de que los clasificadores no aparezcan si nadie ha dejado un comentario todavía:<div class="comment-sorter"> Sort by: {{#each comment_sorters}} <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a> {{/each}} </div>
Ejemplo
<section class="article-comments">
<h2>{{t 'comments'}}</h2>
{{#if comments}}
<div class="comment-sorter">
Sort by:
{{#each comment_sorters}}
<a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
{{/each}}
</div>
<ul class="comment-list">
{{#each comments}}
...Referencia
Agregar una barra de herramientas de formato al editor de comentarios del artículo
Se puede agregar una barra de herramientas de formato al editor para los comentarios de los artículos. Los usuarios pueden agregar negrita y cursiva, listas ordenadas y sin ordenar, imágenes y vínculos.
- Artículo
{{#form 'comment'}}...{{/form}}
- Busque y reemplace la expresión
{{textarea 'body'}}en el objeto form con{{wysiwyg 'body'}}
Ejemplo
{{#form 'comment' class='comment-form'}}
<div class="comment-avatar">
{{user_avatar class='user-avatar'}}
</div>
<div class="comment-container">
{{wysiwyg 'body'}}
<div class="comment-form-controls">
{{input type='submit'}}
</div>
</div>
{{/form}}Referencia
Permitir que los usuarios emitan votos sobre los comentarios de los artículos
De manera predeterminada, los usuarios pueden emitir votos sobre los artículos. También se puede permitir que emitan votos sobre los comentarios de los artículos.
- Artículo
{{#each comments}}...{{/each}}
- Inserte la siguiente etiqueta div después de la etiqueta
:<div class="comment-vote vote"> {{vote 'up' class="article-vote-up" selected_class="vote-voted"}} {{vote 'sum' class="article-vote-sum"}} {{vote 'down' class="article-vote-down" selected_class="vote-voted"}} </div>Los asistentes de voto de arriba toman prestadas las clases CSS de los votos de artículos para estilizar los vínculos de los votos de comentarios. Puede definir sus propias clases para estilizar los votos de comentarios.
Ejemplo
{{#each comments}}
<li id="{{anchor}}" class="comment">
<div class="comment-vote vote">
{{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
{{vote 'sum' class="article-vote-sum"}}
{{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
</div>
<div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
<img src="{{author.avatar_url}}" alt="Avatar">
</div>
...Referencia
Agregar resultados de búsquedas inmediatas (autocompletar búsqueda) al tema personalizado del centro de ayuda
Se puede agregar la función de búsqueda inmediata al tema personalizado para mostrar los vínculos a los artículos recomendados mientras el usuario ingresa su búsqueda.
Cuando la búsqueda inmediata está activada, a medida que el usuario escribe un término de búsqueda aparece una lista de los artículos recomendados (un máximo de seis). Al hacer la búsqueda inmediata solo se toman en cuenta los títulos de los artículos. El usuario puede seleccionar artículos coincidentes directamente en el cuadro de búsqueda sin necesidad de ir a la página de resultados de la búsqueda.
- La plantilla que contenga su expresión de búsqueda (por lo general, la plantilla del encabezado o de la página principal)
Expresión aplicable
- {{search}}
- Agregue
instant=truea la expresión de búsqueda.{{search instant=true}}
Ejemplo
<div class="search-box">
<h1 class="help-center-name">{{help_center.name}}</h1>
{{search instant=true}}
</div>Agregar la búsqueda federada para incluir contenido externo en la búsqueda del centro de ayuda
La activación de la búsqueda federada en la plantilla Resultados de la búsqueda del centro de ayuda consta de dos partes:
Agregar filtros a la barra lateral
Para actualizar la plantilla de los resultados de la búsqueda se deben actualizar las propiedades utilizadas en los filtros de la barra lateral.
.<section class="search-results-sidebar">
{{#if source_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each source_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
<buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}">{{t'show_more_sources'}}</button> </ul>
</section>
{{/if}}
{{#if type_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each type_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
{{#is current_filter.identifier 'knowledge_base'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
{{/is}}
{{#is current_filter.identifier 'community'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
{{/is}}
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each subfilters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
{{#is current_filter.identifier 'knowledge_base'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
{{/is}}
{{#is current_filter.identifier 'community'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
{{/is}}
</ul>
</section>
{{/if}}
</section>
Iteración de los resultados
Este fragmento es un ejemplo de cómo se puede usar el asistente {{results}} para iterar a través de los resultados de la búsqueda federada:
{{#if results}}
<ul class="search-results-list">
{{#each results}}
<li class="search-result-list-item result-{{type}}">
<h2 class="search-result-title">
<a href="{{url}}" class="results-list-item-link"{{#if is_external}}
target=”_blank” {{/if}}>
{{title}}
{{#if is_external}}
<svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></svg>
{{/if}}
</a>
</h2>
<article>
<div class="search-result-icons">
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
{{#if comment_count}}
<span class="search-result-meta-count">
{{comment_count}}
</span>
{{/if}}
</div>
<ul class="meta-group">
<li>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
<li class="meta-data">{{author.name}}</li>
<li class="meta-data">{{date created_at}}</li>
</ul>
<div class="search-results-description">{{text}}</div>
</article>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
</p>
{{/if}}Agregar clasificación de tipos de suscripción en la página Siguiendo de Mis actividades
Para que sea más fácil que los usuarios vean sus suscripciones, puede permitir que ordenen las suscripciones por tipo en la página Mis actividades > Siguiendo.
- Página de seguimiento
- Debajo de la etiqueta
, inserte el código siguiente:<div class="my-activities-following-header"> <span class="dropdown"> <span class="dropdown-toggle"> {{current_filter.label}} </span> <span class="dropdown-menu" role="menu"> {{#each filters}} <a href="{{url}}" aria-selected="{{selected}}" role="menuitem"> {{name}} </a> {{/each}} </span> </span> </div>
Agregar las opciones de clasificación “created at” y “updated at” para las solicitudes en Mis actividades
Se pueden agregar las opciones de clasificación “created at” (“creado el”) y “updated at” (“actualizado el”) para los usuarios finales en la página de solicitudes en Mis actividades.
- Página de lista de solicitudes
Receta
- Reemplace
{{t 'created'}}con:{{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} - Reemplace
{{t 'last_activity'}}con:{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
Agregar botones Seguir/Dejar de seguir en una organización compartida
Se puede permitir que los usuarios reciban notificaciones por correo electrónico de las solicitudes enviadas a su organización compartida. El asistente {{subscribe}} inserta un botón "seguir" que los usuarios pueden usar si desean recibir notificaciones por correo electrónico cuando se crea o se actualiza una solicitud en su organización compartida. Los usuarios también tienen la opción de dejar de seguir si ya no desean recibir las actualizaciones.
- Página de lista de solicitudes
{{#form 'requests_filter'}}...{{/form}}
- Agregue el asistente
{{subscribe}}al objeto form.
Ejemplo
{{#form 'requests_filter' class='request-table-toolbar'}}
{{input 'query' id='quick-search' type='search' class='requests-search'}}
<div class="request-table-filters">
{{label 'organization' for='request-organization-select' class='request-filter'}}
{{select 'organization' id='request-organization-select' class='request-filter'}}
{{subscribe}}
{{label 'status' for='request-status-select' class='request-filter'}}
{{select 'status' id='request-status-select' class='request-filter'}}
</div>
{{/form}}Referencia
Permitir que los usuarios que han iniciado sesión envíen copias (CC) de solicitudes de soporte a otros usuarios
Se puede permitir que los usuarios que han iniciado sesión agreguen copias CC a las solicitudes de soporte nuevas y existentes en el centro de ayuda. Cuando se agrega una copia CC a una solicitud de soporte, el usuario que recibe la copia recibirá notificaciones por correo electrónico sobre las actualizaciones a los tickets.
Después de agregar el código al tema personalizado, se debe activar la función, consulte Configurar permisos para enviar copias (CC).
- Página de solicitud
{{#form 'comment' class='comment-form'}}...{{/form}}
- Inserte el siguiente fragmento dentro del formulario de comentarios.
{{#if help_center.request_ccs_enabled}} <div class="comment-ccs"> {{token_field 'ccs' class="ccs-input"}} </div> {{/if}}
Agregar un vínculo a la solicitud principal en las solicitudes de seguimiento
Se puede agregar un vínculo a la solicitud principal (si existe) en una solicitud de seguimiento.
- Página de solicitud
Receta
- Agregue el siguiente fragmento a la plantilla de la página Solicitud donde desea mostrar el vínculo al ticket principal (si existe):
{{#if request.followup_source_id}} <dl class="request-details"> <dt>{{t 'followup'}}</dt> <dd>{{link 'request' id=request.followup_source_id}} </dd> </dl> {{/if}}
Activar CSAT para tickets resueltos en el Portal del cliente
- Página de solicitud
- Agregue un bloque
{{#with satisfaction_response}}...{{/with}}a la plantilla request_page.hbs.
-
Consulte el archivo request_page.hbs del tema Copenhagen en GitHub.
- Agregue el siguiente código de plantilla:
{{#with satisfaction_response}} {{#with rating}} <dl class="request-details"> <dt>{{t 'rating'}}</dt> <dd> <div> {{#is scale_type 'numeric'}} {{t 'numerical_rating' value=value max_value=max_value}} {{else}} {{scale_value}} {{/is}} </div> {{#link 'survey_response' id=../id}} {{#if ../editable}} {{t 'edit_feedback'}} {{else}} {{t 'view_feedback'}} {{/if}} {{/link}} </dd> </dl> {{else}} {{#if editable}} <dl class="request-details"> <dt>{{t 'rating'}}</dt> <dd> {{#link 'survey_response' id=id}} {{t 'add_feedback'}} {{/link}} </dd> </dl> {{/if}} {{/with}} {{/with}}
Agregar botones para votar en los artículos
Los botones para votar en los artículos forman parte del tema Copengahen estándar. Pero si la opción para votar no está disponible en los artículos, es posible que se hayan eliminado los botones del tema.
El código para agregar botones para votar puede variar según el tema, pero este es el código para el tema Copenhagen estándar, por si se necesita.
- Artículo
- Agregue el código siguiente a la plantilla Página de artículo:
{{#with article}} <div class="article-votes"> <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span> <div class="article-votes-controls" role='radiogroup'> {{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}} </div> <small class="article-votes-count"> {{vote 'label' class='article-vote-label'}} </small> </div> {{/with}}
Agregar etiquetas de contenido a artículos y publicaciones
El tema Copenhagen estándar muestra etiquetas de contenido en los artículos, las publicaciones de la comunidad y las páginas de búsqueda de manera predeterminada. Si está usando un tema personalizado o del Marketplace, es posible que tenga que actualizar el tema para mostrar las etiquetas de contenido en esas páginas. Para comenzar, puede usar los siguientes archivos de plantilla del tema Copenhagen como guía:
Una vez que se sienta a gusto, puede comenzar a agregar etiquetas de contenido en otras páginas. Por ejemplo, el siguiente fragmento agrega una lista de etiquetas de contenido a la plantilla de la página de temas de la comunidad.
{{#each posts}}
...
{{#if (compare content_tags.length ">" 0)}}
<ul class="content-tag-list">
{{#each content_tags}}
<li class="content-tag-item">
{{#link "search_result" content_tag_id=id}}
{{name}}
{{/link}}
</li>
{{/each}}
</ul>
{{/if}}
...
{{/each}}Agregar insignias al tema personalizado del centro de ayuda
Este tema trata sobre lo siguiente:
Agregar el nuevo asistente actions de perfil de usuario
Deberá agregar la opción Otorgar insignia si desea otorgar insignias a los agentes. Sin embargo, antes de poder hacerlo, deberá agregar el nuevo asistente actions.
Para agregar la declaración del asistente actions
- Abra el editor de código de temas en línea y vaya a la página del perfil de usuario de un agente.
Page filename: user_profile_page.hbs
- Ubique la declaración del asistente edit.
{{edit}} - Sustituya la declaración del asistente edit por la nueva declaración del asistente actions.
{{actions}}
Ahora los agentes podrán otorgar insignias. El nuevo botón será rediseñado con CSS de acuerdo a sus preferencias. Si desea más inspiración consulte el tema de ejemplo de Zendesk.
Mostrar las insignias de cargo en la página de lista de publicaciones
Puede agregar insignias de cargos a modo de rótulos que se encuentran contiguos al nombre del autor en la página de la lista de publicaciones. El aspecto es parecido a los rótulos del estado de publicación, ya que, para hacerlo más sencillo, se vuelve a utilizar la clase de estilo.
Para mostrar las insignias de cargo en la página de lista de publicaciones
- Abra el editor del código de temas en línea
Page filename: community_topic_page.hbs
- Busque la declaración author name. En el tema Copenhagen, la línea se vería así:
<li class="meta-data">{{author.name}}</li> - Agregue este fragmento a la línea después de la declaración:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Para usuarios avanzados: no (re)utilice la clase CSS status-label en esta situación. En lugar de ello, cree una nueva clase CSS especializada que se pueda modificar de forma independiente del estilo del rótulo del estado.
Este es un ejemplo de una insignia de cargo para un miembro de la comunidad
Mostrar las insignias de cargo en una página de publicaciones y de comentarios
Para mostrar las insignias de cargo en la página de lista de publicaciones
- Abra el editor del código de temas en línea
Page filename: community_post_page.hbs
- Busque la declaración author name. En el tema Copenhagen, la línea se vería así:
<li class="meta-data">{{author.name}}</li> - Agregue este fragmento a la línea después de la declaración:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Mostrar las insignias de cargo y logros en una página de perfil de usuario
En una página de perfil de usuario, lo más seguro es que quiera agregar más que solo las insignias de cargos; por ejemplo, también puede agregar los logros del usuario. El siguiente ejemplo supone que existe un icono gráfico para cada insignia de logro. Basándonos en el tema Copenhagen, las insignias de logros podrían verse así:
Para mostrar las insignias de cargo y logros en una página de perfil de usuario
- Abra el editor del código de temas en línea
Page filename: user_profile_page.hbs
- Ubique las líneas en el archivo donde se renderiza el nombre del usuario. Por ejemplo:
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} </h1> - Reemplace ese fragmento con lo siguiente:
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} {{#each user.badges}} {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} {{/each}} </h1> <div style="margin-top: 1em;"> {{#each user.badges}} {{#is category_slug "achievements"}} <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;"> <img src="{{icon_url}}" height="40"><br> <span style="font-size: 0.8em;">{{name}}</span> </div> {{/is}} {{/each}} </div>
En este ejemplo, todos los estilos CSS están integrados para que el ejemplo sea sencillo. Lo más conveniente es usar estos ejemplos de inspiración pero dedicar el tiempo que sea necesario para asegurarse de que el estilo refleje su propio tema.
Permitir que los usuarios vean los perfiles de usuario en el centro de ayuda
En esta sección se describe cómo actualizar las plantillas necesarias para que los usuarios del centro de ayuda puedan hacer clic en el nombre o el avatar del autor y ver el perfil del usuario.
link en el lenguaje de plantillas Curlybars (consulte link helper en la documentación de las plantillas (en inglés)) para actualizar las siguientes plantillas:
ArtículosHaga las siguientes actualizaciones en la plantilla de la página de artículo.
Actualizar el nombre del autor del artículoReemplace el siguiente bloque if:
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
con el siguiente asistente link:
{{#link "user_profile" id=article.author.id class="user-profile"}}
{{article.author.name}}
{{/link}}
Actualizar los nombres de los autores de los comentariosReemplace el siguiente bloque if:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con el siguiente asistente link:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Actualizar el avatar de los autores de los artículos y los comentariosReemplace la siguiente etiqueta de imagen:
<img src="{{article.author.avatar_url}}" alt="Avatar"/>
con el siguiente asistente link:
{{#link "user_profile" id=article.author.id class="user-profile"}}
<img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}
Publicaciones en la comunidadHaga las siguientes actualizaciones en la plantilla de la página de publicación de la comunidad.
Actualizar los nombres de los autores de las publicacionesReemplace el siguiente bloque if:
{{#if post.author.url}}
<a href="{{post.author.url}}" target="_zendesk_lotus">
{{post.author.name}}
</a>
{{else}}
{{post.author.name}}
{{/if}}
con el siguiente asistente link:
{{#link "user_profile" id=post.author.id class="user-profile"}}
{{post.author.name}}
{{/link}}
Actualizar los nombres de los autores de los comentariosReemplace el siguiente bloque if:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con el siguiente asistente link:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Actualizar los avatares de los autores de las publicacionesReemplace la siguiente etiqueta de imagen:
<img src="{{post.author.avatar_url}}" alt="Avatar"/>
con el siguiente asistente link:
{{#link "user_profile" id=post.author.id class="user-profile"}}
<img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
Actualizar los avatares de los autores de los comentariosReemplace la siguiente etiqueta de imagen:
<img src="{{author.avatar_url}}" alt="Avatar"/>
con el siguiente asistente link:
{{#link "user_profile" id=author.id class="user-profile"}}
<img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}
Resultados de la búsquedaHaga las siguientes actualizaciones en la plantilla de resultados de la búsqueda.
Actualizar los nombres de los autores de los artículos en los resultadosReemplace el siguiente bloque if en el bloque {{#each article_results}}:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con el siguiente asistente link:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Actualizar los nombres de los autores de las publicaciones en los resultadosReemplace el siguiente bloque if en el bloque {{#each post_results}}:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con el siguiente asistente link:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Actualizar los resultados de la búsqueda en los temas más antiguosSi tiene un tema más antiguo, es probable que los resultados de la búsqueda utilicen el asistente {{meta}} en su lugar. En ese caso, puede usar el código que se describe en esta sección para vincular los nombres de los autores a las páginas de perfil del centro de ayuda.
Puede que tenga que actualizar el estilo del CSS para que la página de resultados se vea uniforme.
Actualizar los nombres de los autores de los artículos en los resultadosReemplace las siguientes etiquetas div:
<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>
Con lo siguiente:
<ol
class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
Para el resultado final:
{{#each article_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
</li>
{{/each}}
Actualizar los nombres de los autores de las publicaciones en los resultadosAgregue:
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
Para el resultado final:
{{#each post_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
<span class="search-result-meta-count">
{{t 'comments_count' count=comment_count}}
</span>
</div>
</li>
{{/each}}
Activar subsecciones en el tema del centro de ayuda
Puede agregar subsecciones a la base de conocimientos de su centro de ayuda para crear más niveles en la jerarquía de contenido. Si está usando un tema personalizado antes del 29 de marzo de 2019, debe agregar código al tema personalizado del centro de ayuda para activar las subsecciones. El código que sigue viene con versiones posteriores del tema Copenhagen.
- Sección
section.sections
- Inserte el siguiente fragmento en la plantilla de la página de sección de Zendesk, section_page.hbs, después de la etiqueta del encabezado (
... {{pagination}}) :{{#if section.sections}} <ul class="section-list section-list--collapsed"> {{#each section.sections}} <li class="section-list-item"> <a href="{{url}}"> <span>{{name}}</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/> </svg> </a> </li> {{/each}} <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a> </ul> {{/if}} {{#if section.articles}} <ul class="article-list"> {{#each section.articles}} <li class="article-list-item {{#if promoted}} article-promoted{{/if}}"> {{#if promoted}}<span data-title="{{t 'promoted'}}" class="icon-star"></span>{{/if}} <a href="{{url}}" class="article-list-link">{{title}}</a> </li> {{/each}} </ul> {{else}} <i class="section-empty"> <a href="{{section.url}}">{{t 'empty'}}</a> </i> {{/if}}
Agregar filtros y resultados a la barra lateral de varios centros de ayuda en la página de resultados de la búsqueda
La búsqueda del centro de ayuda les permite a los usuarios hacer búsquedas en todos los centros de ayuda (si son varios), y presentar los resultados de una búsqueda realizada en los centros de ayuda, la base de conocimientos y la comunidad en una secuencia unificada y con filtros en la página de resultados de la búsqueda.
Si está usando un tema que fue personalizado antes del 29 de marzo de 2019, deberá agregar código al tema personalizado del centro de ayuda para admitir los resultados unificados de la búsqueda y la función de búsqueda en varios centros de ayuda. Si cuenta con varios centros de ayuda, tendrá que actualizar el tema para cada uno de ellos.
La forma más rápida de realizar los cambios necesarios en su tema es importar la última versión del tema Copenhagen que sí admite los resultados unificados de búsqueda. Para ello, consulte Adición de un tema del centro de ayuda a Guide.
help_center_filters, filters y subfilters en el lenguaje de plantillas Curlybars para actualizar los siguientes archivos:
Actualizar la plantilla de resultados de la búsqueda para agregar filtros a la barra lateral
Es necesario actualizar la plantilla de resultados de la búsqueda para poder agregar filtros a la barra lateral e iterar a través de la lista de resultados.
Agregar filtros a la barra lateral
Este fragmento es un ejemplo de cómo se pueden implementar facetas de búsqueda en la barra lateral de la página de resultados de la búsqueda usando los nuevos asistentes de filtro.
Inserte el siguiente código Este fragmento es un buen ejemplo de cómo usar el asistente {{results}} para iterar a través de la lista de resultados unificados de la búsqueda. Reemplace los asistentes en la plantilla de resultados de la búsqueda con lo siguiente:
<section class="search-results-sidebar">
{{#if help_center.community_enabled}}
<section class="filters-in-section collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
<ul>
{{#each filters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar">
{{#is current_filter.identifier 'knowledge_base'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
{{/is}}
{{#is current_filter.identifier 'community'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
{{/is}}
<ul>
{{#each subfilters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</section>{{article_results}} y {{post_results}}, además de sus subencabezados asociados de búsqueda-resultados H3{{#if results}}
<ul class="search-results-list">
{{#each results}}
<li class="search-result-list-item result-{{type}}">
<h2 class="search-result-title">
<a href="{{url}}" class="results-list-item-link">{{title}}</a>
</h2>
<article>
<div class="search-result-icons">
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
{{#if comment_count}}
<span class="search-result-meta-count">
{{comment_count}}
</span>
{{/if}}
</div>
<ul class="meta-group">
<li>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
<li class="meta-data">{{author.name}}</li>
<li class="meta-data">{{date created_at}}</li>
</ul>
<div class="search-results-description">{{text}}</div>
</article>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
</p>
{{/if}}
Actualizar el estilo CSS para los filtros de la barra lateral en la página de resultados de la búsqueda
Es posible agregar estilos CSS para los filtros de la barra lateral. El siguiente ejemplo se basa en el tema Copenhagen.
Asegúrese de que las siguientes reglas CSS estén incluidas en el archivo style.css:
/***** Search results *****/
.search-results {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 1024px) {
.search-results {
flex-direction: row;
}
}
.search-results-column {
flex: 1;
}
@media (min-width: 1024px) {
.search-results-column {
flex: 0 0 75%;
}
}
.search-results-sidebar {
border-top: 1px solid #ddd;
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}
@media (min-width: 1024px) {
.search-results-sidebar {
border: 0;
flex: 0 0 20%;
height: auto;
}
}
.search-results-sidebar .sidenav-item[aria-selected="true"] {
background-color: $brand_color;
color: $brand_text_color;
text-decoration: none;
}
.search-results-subheading {
font-size: 18px;
font-weight: 600;
}
.search-results-list {
margin-bottom: 25px;
}
.search-results-list > li {
padding: 20px 0;
}
.search-results-list > li:first-child {
border-top: 1px solid #ddd;
}
.search-results-list > li h2 {
margin-bottom: 0;
}
.search-result-title {
font-size: 16px;
}
.search-result-description {
margin-top: 15px;
word-break: break-word;
}
.search-result-votes, .search-result-meta-count {
color: lighten($text_color, 20%);
display: inline-block;
font-size: 13px;
font-weight: 300;
padding: 4px 5px;
position: relative;
}
.search-result-votes::before, .search-result-meta-count::before {
color: $brand_color;
}
[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
margin-left: 5px;
}
[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
margin-right: 3px;
}
[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
margin-right: 5px;
}
[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
margin-left: 3px;
}
.search-result-votes::before {
content: "\1F44D";
}
.search-result-meta-count::before {
content: "\1F4AC";
}
.search-result .meta-group {
align-items: center;
}
.search-result-breadcrumbs {
margin: 0;
}
.search-result-breadcrumbs li:last-child::after {
content: "·";
display: inline-block;
margin: 0 5px;
}
/* Non-latin search results highlight */
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-result-description em {
font-style: normal;
background: yellow;
}
/* Use bold to highlight for the rest of supported non-latin languages */
html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
font-style: bold;
}
Actualizar JavaScript para la barra lateral plegable en la página de resultados de la búsqueda
Es posible añadir JavaScript para la barra lateral plegable en la página de resultados de la búsqueda. El siguiente ejemplo se basa en el tema Copenhagen.
Reemplace el siguiente bloque en el archivo script.js en el tema personalizado:
// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});
con el siguiente fragmento de código:
// Toggles expanded aria to collapsible elements
var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');
Array.prototype.forEach.call(collapsible, function(el) {
var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');
el.addEventListener('click', function(e) {
toggleNavigation(toggle, this);
});
el.addEventListener('keyup', function(e) {
if (e.keyCode === 27) { // Escape key
closeNavigation(toggle, this);
}
});
});