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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
# pelican-js
pelican-js makes it easy to embed custom JavaScript into individual
Pelican articles and pages.
## How
`git clone https://notabug.org/jorgesumle/pelican-js` in your plugins
folder and add the name of the plugin to your pelicanconf.py file:
```python
PLUGIN_PATHS = ['plugins']
PLUGINS = ['pelican-js'] # You may have more plugins
```
Next, create `js` directory in your `content` directory...
```
website/
├── content
│ ├── js/
│ │ ├── your_custom_script1.js
│ │ └── your_custom_script2.js
│ ├── article1.md
│ └── pages
│ └── about.md
└── pelican.conf.py
```
And then add each resource as a comma-separated file name in the `JS`
tag. You must specify where to place the script inside a parenthesis
after the file name:
- top. Will place the script in the `head` HTML tag
- bottom. Will place the script in the `body` HTML tag
If the location of a script is not specified, it will be place inside
the `<body>` tag.
```
Title: Mejor sin Wordpress
Date: 2017-02-09 18:51
Tags: programación, Wordpress, generador de páginas estáticas, generador de sitios web estáticos, rendimiento, eficiencia, comodidad, desventajas
Category: Desarrollo web
Author: jorgesumle
Slug: mejor-sin-wordpress
JS: your_custom_script1.js (top), your_custom_script2.js (bottom)
```
Finally, in your base template (likely named `base.html`), you need
to add the following in your `<head>` tag...
```
{% if article %}
{% if article.js %}
{% for script in article.js %}
{% if 'top' in script[-7:] %}
{{ script[:-5]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
```
And the following just before the closing `</body>` tag...
```
{% if article %}
{% if article.js %}
{% for script in article.js %}
{% if 'bottom' in script[-7:] %}
{{ script[:-8]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
```
So, in the template I use for my blog now looks like the following:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8">
<title>{% block title %} {{SITENAME}} {% endblock %}</title>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css" type="text/css">
{% if article %}
{% if article.js %}
{% for script in article.js %}
{% if 'top' in script[-7:] %}
{{ script[:-5]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
</head>
<body>
<div class=container>
{% block header %}
{% include "header.html" %}
{% endblock %}
<div class="content">
{% block content %} {% endblock %}
</div>
{% block footer %}
{% include "footer.html" %}
{% endblock %}
</div>
{% if article %}
{% if article.js %}
{% for script in article.js %}
{% if 'bottom' in script[-7:] %}
{{ script[:-8]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
</body>
</html>
```
That's it! Run your standard `make html` or `make publish` commands
and your JavaScript files will be copied and ref'd in the right places.
The previous code only works for articles. For most people that's
enough. If you want to enable custom JavaScript in pages too insert the
following code your `<head>` tag...
{% if page %}
{% if page.js %}
{% for script in page.js %}
{% if 'top' in script[-7:] %}
{{ script[:-5]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
And the following code in the `<body>` tag...
{% if page %}
{% if page.js %}
{% for script in page.js %}
{% if 'bottom' in script[-7:] %}
{{ script[:-8]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
The final result, which works both for articles and for pages, looks
like this...
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8">
<title>{% block title %} {{SITENAME}} {% endblock %}</title>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css" type="text/css">
{% if article %}
{% if article.js %}
{% for script in article.js %}
{% if 'top' in script[-7:] %}
{{ script[:-5]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if page %}
{% if page.js %}
{% for script in page.js %}
{% if 'top' in script[-7:] %}
{{ script[:-5]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
</head>
<body>
<div class=container>
{% block header %}
{% include "header.html" %}
{% endblock %}
<div class="content">
{% block content %} {% endblock %}
</div>
{% block footer %}
{% include "footer.html" %}
{% endblock %}
</div>
{% if article %}
{% if article.js %}
{% for script in article.js %}
{% if 'bottom' in script[-7:] %}
{{ script[:-8]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if page %}
{% if page.js %}
{% for script in page.js %}
{% if 'bottom' in script[-7:] %}
{{ script[:-8]|format(SITEURL) }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
</body>
</html>
```
|
