Cómo crear una plantilla de tags jerárquicos

El sistema de tags jerárquicos provee una funcionalidad similar a la taxonomía para clasificar artículos pero con mayor flexibilidad. Esta funcionalidad de Prontus combina el orden jerarquizado de las taxonomías con la libertad de catalogar múltiples veces de los tags. En este tutorial aprenderás cómo crear plantillas para listas de tags jerárquicos, y dónde ubicarlas.

Publicado: Martes 25 de septiembre de 2018 por David García
Última modificación: Viernes 21 de agosto de 2020
Ubicación

Para poder procesar vistas para los tags jerárquicos en Prontus debe existir el directorio /[nombre del sitio]/plantillas/multitag/. una vez ubicado el directorio, debes crear (en caso de que no exista), el archivo "default.html". Este archivo funciona de forma analoga a como lo hacen los archivos para las portadas taxonómicas y de tags. Por defecto tener el nombre "default.html". Para cambiarle de nombre (por ejemplo para usar otro formato, como JSON), debes modificar la configuración de tu webserver. Puedes ver cómo hacer esto en el artículo plantillas de tags jerárquicos.

Código

Una vez creado el archivo "default.html" debes editarlo  según tu sitio lo requiera. El siguiente es un ejemplo mínimo con las marcas necesarias para la generación de las vistas de tags jerárquicos.

<h2>Ejemplo de usoArtículos de Tags jerárquicos</h2>
<ul class="content_det">
%%loop%%
%%nif(_fid eq "fid_autor")%%
<li class="item">
<div class="art_content">
%%if(txt_titular_friendly)%%<a href="%%_fileurl%%"><h3 class="public-tit">%%titular_friendly%%</h3></a>%%/if%% %%nif(txt_titular_friendly)%%
<a href="%%_fileurl%%"><h3 class="public-tit">%%_titular%%</h3></a>%%/nif%%
<ul class="datos-art">
<li >
%%_loop_multitag_seccion%%<a href="/%%_prontus_id%%/%%_multitag_seccion_friendly%%" class="tit"> %%_multitag_seccion_nom%%</a> %%/_loop_multitag_seccion%%
</li>
<li >
%%_loop_multitag_tema%%<a href="/tema/%%_multitag_tema_friendly%%/p/1" class="tit"> %%_multitag_tema_nom%%</a>%%/_loop_multitag_tema%%
</li>
<li>
%%_loop_multitag_subtema%%<a href="/tema/%%_multitag_subtema_friendly%%/p/1" class="tit"> %%_multitag_subtema_nom%%</a>%%/_loop_multitag_subtema%%
</li>
</ul>
</div>
</li>
%%/nif%%
%%/loop%%
</ul>

Del codigo anterior se destaca el uso del _loop_multitag_seccion:

%%_loop_multitag_seccion%% 
<a href="/%%_prontus_id%%/%%_multitag_seccion_friendly%%" class="tit"> %%_multitag_seccion_nom%%</a>
%%/_loop_multitag_seccion%%

Donde se ejecuta un loop para recorrer todos los multitag tipo sección que tiene asignado un articulo. Los datos que en este ejemplo se usan son:  _multitag_seccion_friendly que contiene el enlace a la pàgina multitag y _multitag_seccion_nom que contiene el texto del nombre del multitag_seccion.

Lo mismo ocurre para los multitag tema:

%%_loop_multitag_tema%% 
<a href="/tema/%%_multitag_tema_friendly%%/p/1" class="tit"> %%_multitag_tema_nom%%</a> 
%%/_loop_multitag_tema%%

Regenerar

Las vistas de tags jerárquicos no se generan estáticamente al modificar artículos, sino que se generan dinámicamente cuando un usuario visita una página de un tag dado. Al visitar por ejemplo la página del tag "tutoriales-prontus", Prontus genera esa página dinámicamente y crea un archivo de caché, que cargará la próxima vez que un usuario visite ese tag. Para eliminar estas páginas cacheadas y volver a procesar las plantillas de tags jerárquicos y generar las salidas según los artículos publicados, debes visitar la página Publicar → Administrar Tags Jerárquicos del panel de administración de Prontus.

En esta vista debes hacer click en  el botón "Borrar caché de Multitags".

Debes dar click en el mensaje de confirmación en el botón "Continuar"

Una vez finalizado el proceso de regeneración de las portadas de Tags Jerárquicos se mostrará el siguiente mensaje:

Finalmente podrás revisar y copiar los links a cada una de las portadas de tags jerárquicos haciendo click en el siguiente icono: 

Crear vistas de Tags Jerárquicos de Secciones, Temas y Subtemas. 

Una vez definida tu plantilla de tags jerárquicos y algunos tags, vas a necesitar que los usuarios puedan visitar esos listados de tags. Para esto una alternativa es generar una interfaz de selección. Puedes crear de forma independiente vistas de listas de articulos para vistas de sección, temas y subtemas de forma independiente, (Ver Ejemplo para plantilla de selectores)

