Plantillas avanzadas en BauDocWriter

Cómo escribir plantillas avanzadas en BauDocWriter



Hasta ahora, el manual ha mostrado plantillas bastante sencillas como la plantilla principal de nuestro primer sitio o la plantilla de categorías que vimos dos artículos atrás.

Si nuestro sitio sólo pudiese tener este tipo de páginas tan simples, no tendríamos mucho éxito como diseñador, por eso vamos a ver cómo escribir plantillas ligeramente más complejas.

Añadiendo estilos

¿Qué sería de un sitio Web sin estilos ? Pues prácticamente lo que tenemos hasta ahora, así que lo primero que tenemos que hacer es precisamente crear un estilo nuevo para nuestro sitio Web.

Comenzamos creando un nuevo archivo de tipo Otros :

Creación de archivo de estilo

En este caso lo he llamado Layout.css y lo he colocado en la carpeta Styles como se ve en la imagen inicial de este artículo.

Se nos abrirá una ventana donde podemos escribir el código CSS que necesitemos para nuestro sitio. Yo me he decidido por utilizar el mismo estilo que uso en esta Web pero por supuesto podemos crear nuestro propio estilo o utilizar BootStrap o cualquier CSS válido que deseemos:

Ventana CSS.jpg

Sólo por curiosidad, BauDocWriter utiliza un preprocesador para CSS llamado SmallCss basado en la sintaxis de Sass aunque algo más reducido y con ciertas peculiaridades.

Una vez hemos definido nuestro estilo, simplemente debemos cambiar la plantilla principal para presentar un sitio más moderno. Vamos a comenzar añadiendo el estilo a la plantilla: abrimos la plantilla principal Main.tpt y arrastramos y soltamos el estilo Layout.css que acabamos de crear para que se utilice en la siguiente generación del sitio. Nuestra plantilla será ahora de esta forma:

	
%html {lang="es"}
	%head
		%title $FullTitle
		%meta { content = "text/html; charset=utf-8" http-equiv="Content-Type" }
		%meta { name = "viewport" content="width=device-width, initial-scale=1.0" }
		%meta { name = "revisit-after" content = "2 days"}
		%meta { name = "robots" content = "index,follow"}
		%meta { name = "publisher" content = $Author }
		%meta { name = "copyright" content = "Creative Commons"}
		%meta { name = "author" content = $Author }
		%meta { name = "distribution" content ="global"}
		%meta { name = "description" content = $Description }
		%meta { name = "keywords" content = $Keywords }
		%meta { name = "Content-Type" content = "Content-Type: text/html; charset=utf-8" }
		%meta { name = "generator" content = "BauDocWriter" }
		%meta { name="lang" content="es" }
		%meta { name="siteinfo" content="robots.txt" }
		%link { href="../../../Styles/Layout.css" rel="stylesheet" }
	%body
		$Content
		
		<%if $AdditionalContent != "" && $AdditionalContent != "null" %>
			%div
				$AdditionalContent
	

donde hemos añadido la línea %link que señala a nuestro archivo de estilos.

Si ahora compilamos nuestro sitio, obtendremos este resultado:

Primera generación del sitio Web con la nueva plantilla

Que no es aún demasiado espectacular, de hecho, podríamos incluso pensar que es incorrecto porque nos aparecen los párrafos centrados dado que no hemos aplicado ninguna clase a nuestro contenido.

Vamos entonces a ampliar la plantilla para aplicar las clases del CSS que acabamos de crear. En la sección body de nuestra plantilla escribimos lo siguiente:

	
	%body
		&Page
			%section { class = "MainBar" }
				<%if $Content != "" %>
					%div
						$Content
				
				<%if $AdditionalContent != "" && $AdditionalContent != "null" %>
					%div
						$AdditionalContent
	

para los despistados, hemos añadido un div con la clase Page y una sección que va a mantener la barra principal.

Aún no hemos definido la barra lateral ni la cabecera ni el pie, lo veremos en el siguiente paso de definición de secciones .

Sigue sin ser un sitio demasiado espectacular, pero vamos a ir un paso más allá y modificar la plantilla del artículo para que muestre la imagen predeterminada del artículo y algunos estilos adicionales.

Estilos del artículo

Antes de comenzar a modificar la plantilla de artículo vamos a abrir el documento Página 1 que creamos en el paso de definición de categorías y le vamos a añadir una imagen predeterminada.

Podemos seguir los pasos indicados en el la página trucos para mejorar el contenido de los documentos . En mi caso, simplemente he abierto el navegador, he buscado la imagen de un manual, la he copiado en el portapapeles y he pulsado el botón Pegar imagen que aparece en la parte inferior de la ventana de edición de Pagina 1 :

Asignar una imagen a Página 1

Como podemos ver en la imagen anterior, en realidad se han añadido dos archivos: Pagina 1.jpg y th _Pagina 1.jpg : el primer archivo es la imagen que hemos pegado desde el portapeles, el segundo es un thumbnail o imagen reducida que se utiliza en los índices de las categorías (o en cualquier lugar donde nos interese poner una imagen de este tipo).

Ahora que ya tenemos nuestra imagen predeterminada para la página, podemos ir ya a la plantilla Article.tpt y modificarla para mostrar la imagen en la parte superior del texto y cambiar un poco el estilo del artículo para que se muestre el título y la descripción:

	
%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

	%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
	

En realidad, aprovechando las circunstancias he creado también un pequeño calendario en la parte superior del artículo, he añadido etiquetas itemscope , itemtype o itemprop para aplicar nuestras primeras mejoras SEO al sitio Web y he añadido estilos.

Como podemos ver en la plantilla, además utilizo nuevas variables: $Day, $MonthName y $Year son las diferentes partes de la fecha de creación de la página y $UrlImage es la dirección del archivo de la imagen principal del artículo. El resto de variables ya las conocemos: $Title con el título del artículo, $Description con el valor del cuadro de texto Descripción y $Content con el contenido compilado del artículo.

Ahora nuestra página ya comienza a tener un aspecto bastante más interesante:

Página 1 con plantilla asociada

para terminar con nuestra sección de preparación de plantillas avanzadas, en el siguiente artículo veremos cómo mejorar nuestra plantilla de categorías .



Páginas relacionadas