queerying_wikidata/python-html

Paged.js in a jinja template

This script shows a recipe for making a paged.js publication with Python. To avoid having to write all the HTML in the python script it uses the jinja templating engine.

Installation

First, clone, or download a copy of this repository.

Python 3

The script uses Python 3. If you know you have it installed this step can be skipped. If you are not sure whether it is installed on your computer, run the following command in the terminal:

python3 --version

It should output the version number of the copy of Python you have installed, something like:

3.10.7

If the terminal instead prints something like:

Command 'python3' not found...

It is most likely Python isn't installed. You can download it, and find installation instructions here.

Jinja

pip3 install jinja2

Running the script

Running the script should result in the folder of the script: index.html this file is based on the template templates/template.html.

When using the terminal: The script can be ran by first using cd to move into the folder of the script. The easiest way is typing cd and a space and then drag and drop the folder onto the terminal. Then press enter. Once you are in the folder, type:

python3 render-template.py

Seeing the result

The generated HTML file can simply be opened in a web browser. Pages using paged.js and an external styles file need to be opened through a local server. It is quite possible your editor has this functionality built in and it is perfectly fine to use that. Python also has a simple server built in. To start it, first cd into the folder of your project. Then run:

python3 -m http.server

The output should be something like:

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Indicating a server has been started and is listening for requests on port 8000. Open a webbrowser and open the address http://0.0.0.0:8000/ to see the generated document.

Next steps

Different template

It is possible to use a different template by adjusting the env.get_template replace for example the line:

template = env.get_template("template.html") 

with:

template = env.get_template("template-pagedjs.html") 

To load an example template that has paged.js built in.

Extending the template

More data

Extensive documentation on the jinja templating engine can be found here: https://jinja.palletsprojects.com/en/3.1.x/templates/

The first way to extend the template is by providing extra variables, this can be done by providing extra keyword arguments in the template render call. With the python line below a placeholder extra_placeholder is added and becomes available in the template:

rendered_template = template.render(template_placeholder="world", extra_placeholder="More information in the template")

In the template it is possible to refer to this placeholder with the {{ }} syntax, so:

{{ extra_placeholder }}

Loops

Just like python jinja supports loops, repeated pieces of code, or in this case HTML.

It is important to understand that jinja places data in a template. It is not intended to generate data. To work with loops jinja needs a list (or actually an iterable), data it can loop over. In jinja the start of a loop is indicated with {% for %} the end of the loop with {% endfor %}

Imagine this render call in render-template.py:

rendered_template = template.render(template_placeholder="world", list_of_technologies=["python", "jinja", "html", "css", "javascript", "paged.js"])

Now, add the following lines to the template to make jinja loop through the list and show the indvidual items in an HTML-list:

<h2>Used technologies</h2>
<ul>
{% for technology in list_of_technologies %}
  <li>{{ technology }}</li>
{% endfor %}
</ul>