Bloques propios de un tema
Esta característica avanzada permite usar una función externa para generar el código HTML de bloques especiales de un tema. Para entender por qué esto es necesario vamos a utilizar, una vez más, el tema Ocean como ejemplo.
Ocean tiene un tipo de bloque llamado "sidebar-quote". Su misión es mostrar una cita aleatoria cada vez que se carga una página. Definición del tipo de bloque:
{
"id": "sidebar-quote",
"code": "sidebar-quote",
"title": "@ocean_sidebar_quote",
"type": "theme",
"width": "220",
"order": "random"
}
¿Por qué tenemos que establecer "type": "theme"? Nuestro objetivo es mostrar una cita al azar entre comillas. En el tema Ocean, las comillas son dos imágenes independientes. Si dejáramos el trabajo de mostrar la cita a Navigate CMS, éste sólo devolvería el texto. Para que el bloque muestre el texto añadiendo comillas antes y después tenemos que programar nuestra propia función para generar el HTML del bloque.
Podríamos haberlo conseguido de 3 maneras diferentes:
a utilizando los selectores :before y :after en la hoja de estilos del tema
b obligando al usuario a incluir las imágenes de las comillas al crear una cita en Navigate CMS
c el tema añade una etiqueta img en ambos lados del texto automáticamente
Cada método tiene sus ventajas y desventajas, pero no discutiremos aquí esta cuestión. Ocean utiliza el último método y es un ejemplo perfecto para entender los bloques propios de un tema.
En nuestras plantillas deberemos solicitar una cita a través de una etiqueta nv:
<nv object="nvweb" name="blocks" type="sidebar-quote" number="1" />
No hay nada extraño aquí. Queremos sólo un elemento del tipo "sidebar-quote". Navigate CMS analiza esta etiqueta y selecciona una cita (blolque) al azar siguiendo las reglas establecidas en la definición. También comprueba que se trata de un bloque del tipo "theme", propiedad que hemos dado antes en la definición. En este punto, el motor de la aplicación realiza una llamada al webget del tema requiriendo que genere el código HTML para el bloque seleccionado.
En este caso concreto el motor llama a una función llamada: nvweb_ocean_blocks_render. Cambia "ocean" por el código interno de tu tema. El código fuente de esta función es:
function nvweb_ocean_blocks_render($block, $vars)
{
global $current;
global $theme;
global $website;
$out = array();
switch($block->type)
{
case 'sidebar-quote':
$out[] = '<div class="block-quote-right">';
$out[] = '<span>';
$out[] = '<img src="img/quotes1.png" align="bottom"/>';
$out[] = strip_tags($block->trigger['trigger-content'][$current['lang']]);
$out[] = '<img src="img/quotes2.png" align="top"/>';
$out[] = '</span>';
$out[] = '</div>';
break;
}
return implode("", $out);
}
Esta función se llamará para cada bloque propio de un tema que sea necesario generar. Se envían 2 parámetros: objeto bloque y el conjunto de atributos de las etiquetas nv que genera esta llamada.
Podríamos recibir otros tipos de bloques, así que tenemos que tener un switch/case basado en esa variable. Una vez que identificamos el tipo de bloque "sidebar-quote" comenzamos a generar el código HTML en la variable $out. Añadimos un contenedor div, las dos imágenes de comillas y finalmente el texto de la cita extraído del objeto $block que se encuentra en la propiedad "trigger".
Explicar cada propiedad del objeto $block queda fuera de esta sección del manual. Si necesitas más ayuda deja un mensaje en los foros o solicita un ticket de soporte en la página de Naviwebs.
0 Comentarios