Recursos

Get the code!

Get the code for this chapter (More info) using this command in the buildout directory:

cp -R src/ploneconf.site_sneak/chapters/12_resources_p5/ src/ploneconf.site

Todavía no hemos hablado de 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 de recursos se pueden encontrar a través de la dirección url http://localhost:8080/Plone/++resource++ploneconf.site/something.js

Let’s create a ploneconf.css in that folder.

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.sponsor {
    float: left;
    margin: 0 1em 1em 0;
}

.sponsor:hover {
    box-shadow: 0 0 8px #000000;
    -moz-box-shadow: 0 0 8px #000000;
    -webkit-box-shadow: 0 0 8px #000000;
}

/* Styles for ploneconf */
header #portal-header #portal-searchbox .searchSection {
    display: none;
}

#content .event.summary {
    box-shadow: none;
    float: none;
    max-width: 100%;
}

.talkinfo #portal-column-content {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17);
    padding: 1em;
    background-color: #fff;
}

.talkinfo h1 {
    font-size: 20px;
}

.talkinfo .event.summary {
    background-color: #fff;
}

/* Some css fixs to the default Plone 5-Theme */
.formHelp {
    display: block;
}

.field span.option {
    display: block;
}

.field span.option input[type="checkbox"].required,
.field span.option input[type="radio"].required {
    margin-right: 0.4em;
}

.field span.option input[type="checkbox"].required:after,
.field span.option input[type="radio"].required:after {
    color: transparent;
    content: '';
}

textarea {
    height: 100px !important;
}

.select2-container-multi .select2-choices .select2-search-field input {
    min-width: 200px !important;
}

.pat-textareamimetypeselector {
    display: none;
}

/* Small fixes for toolbar */
#edit-zone a {
    outline: 0
}

#edit-zone.plone-toolbar-top.expanded  nav > ul > li {
    border-right: 1px dotted #888;
}

#edit-zone.plone-toolbar-top.expanded  nav > ul a > span + span {
    padding: 0 8px 0 0;
}

Si accedemos http://localhost:8080/Plone/++resource++ploneconf.site/ploneconf.css vemos nuestro archivo css.

Also add a ploneconf.js in the same folder but leave it empty.

How do our javascript and css files get used when visiting the page? Adding them directly into the html is not a good solution, having many css and js files slows down the page loading.

With portal_css and portal_javascript Plone has resource managers that are able to merge and compress js and css files. Resources can be added conditionally and Plone automatically stops merging files when you are debugging Plone in the foreground.

Tenemos que registrar nuestros recursos con GenericSetup.

Agregar un nuevo archivo profiles/default/cssregistry.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

 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>