27. Recursos

¡Obtén el código!

Obtén el código para este capítulo (Más información) usando este comando en el directorio buildout:

cp -R src/ploneconf.site_sneak/chapters/27_resources/ src/ploneconf.site

Todavía no hemos hablado de los archivos CSS y Javascript. Por el momento estos son considerados recursos estáticos.

Puede declarar y acceder a recursos estáticos con direcciones URLs especiales. El archivo configure.zcml de nuestro paquete ya tiene una declaración de recursos:

<browser:resourceDirectory
  name="ploneconf.site"
  directory="resources" />

Ahora todos los archivos que ponemos en la carpeta llamada resources se pueden encontrar a través de la dirección URL http://localhost:8080/Plone/++resource++ploneconf.site/something.js

Vamos a crear un archivo ploneconf.css y un archivo ploneconf.js en la carpeta resources.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#visual-portal-wrapper {
    margin: 0 auto;
    position: relative;
    width: 1024px;
}

@media only screen and (max-width: 980px) {
   #visual-portal-wrapper {
       position: relative;
       width: auto;
   }
}

@media only screen and (max-width: 768px) {
   #portal-columns > div {
       width: 97.75%;
       margin-left: -98.875%;
       clear: both;
   }

   .searchButton,
   .searchSection {
       display: none;
   }
}

Si accedemos a la dirección URL http://localhost:8080/Plone/++resource++ploneconf.site/ploneconf.css para ver nuestro archivo CSS.

¿Cómo hacer que nuestros archivos Javascript y CSS sean usados cuando visiten la página? Añadiendo directamente en el HTML no es una buena solución, teniendo muchos archivos CSS y JS ralentiza carga de la página.

Con las herramientas portal_css y portal_javascript Plone tiene administradores de recursos que son capaces de combinar y comprimir archivos JS y CSS. Los recursos pueden ser añadidos de forma condicional y Plone detiene automáticamente la combinación de archivos cuando se está depurando Plone en modo foreground.

Tenemos que registrar nuestros recursos dentro de un perfil GenericSetup.

Agregar un nuevo archivo profiles/default/cssregistry.xml, con el siguiente código XML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<?xml version="1.0"?>
<object name="portal_css">
  <stylesheet
      title=""
      applyPrefix="False"
      authenticated="False"
      bundle=""
      cacheable="True"
      compression="safe"
      conditionalcomment=""
      cookable="True"
      enabled="True"
      expression=""
      id="++resource++ploneconf.site/ploneconf.css"
      media=""
      rel="stylesheet"
      rendering="import"/>
</object>

Agregar un nuevo archivo profiles/default/jsregistry.xml, con el siguiente código XML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?xml version="1.0"?>
<object name="portal_javascripts">
  <javascript
    authenticated="False"
    bundle=""
    cacheable="True"
    compression="safe"
    conditionalcomment=""
    cookable="True"
    enabled="on"
    expression=""
    id="++resource++ploneconf.site/ploneconf.js"
    inline="False"/>
</object>