Con la adición de Curlybars, nuestro lenguaje de plantillas para el Centro de Ayuda, se expuso la capacidad de agregar declaraciones condicionales, lo que permite tener un efecto dinámico en la representación de las páginas del Centro de ayuda. Con el uso de declaraciones condicionales, podemos dirigir el número único de ID de una categoría, sección, artículo, tema o publicación y ocultar ese elemento mientras se muestran otros.
Si tiene que encontrar la ID del elemento que desea ocultar, solo tiene que ir a la página de ese elemento y buscar en la URL. Debería encontrar algo como/hc/en-us/categories/200420805-General
. El 200420805
es la ID de mi categoría.
Esta es una pequeña animación para resaltar lo que estoy tratando de lograr cuando oculto una categoría en la página principal del Centro de ayuda (miro "Categoría 1"):
El código
Aquí describo algunas situaciones para explicar cómo se puede usar. En estos ejemplos, voy a usar el código predeterminado que se encuentra en el tema Copenhague del Centro de ayuda. Principalmente usaré el helper isnt, porque la idea básica es que si el valor no coincide, se representa el código mostrado, ocultando efectivamente (o no representando) el elemento identificado. Aquí puede ver que deseo excluir una categoría específica en la página principal, así que la pasé por la declaración isnt
:
Aquíadjunté todo el código de la plantilla de mi página principal. Puede cambiar la ID de mi categoría para que sea suya y luego podrá ocultar las categorías.
Ocultar varios elementos
Si se ocultan varios elementos, se agregan un par de líneas más de código ya que no se pueden pasar varios números de ID a una sola declaración condicional. En lugar de ello, tendremos que anidar las declaraciones condicionales para que puedan analizarse adecuadamente. Por ejemplo:
Si desea descargar el código para ocultar varias categorías, puede buscar el código aquí.
Otro ejemplo con artículos
Sé que he estado hablando bastante de categorías, así que quería mostrar cómo implementar esto en otro espacio. Mi hipótesis es que quiero reducir la exposición de un artículo en particular, pero hacer que sea accesible a través de la búsqueda o un vínculo directo a mis clientes. He elegido la página del artículo en el tema Copenhague donde aparecen otros artículos en la misma sección que el artículo actual en una barra lateral como esta:
Es posible que ya haya ocultado su artículo a nivel de sección, pero también se recomienda apuntar al artículo aquí:
Y otra vez, aquíestá el código si desea probarlo en la plantilla del artículo.
Algunas notas técnicas sobre esta funcionalidad
Es posible que haya observado un patrón que indica que el código se estaba implementando en el helper {{#each}}
que itera por la matriz de los elementos específicos solicitados. El helper de cada uno es nativo de handlebars.js, y se puede leer más sobre él en su documentación aquí. En la última imagen de arriba, se puede ver {{#each section.articles}}
en el código que representa los artículos para la sección actual, pero cuando el artículo se encuentra con la ID 219527708
, en su lugar se omite ese código y la representación pasa al siguiente artículo.
Puede haber otras maneras de lograr un comportamiento similar, así que no dude en probar con otros helpers condicionales, pero este debería ser un buen comienzo.