Secciones 

En /[nombre del sitio]/plantillas/multitag/ crea el siguiente archivo (En caso de que no exista), "secciones.html" y coloca el código: 

    <select class="form-control" name="multitag-search-secciones" id="multitag-search-secciones">
<option value=""> -- Selecciona -- </option>
%%loop%%
<option value="%%value%%">%%name%%</option>
%%/loop%%
</select>
Temas  

En /[nombre del sitio]/plantillas/multitag/ crea el siguiente archivo (En caso de que no exista), "temas.html" y coloca el código: 

<select class="form-control" name="multitag-search-temas" id="multitag-search-temas">
<option value=""> -- Selecciona -- </option>
%%loop%%<option value="%%value%%">%%name%%</option>%%/loop%%
</select>

Subtemas 

En /[nombre del sitio]/plantillas/multitag/ crea el siguiente archivo (En caso de que no exista), "subtemas.html" y coloca el código: 

<select class="form-control" name="multitag-search-subtemas" id="multitag-search-subtemas">
<option value=""> -- Selecciona -- </option>
%%loop%%
<option value="%%value%%">
%%name%%
</option>
%%/loop%%
</select>

Regenerar

Una vez creadas o editadas las vistas de multitags, debes regenerarlas haciendo click en el botón "Actualizar vistas de Multitags"

Los Archivos generados se encontraran en el directorio /[nombre del prontus]/site/multitag/  con los nombres secciones.html, temas.html, subtemas.html de la siguiente forma:

Combo de Secciones:

/[nombre del prontus]/site/multitag/secciones.html

Combo de Temas:

/[nombre del prontus]/site/multitag/temas.html

Combo de Subtemas:

/[nombre del prontus]/site/multitag/subtemas.html
Implementar combos de Tags Jerárquicos en una Portada

Una vez generadas las vistas de Tags Jerárquicos de Secciones, Temas y Subtemas podemos hacer uso de ellas en cualquier Portada que deseemos. En el siguiente ejemplo verás como se implementan las vistas en una portada que hemos llamado "inicio.html", ubicada en /[nombre del sitio]/plantillas/edic/nroedic/port/ haciendo uso del siguiente código:

<div class="row">
<div class="col-sm-4"> 
<!--#include virtual="/%%_prontus_id%%/site/multitag/secciones.html"--> 
</div> 
<div class="col-sm-4"> 
<!--#include virtual="/%%_prontus_id%%/site/multitag/temas.html"--> 
</div> 
<div class="col-sm-3"> 
<!--#include virtual="/%%_prontus_id%%/site/multitag/subtemas.html"--> 
</div>
</div>

El código completo del archivo de la portada "inicio.html" quedaría de la siguiente forma:

<!doctype html>
<html>
  <head>
<meta charset="utf-8">
  <title>Ejemplo de Portada con Vistas de Tags Jerárquicos</title>
</head>
  <body class="pro-inicio">
    <header class="header-container">
<!--# include file="/%%_prontus_id%%/site/edic/base/port/_m_header.html" -->
  </header>
  <div id="main-content" class="container">
<section id="encabezado">
%%loop1(destacado)%%
  %%if(_loopcounter == 1)%%
<h1>%%_titular%%</h1>
  %%if(_txt_bajada)%%
%%_txt_bajada%%
%%/if%%
          %%/if%%
  %%/loop%%
  </section>
  <section id="busqueda" class="container">
  <h2>Buscar </h2>
<div class="row pro-buscar">
  <div class="col-sm-9 nopad">
<form id="searchform-multitags" method="get" action="">
  <div class="row">
  <div class="col-sm-12">
  <h4>Por categorías</h4>
</div>
  </div>
<div class="row">
  <div class="col-sm-4">
  <!--#include virtual="/%%_prontus_id%%/site/multitag/secciones.html"-->
  </div>
<div class="col-sm-4">
  <!--#include virtual="/%%_prontus_id%%/site/multitag/temas.html"-->
  </div>
  <div class="col-sm-3">
  <!--#include virtual="/%%_prontus_id%%/site/multitag/subtemas.html"-->
</div>
  <div class="col-sm-1">
<button id="busca_mtag" class="btn btn-default" type="submit"><span class="fas fa-search"></span></button>
</div>
  </div>
  </form>
  </div>
  </div>
  <h2 id="titulo_busqueda" style="display:none">Resultados de la búsqueda</h3>
  <section id="search-resultados" style="display:none">
  </section>
  </section>
  </div>
  <footer class="footer-container">
<!--# include file="/%%_prontus_id%%/site/edic/base/port/_m_footer.html" -->
</footer>
  <!--# include file="/%%_prontus_id%%/js-local/_includedjavascripts_port.html" -->
  </body>
</html>