Creando Temas con diazo

¿Qué es diazo?

  • Es la nueva manera de crear temas para el Plone.
  • Permite aplicar cualquier HTML en Plone.
  • Es un motor de temas.

¿Como funciona?

Funcionamiento de Diazo

Funcionamiento de Diazo

  • Con un simple XML usted substituye elementos de su template o plantilla html por contenido generado por el Plone.
  • Este concepto se basa en la técnica de programación Screen scraping.
  • Se implementa de forma sencilla en Plone usando el motor de temas diazo y el producto plone.app.theming.

Instalación

El paquete plone.app.theming esta incorporado por defecto desde versiones Plone 4.2 o superior.

Para instalar plone.app.theming dentro de su sitio Plone, entonces valla al panel de control de los Complementos en Configuración de sitio ‣ Complementos como un usuario Administrador Plone, y marque la casilla del producto Soporte de temas Diazo y haga clic en el botón Habilitar.

Usted notara que ahora tiene un nuevo elemento dentro del panel de control llamado “Temas”.

Estructura básica de un tema

  • Un tema es un simple archivo .zip conteniendo una carpeta con al menos dos archivos:

    tema-diazo/
    |-- index.html
    `-- rules.xml
    
  • Normalmente, el paquete es más complejo, conteniendo los archivos CSS, Javascripts y imágenes.

Crear una carpeta

Crear una carpeta con el nombre de su tema. En esta carpeta irá a guardar los archivos de su tema:

$ mkdir NOMBRE-TEMA

Creando el archivo manifest.cfg

Puede crear el archivo manifest.cfg con los siguientes comando:

$ cd NOMBRE-TEMA ; nano manifest.cfg

Debe tener la siguiente sintaxis:

[theme]
title = Mi primer tema diazo
description = Mi primer tema diazo para Plone
preview = preview.png

[theme:parameters]
portal_url = portal_state/portal_url

Creando el archivo index.html

Puede crear el archivo index.html, este debe agregarse en el mismo directorio del archivo manifest.cfg con los siguientes comando:

$ nano index.html

Debe al menos tener la estructura HTML siguiente:

<html>
  <head>
   <title>Mi primer tema diazo</title>
  </head>
  <body>
   <h1 id="titulo">Mi primer tema diazo</h1>
   <div id="menu">menú del sitio</div>
   <div id="contenido">Lorem ipsum... </div>
  </body>
</html>

Creando el archivo rules.xml

Puede crear el archivo rules.xml, este debe agregarse en el mismo directorio del archivo index.html con los siguientes comando:

$ nano rules.xml

Debe crear al menos la siguiente estructura HTML:

<?xml version="1.0" encoding="UTF-8"?>

<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <theme href="index.html" css:if-content="#visual-portal-wrapper" />
    <replace css:content="#portal-globalnav" css:theme="#menu" />
    <replace css:content="#portal-columns" css:theme="#contenido" />

</rules>

Define a cual template va a utilizar:

Usted puede establecer cual plantilla HTML usara para este tema con la siguiente directiva diazo:

<theme href="index.html" css:if-content="#visual-portal-wrapper" />

Ver también

  • Referencia completa de la directiva de la regla <theme />.

Adiciona la navegación de Plone:

Usted puede importar estructura de la navegación de Plone con la siguiente directiva diazo:

<replace css:content="#portal-globalnav" css:theme="#menu" />

Ver también

  • Referencia completa de la directiva de la regla <replace />.

Adiciona el Contenido:

Usted puede agregar el contenido del sitio Plone con la siguiente directiva diazo:

<replace css:content="#portal-columns" css:theme="#contenido" />

Ver también

  • Referencia completa de la directiva de la regla <replace />.

Colocando en práctica

Para probar el paquete tema diazo que lleva hecho hasta ahora puede seguir los siguientes pasos:

  1. Crear un archivo ZIP con su carpeta del nivel superior del tema.
  2. Agregue al sitio Plone
  1. Configuración del sitio ‣ Temas.
  2. Entonces para subir el archivo haga clic en el botón Subir archivo Zip.

Advertencia

Es importante destacar que la página de configuración diazo de este previamente cargado no son modificado por seguridad.

Truco

Si desea modificar la página de configuración diazo debe copiar, el tema previamente cargado haciendo clic en el botón Copiar le mostrara un mensaje emergente para agregar un Título y Descripción diferente al que cargo previamente y hace clic en el botón Crear.

Modificar tema creado

Modificar tema creado

Después de aplicar el tema, usted debe tener el código HTML, con el menú y el contenido de Plone, sin embargo, los estilos no se aplican Plone.

Tema aplicado al Plone sin estilos

Tema aplicado al Plone sin estilos

Agregando los estilos

Importando el CSS de Plone:

Usted puede re-usar los estilos CSS de Plone con la siguiente directiva diazo:

<replace css:content="head" css:theme="head" />

Esta llamada substituye todo el elemento HEAD de su HTML por el elemento HEAD de Plone

Importando el CSS de Plone

Importando el CSS de Plone

Reglas diazo

A continuación se describen algunas las reglas diazo mas comunes.

La regla <replace />

A continuación el siguiente ejemplo:

<replace css:theme="title" css:content="title"/>

El resultado aquí es que el elemento <title /> en el tema será substituido por el elemento <title /> del contenido (dinámico).

Remplaza el <title /> del tema por el <title /> del contenido

Remplaza el <title /> del tema por el <title /> del contenido

Ver también

  • Referencia completa de la directiva de la regla <replace />.

La regla <before /> y <after />

A continuación el siguiente ejemplo:

<after css:content="#portal-searchbox" css:theme="#contenido" />

Este ejemplo colocara la búsqueda de Plone al final de la página.

Agregar el cuadro de búsqueda de Plone al final de la página

Agregar el cuadro de búsqueda de Plone al final de la página.

Ver también

La regla <drop />

A continuación el siguiente ejemplo:

<drop css:content="#portal-searchbox .searchSection" />

Se utiliza para eliminar los elementos del tema o del contenido que no se utilizan.

El ejemplo anterior se eliminará el mensaje “Sólo en esta sección” que viene con la búsqueda de Plone.

Ver también

  • Referencia completa de la directiva de las reglas <drop />.

La regla <merge />

A continuación el siguiente ejemplo:

<merge attributes="class" css:theme="body" css:content="body" />

Se utiliza para combinar los valores de atributos, especialmente usado para combinar las clases CSS.

  • Si el tema tiene en su etiqueta body de esta manera:

    <body class="alpha beta">
    
  • Y el contenido posee una etiqueta body como:

    <body class="delta gamma">
    
  • El resultado del ejemplo anteriormente seria:

    <body class="alpha beta delta gamma">
    

Ver también

  • Referencia completa de la directiva de las reglas <merge />.

Orden de ejecución de reglas

En la mayoría de los casos, usted no debe preocuparse demasiado sobre el funcionamiento interno del compilador diazo. Sin embargo, a veces puede ser útil para entender el orden en que se aplican las reglas, en este caso el compilador diazo ejecutará las reglas según un orden propio y no necesariamente en el orden escrito. No hay necesidad de decorar, pero es bueno que sea señalado:

  1. En primer lugar siempre se ejecutan las reglas <before> usando el atributo theme (pero no usando el atributo theme-children).
  2. En segundo lugar seguidamente se ejecutan las reglas <drop />.
  3. En tercer lugar seguidamente se ejecutan las reglas <replace /> usando el atributo theme (pero no usando el atributo theme-children), siempre que regla <drop /> no se aplica al mismo nodo del tema o se utilizó el method="raw".
  4. En cuarto lugar seguidamente se ejecutan las reglas <strip />. Tenga en cuenta que las reglas <strip /> no impiden que otras reglas se ponga en marcha, incluso si el nodo de contenido o el tema va a ser quitado.
  5. En quinto lugar seguidamente se ejecutan las reglas que usan los attributes.
  6. En sexto lugar se ejecutara próximamente las reglas <before />, <replace /> y <after /> usando el atributo theme-children, siempre no allá reglas <replace /> usando en el tema que fue se aplicó al mismo nodo previamente del tema.
  7. En séptimo lugar se ejecutara por último las reglas <before /> usando el atributo theme (pero no usando el atributo theme-children).

Descarga código fuente

Usted puede obtener el código fuente de este ejemplo, para esto ejecute el siguiente comando:

$ git clone https://github.com/Covantec/tema-diazo.git

Tema mas completo

Usted podrá encontrar un ejemplo de tema mas completo en la siguiente dirección:

Mas ejemplos consulte el índice de paquetes Python en búsqueda de temas basados en diazo.

los comentarios son proporcionados por Disqus

Editar este documento

El código fuente de este archivo esta hospedado en GitHub. Todos pueden actualizar y corregir errores en este documento con unos clic - sin necesidad de descargar.

  1. Vaya hacia el articulo Creando Temas con diazo en GitHub.
  2. Presione el botón Fork. Este creara su propia copia personal de la documentación.
  3. Edite los archivos usando el editor de texto de GitHub desde su navegador Web
  4. Rellene en la caja de texto Commit message al final de la pagina indicando por que usted realizo estos cambios. Presione el botón Propose file change próximo a ese cuando haya finalizado.
  5. Luego diríjase a la página Send a pull request (no será necesario rellenar ningún texto adicional). Sólo tiene que pulsar el botón Send pull request.
  6. Sus cambios serán consultados por un revisor dentro de la pestaña Pull requests del proyecto en Github.

Para mas información básica acerca de como actualizar este manual y referencia a sintaxis Sphinx, por favor consulte la guía Escribiendo y actualizando el manual.