Secciones estándar

Explicación de las secciones estándar de BauDocWriter



Como hemos visto al crear las plantillas relacionadas con etiquetas en el paso anterior, la generación de un sitio envía un gran número de variables a nuestras páginas y secciones que podemos utilizar sin restricciones.

Pero también existen algunas variables especialmente indicadas para secciones específicas que podemos utilizar en nuestros sitios Web y que aún no hemos explicado. Este artículo se dedica a estudiar en concreto las secciones de breadcrumb, páginas relacionadas e índice de páginas.

BreadCrumb o miga de pan

El término de breadcrumb o miga de pan engloba los enlaces que aparecen en algunas páginas para mostrar la lista de pasos que hemos seguido para llegar a la página que estamos leyendo. Puedes ver un ejemplo en la imagen superior de este artículo.

Por ejemplo, si estamos en la página Página 1 de nuestro sitio Web, el breadcrumb de nuestra página sería la lista: Inicio | Manual | Página 1 .

Podemos crear una sección de breadcrumb en nuestro sitio Web creando una nueva sección llamada en un alarde de originalidad BreadCrumbSection con el siguiente contenido:

	
<%if $BreadCrumb[1]->$Url != "null" %>
		%ul { class="breadcrumb" itemscope = "" itemtype="http://data-vocabulary.org/Breadcrumb"}
			%li
				%a { href=$IndexPage title="Inicio"} 
					%img { src=" images\HomeBreadcrumb.png" alt="Inicio" class="home" }
			<% for $intPage = 1 to 10 %>
				<%if $BreadCrumb[$intPage]->$Url != "null"%>
					%li
						%a { href = $BreadCrumb[$intPage]->$Url itemprop="url" } 
							%span {itemprop = "title"} $BreadCrumb[$intPage]->$Title
	

La diferencia más destacable con el resto de las secciones es que el ámbito de esta sección debe ser de tipo Página puesto que su contenido cambia en cada uno de los artículos. Por lo demás, es un código que hemos visto en otras ocasiones al mostrar etiquetas o páginas, aunque en este caso recorremos el contenido de la variable BreadCrumb . Por cierto, he añadido la imagen HombeBreadcrum.png a la carpeta Images de nuestro proyecto para que se muestre el icono con una casita que aparece al inicio del menú.

Para los curiosos, he llamado a la sección BreadCrumbSection en lugar de BreadCrumb porque la variable donde se almacenan las diferentes páginas de categoría se denomina $BreadCrumb y para evitar errores he decidido darle un nombre diferente.

Una vez definida nuestra sección, lo único que nos queda es añadirla a nuestra plantilla de página, es decir, abrimos Article.tpt y le agregamos el siguiente código al principio:

	
%div
	$BreadCrumbSection
	

con esto conseguimos que antes de mostrar siquiera el título del artículo se muestre nuestro menú con las diferentes páginas de categoría. Por supuesto, podríamos colocarlo donde quisiéramos pero los usuarios suelen estar acostumbrados a verlo al principio del artículo.

Nuestra página ahora tiene este aspecto:

Pagina 1 con breadcrumb

Páginas relacionadas

Otra de las secciones habituales de cualquier sitio Web es la dedicada a los artículos o páginas relacionadas con la actual.

BauDocWriter crea automáticamente una lista de páginas relacionadas con el artículo que está compilando teniendo en cuenta que pertenezcan a la misma categoría o etiqueta. Podemos recorrer esta lista en una sección y mostrarla en el artículo. Para ello, primero definimos una nueva sección llamada PagesRelatedSection de ámbito Página con el siguiente contenido:

	
<%if $PageRelated[1]->$Url != "null" %>
	%section { class="GridRow panel bg-clr-article" }
		%header { class = "panel-header bg-clr-article-gradient" }
			%h4 Páginas relacionadas
		%div { class="GridRowFlex" }
			<% for $intPageRelated = 1 to 10 %>
				<%if $PageRelated[$intPageRelated]->$Url != "null"%>			
					%div { class = "GridCell25 BoxThumb effect-ease-zoom-in" }
						%article
							%a { href = $PageRelated[$intPageRelated]->$Url Title = $PageRelated[$intPageRelated]->$Title }
								<% if $PageRelated[$intPageRelated]->$UrlThumbnail != "" %>
									%img { src = $PageRelated[$intPageRelated]->$UrlThumbnail 
										   alt = $PageRelated[$intPageRelated]->$Title }
								<% else %>
									%img { src = " Images\NoImage.jpg" alt = $PageRelated[$intPageRelated]->$Title }	
								%span $PageRelated[$intPageRelated]->$Title
	

Como es habitual, para mostrar las páginas relacionadas sobre el artículo actual, debemos modificar la plantilla Article.tpt añadiendo el siguiente contenido al final de la plantilla:

	
%NoTag
	$PagesRelatedSection
	

Ahora, en la parte inferior de Página 2 podemos ver las páginas relacionadas, en este caso Página 1 :

Páginas relacionadas con Página 2

Página anterior, siguiente y superior

Otra de las secciones típicas que podemos encontrar en cualquier sitio Web son los enlaces de página anterior, página siguiente y en algunos casos superior.

Para definir una sección de este tipo, creamos una nueva sección que vamos a llamar PagerSection de ámbito Página con el siguiente contenido:

	
<%if $UrlPreviousPage != "null" || $UrlNextPage != "null" || $UrlTopPage != "null" %>
	%div { class="GridRow"}
%nav
	%ul { class = "pager" }
		<%if $UrlPreviousPage != "null" && $UrlPreviousPage != "" %>
			%li #a { class="previous" href = $UrlPreviousPage } « $TitlePreviousPage #
		<%if $UrlTopPage != "null" && $UrlTopPage != "" %>
			%li #a { href = $UrlTopPage } $TitleTopPage #
		<%if $UrlNextPage != "null" && $UrlNextPage != "" %>
			%li #a { class="next" href = $UrlNextPage } $TitleNextPage » #
	

Por supuesto, debemos modificar nuestras plantillas Article y CategoryItems , para incluir al final del artículo o el índice, los vínculos de anterior o siguiente. En este caso, vamos a añadir al contenido de las plantillas este código:

	
%div
	%br
	$PagerSection
	%br
	

Ahora, al compilar nuestro sitio Web veremos los cambios en Página 1 :

Pagina 1 con enlaces de página posterior y superior

En este caso no aparecen vínculos a la página anterior puesto que nuestra Página 1 es la primera página de la categoría.

A quien le resulte raro ver los vínculos de página anterior y siguiente después de las páginas relacionadas siempre puede colocar los vínculos en otra posición en la plantilla.

Conclusión

Una vez que hemos terminado de ver las secciones estándar de BauDocWriter prácticamente hemos terminado con las opciones sobre secciones de la aplicación y podemos pasar a estudiar los mapas del sitio .



Páginas relacionadas