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á usandoun 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
- 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.
Lasplantillas de paginas可编辑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}}
.
Laspáginas personalizadas范围的脏污integradas en el基地德尔特马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 lenguajeHandlebars. 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}}
{{/each}}
Anteriormente, se podian城市搜救组件对位/sonalizar 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}} This is important security information! Pay attention!
{{/is}} {{#is section.id 203133596}} Videos available at Learning to fly
{{/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}} {{/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}}
Ejemplo
{{#each alternative_locales}} {{#is name 'Français'}} {{! do nothing }} {{else}} {{name}} {{/is}} {{/each}}
Referencia
Permitir que los usuarios ordenen los comentarios de los artículos por fecha o por votos
De manera predeterminada,洛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,
, de preferencia después de la expresión{{t 'comments'}}
{{#if comments}}
, si existe, para cerciorarse de que los clasificadores no aparezcan si nadie ha dejado un comentario todavía:Sort by: {{#each comment_sorters}} {{name}} {{/each}}
Ejemplo
{{t 'comments'}}
{{#if comments}} Sort by: {{#each comment_sorters}} {{name}} {{/each}} {{#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'}} {{user_avatar class='user-avatar'}} {{wysiwyg 'body'}} {{input type='submit'}} {{/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
{{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"}}
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}} {{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"}} ...
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
即时= true
a la expresión de búsqueda.{{search instant=true}}
Ejemplo
{{help_center.name}}
{{search即时= true}}
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 laplantilla Resultados de la búsquedadel 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.
.<节课= " search-results-sidebar " >{{#如果苏rce_filters}}
{{/if}} {{#if type_filters}} {{/if}} {{#if subfilters}} {{/if}}
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}} {{#each results}} -
{{title}} {{#if is_external}} {{/if}}
{{text}} {{/each}}
{{else}} {{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}}
{{/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{{current_filter.label}}
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'}} {{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'}} {{/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, consulteConfigurar 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}}
{{token_field 'ccs' class="ccs-input"}}{{/if}}
Agregar un vínculo a la solicitud principal en las solicitudes de seguimiento
机构需要在联合国vinculo la solicitud普林西普al (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}}
- {{t 'followup'}}
- {{link 'request' id=request.followup_source_id}}
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}}
{{t 'was_this_article_helpful'}}{{/with}}{{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}}{{vote 'label' class='article-vote-label'}}
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)}}
{{/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 asistenteactions.
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 asistenteedit.
{{edit}}
- Sustituya la declaración del asistenteeditpor la nueva declaración del asistenteactions.
{{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 deejemplo 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
- 白岩洞el编辑脏污德尔德特马
Page filename:community_topic_page.hbs
- Busque la declaraciónauthor name. En el tema Copenhagen, la línea se vería así:
<李class="meta-data">{{author.name}}
- Agregue este fragmento a la línea después de la declaración:
{{#each author.badges}}<李class="meta-data">{{#is category_slug "titles"}}{{name}}{{/is}}
{{/each}}
Para usuarios avanzados: no (re)utilice la clase CSSstatus-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
- 白岩洞el编辑脏污德尔德特马
Page filename:community_post_page.hbs
- Busque la declaraciónauthor name. En el tema Copenhagen, la línea se vería así:
<李class="meta-data">{{author.name}}
- Agregue este fragmento a la línea después de la declaración:
{{#each author.badges}}<李class="meta-data">{{#is category_slug "titles"}}{{name}}{{/is}}
{{/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
- 白岩洞el编辑脏污德尔德特马
Page filename:user_profile_page.hbs
- Ubique las líneas en el archivo donde se renderiza el nombre del usuario. Por ejemplo:
{{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}
- Reemplace ese fragmento con lo siguiente:
{{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}{{#each user.badges}}{{#is category_slug "titles"}}{{name}}{{/is}}{{/each}}
{{#each user.badges}}{{#is category_slug "achievements"}}
{{name}}
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 (consultelink helperen la documentación de las plantillas (en inglés)) para actualizar las siguientes plantillas:
Artículos
Haga las siguientes actualizaciones en la plantilla de la página de artículo.
Actualizar el nombre del autor del artículoReemplace el siguiente bloqueif
:
{{#if article.author.url}} {{article.author.name}} {{else}} {{article.author.name}} {{/if}}
con el siguiente asistentelink
:
{{#link "user_profile" id=article.author.id class="user-profile"}} {{article.author.name}} {{/link}}Actualizar los nombres de los autores de los comentarios
Reemplace el siguiente bloqueif
:
{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}
con el siguiente asistentelink
:
{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}Actualizar el avatar de los autores de los artículos y los comentarios
Reemplace la siguiente etiqueta de imagen:
con el siguiente asistentelink
:
{{#link "user_profile" id=article.author.id class="user-profile"}}Publicaciones en la comunidad{{/link}}
Haga 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 bloqueif
:
{{#if post.author.url}} {{post.author.name}} {{else}} {{post.author.name}} {{/if}}
con el siguiente asistentelink
:
{{#link "user_profile" id=post.author.id class="user-profile"}} {{post.author.name}} {{/link}}Actualizar los nombres de los autores de los comentarios
Reemplace el siguiente bloqueif
:
{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}
con el siguiente asistentelink
:
{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}Actualizar los avatares de los autores de las publicaciones
Reemplace la siguiente etiqueta de imagen:
con el siguiente asistentelink
:
{{#link "user_profile" id=post.author.id class="user-profile"}}Actualizar los avatares de los autores de los comentarios{{/link}}
Reemplace la siguiente etiqueta de imagen:
con el siguiente asistentelink
:
{{#link "user_profile" id=author.id class="user-profile"}}Resultados de la búsqueda{{/link}}
Haga 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 bloqueif
en el bloque{{#each article_results}}
:
{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}
con el siguiente asistentelink
:
{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}Actualizar los nombres de los autores de las publicaciones en los resultados
Reemplace el siguiente bloqueif
en el bloque{{#each post_results}}
:
{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}
con el siguiente asistentelink
:
{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}Actualizar los resultados de la búsqueda en los temas más antiguos
Si 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:
{{text}}
Con lo siguiente:
{{text}}
Para el resultado final:
{{#each article_results}}
Agregue:
Para el resultado final:
{{#each post_results}}
Activar subsecciones en el tema del centro de ayuda
Puedeagregar subseccionesa 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}}
- {{#each section.sections}}
- {{name}} {{/each}}
- {{#each section.articles}}
- {{#if promoted}}{{/if}} {{title}} {{/each}}
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, consulteAdición de un tema del centro de ayuda a Guide.
help_center_filters
,filters
ysubfilters
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
en la plantilla de resultados de la búsqueda:
Iteración de los resultados
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{{article_results}}
y{{post_results}}
, además de sus subencabezados asociados de búsqueda-resultados H3
en la plantilla de resultados de la búsqueda con lo siguiente:
{{#if results}}
{{#each results}} -
{{title}}
{{text}} {{/each}}
{{else}} {{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}}
{{/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{说play: 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); } }); });