Mejoras para las plantillas con etiquetas

Algunas mejoras que podemos conseguir en las plantillas relacionadas con las etiquetas



Por ahora, en el artículo sobre definición de etiquetas vimos qué son las etiquetas, cómo añadirlas a nuestros proyectos y cómo mostrarlas en una barra lateral pero aún podemos sacar más partido de estos elementos si modificamos un poco nuestras plantillas.

Por ejemplo, si vemos el contenido de la página 1 que figura en la imagen superior de este artículo nos damos cuenta que en ningún lugar se muestra a qué etiqueta pertenece.

Resulta interesante que en la cabecera del artículo se muestre la etiqueta o etiquetas a las que pertenece el artículo de modo que al pulsar sobre ellas se nos abra la página apropiada con todos los artículos relacionados con esa etiqueta. A alguno ya se le habrá ocurrido la respuesta: hay que modificar la plantilla.

En este caso, la plantilla adecuada es la de artículos, es decir, Article.tpt a la que vamos a añadir este código justo debajo del título:

	
%nav { class = "list-horizontal" }
	%ul
		<% if $Tag[1]->$Title == "null" %>
			%li Sin etiquetas
		<%else%>
			%li #i { class="fa fa-tags" } #	
			<% for $intTag = 1 to 20 %>
				<% if $Tag[$intTag]->$Title != "null" %>
					%li #a { href = $Tag[$intTag]->$Url class="label bg-clr-tag" } $Tag[$intTag]->$Title #
	

Con este código, recorremos todas las etiquetas que puede haber en el array $Tag y mostramos los campos de título ( $Title) y su dirección ( $Url) en un hipervínculo. En caso de no existir ninguna etiqueta, simplemente mostramos el literal 'Sin etiquetas '.

Ahora, una vez generemos el sitio, nuestro artículo adquiere este aspecto donde podemos ver las etiquetas justo debajo del título:

Pagina 1 con etiquetas en la plantilla

Por completar el ejemplo, el contenido de Article.tpt ahora es éste:

	
%article { class = "panel bg-clr-article brd-article" itemscope = "" itemtype="http://schema.org/Article" }
	%header { class = "panel-header bg-clr-article-gradient ts-white" }
		%h1 $Title
		
	%nav { class = "list-horizontal" }
		%ul
			<% if $Tag[1]->$Title == "null" %>
				%li Sin etiquetas
			<%else%>
				%li #i { class="fa fa-tags" } #	
				<% for $intTag = 1 to 20 %>
					<% if $Tag[$intTag]->$Title != "null" %>
						%li #a { href = $Tag[$intTag]->$Url class="label bg-clr-tag" } $Tag[$intTag]->$Title #
						
	%aside { class = "DatePublishBlock"}
		%span { class = "DayPublish"} $Day
		%span { class = "MonthPublish" } $MonthName
		%span { class = "YearPublish" } $Year	
		
	%div { class = "panel-body" itemprop="articleBody" }
		%h4 $Description
		%br
		
		<%if $UrlImage != "" %>
			%div { class = "GridRow" }
				%div { class = "thumb-regular" }
					%img { src = $UrlImage alt = $Title }

		%br
		%div { class = "GridRow" }
			$Content
	

Ahora que ya tenemos el artículo con sus etiquetas correspondientes, puede que también nos interese mostrar las etiquetas en nuestras páginas de índice. En ese caso, debemos modificar la plantilla de elementos de categoría, es decir, CategoryItems.tpt con este código:

	
%footer { class = "panel-footer"}
	<% if $Tag[$intIndex] != "null" %>
		%div { class = "GridCell50 fl" }
			%nav { class = "list-horizontal-dotted txt-small" }
				%ul
					%li #i { class="fa fa-tags" } #
					<% for $intTag = 1 to 20 %>
						<% if $Tag[$intIndex]->$Title[$intTag] != "null" %>
							%li #a { href = $Tag[$intIndex]->$Url[$intTag] class = "label bg-clr-tag" } $Tag[$intIndex]->$Title[$intTag] #
	

en la parte del pie. Así, nuestro índice tiene este estilo con las etiquetas de cada artículo en el pie de su bloque:

Elementos de categoría con etiquetas

La plantilla de categorías completa queda así:

	
<% for $intIndex = 1 to 100 %>
	<% if $Url[$intIndex] != "null" %>
		%article { class = "cb panel bg-clr-summary brd-rounded-shadow" }
			%header { class = "panel-header bg-clr-summary-gradient"}
					%h2 #a { href = $Url[$intIndex] } $Title[$intIndex] #
					
			%div { class = "GridCell25 thumb-small fl" }
				<%if $UrlThumbnail[$intIndex] != "" %>
					%a {href= $Url[$intIndex] } #img {src = $UrlThumbnail[$intIndex] alt=$Title[$intIndex]} #
				<%else%>
					<%if $UrlImage[$intIndex] != "" %>
						%a {href = $Url[$intIndex] } #img {src = $UrlImage[$intIndex] alt=$Title[$intIndex]} #
					<%else%>
						%a {href = $Url[$intIndex] } #img {src=" Images\NoImage.jpg" alt=$Title[$intIndex]} #
						
			%div { class = "GridCell75 fr" }
				$Content[$intIndex]
				%a { class = "btn btn-sm btn-success fr" href= $Url[$intIndex] } Leer más ...
				
			%footer { class = "panel-footer"}
				<% if $Tag[$intIndex] != "null" %>
					%div { class = "GridCell50 fl" }
						%nav { class = "list-horizontal-dotted txt-small" }
							%ul
								%li #i { class="fa fa-tags" } #
								<% for $intTag = 1 to 20 %>
									<% if $Tag[$intIndex]->$Title[$intTag] != "null" %>
										%li #a { href = $Tag[$intIndex]->$Url[$intTag] class = "label bg-clr-tag" } $Tag[$intIndex]->$Title[$intTag] #
				%div { class = "GridCell25 fr" }			
					%p #b #i { class = "fa fa-calendar" } # $Date[$intIndex] # 
	

Ahora nuestro sitio Web comienza a tomar forma: tenemos artículos, categorías, etiquetas, secciones, noticias y nos faltan pocas cosas por saber de BauDocWriter pero antes de hablar de los mapas del sitio y las referencias que nos van a ayudar mucho si tenemos que mantener proyectos similares vamos a hablar de secciones estándar como los breadcrumb y las páginas relacionadas para así dar por finalizados todos los temas relacionados con secciones.



Páginas relacionadas