Scripts for HTML generation with Python
Gijs
2 years ago
parent
e10b0fd82c
commit
d9f8667f64
@ -0,0 +1,123 @@
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
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](https://www.python.org/downloads/).
|
||||
|
||||
### 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](https://jinja.palletsprojects.com/en/3.1.x/templates/#for), 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:
|
||||
|
||||
```
|
||||
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>
|
||||
```
|
||||
@ -0,0 +1,22 @@
|
||||
from jinja2 import Environment, FileSystemLoader, select_autoescape
|
||||
|
||||
# Setup a template loader, tell it in which folder it can find
|
||||
# the templates
|
||||
template_loader = FileSystemLoader("templates")
|
||||
|
||||
env = Environment(loader= template_loader, autoescape=select_autoescape())
|
||||
|
||||
# read a template file from the templates folder
|
||||
# and parse it into a Template object
|
||||
template = env.get_template("template.html")
|
||||
|
||||
# Transform or flatten the Template object into a string (piece of text)
|
||||
# The value of the placeholders is assigned through the keyword arguments
|
||||
# rendered_template = template.render(template_placeholder="world")
|
||||
|
||||
rendered_template = template.render(template_placeholder="world", list_of_technologies=["python", "jinja", "html", "css", "javascript", "paged.js"])
|
||||
|
||||
# Open a file handle and write the rendered template to a file.
|
||||
# A file which can be read by other programs, like a browser for example.
|
||||
with open('index.html', 'w') as h:
|
||||
h.write(rendered_template)
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Paged.js document</title>
|
||||
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
|
||||
<!-- It is of course completely possible to insert a local js file -->
|
||||
<link rel="stylesheet" href="pagedjs-interface.css">
|
||||
<!-- The template will be rendered in a different folder. Make sure the path
|
||||
to the css file still works! -->
|
||||
</head>
|
||||
<body>
|
||||
Hello {{ template_placeholder }}!
|
||||
<!-- {{ template_placeholder }} is replaced by the value of the keyword
|
||||
argument provided to the render call in the python script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hello {{ template_placeholder }}!</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- {{ template_placeholder }} is replaced by the value of the keyword
|
||||
argument provided to the render call in the python script -->
|
||||
Hello {{ template_placeholder }}!
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue