27. Recursos¶
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>
|