Template - Pelican - Jinja2

   
   
 python  jinja2  pelican  
 ssg  
Article Series

HTML Preprocessor Related Articles.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Feeding Data in Pelican, and Process in a Loop with Jinja2.

Consider continue with jinja2 example. This time using SSG (static site generator), called pelican blog.

Jinja2 is very similar to nunjucks. In fact nunjucks is heavily inspired by jinja2.

Official Documentation

Source Examples

You can obtain source examples here:

Pelican Case

The jinja2 case is the same, with the one utilizing grunt in previous article with a few differences.

  • pelican configuration

  • Using data to provide hyperlink in both navbar and sidebar.

Directory Structure

Consider an pelican structure with jinja2 views.

❯ tree
.
├── content
│   └── pages
│       ├── css.md
│       ├── html.md
│       ├── index.md
│       ├── javascript.md
│       └── php.md
├── Makefile
├── pelicanconf.py
├── publishconf.py
├── tasks.py
└── tutor
    ├── static
    │   ├── css
    │   │   └── w3.css
    │   ├── favicon.ico
    │   └── js
    │       └── script.js
    └── templates
        ├── article.html
        ├── base.html
        ├── index.html
        ├── page.html
        └── site
            ├── head.html
            ├── navbar.html
            └── sidebar.html

8 directories, 19 files

This pelican using theme structure. This is why we have article.html and index.html, although we only use page.html to generate static pages.

Eleventy: Example: Tree

The views structure is similar to previous case with grunt. I suggest that you have fast reading for this article first.

pelicanconf.py

You also need to a write a configuration in pelicanconf.py.

#!/usr/bin/env python
# -*- coding: utf-8 -*- #
from __future__ import unicode_literals

AUTHOR = 'epsi'
# SITENAME = 'Yet Another Example'
SITEURL = ''

THEME = "tutor"

PATH = 'content'

TIMEZONE = 'Asia/Jakarta'

DEFAULT_LANG = 'en'

# Uncomment following line if you want document-relative URLs when developing
#RELATIVE_URLS = True

INDEX_URL             = 'blog/'
INDEX_SAVE_AS         = 'blog/index.html'

Global configuration is a must have in SSG world.

In pelican, data can be stored directly in configuration. After all it is just a python script.

To provide hyperlink in both navbar and sidebar, we need to setup additional confiuration in pelicanconf.py as below:

# Data
PAGES = (
  { "link": "/",                "short": "Home", "long": "Home"  },
  { "link": "/pages/html.html", "short": "HTML", "long": "HTML Link" },
  { "link": "/pages/css.html",  "short": "CSS",  "long": "CSS Link" },
  { "link": "/pages/php.html",  "short": "PHP",  "long": "PHP Link" },
  { "link": "/pages/javascript.html", "short": "Javascript", "long": "Javascript Link" }
)

The sidebar will use long text, and the navbar will use short one.

Router

Set automatically with SSG

Layout

<!DOCTYPE html>
<html lang="en">

<head>
  {% include 'site/head.html' %}
</head>
<body>
  {% include 'site/sidebar.html' %}

  <div id="main">
    {% include 'site/navbar.html' %}

    <div class="w3-container">
    {% block content %}{% endblock %}
    </div>
  </div>

</body>
</html>

As shown in order we have three include artefacts.

  • include head.html,
  • include sidebar.html,
  • include navbar.html,

And one pelican block content.

    <div class="w3-container">
    {% block content %}{% endblock %}
    </div>

Nunjucks: ViM NERDTree Panes

It is almost the same with the original head.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {% if not headtitle %}{% set headtitle = "Link Example - Default" %}{% endif %}
  <title>{{ headtitle }}</title>

  <link rel="stylesheet" type="text/css"
        href="{{ SITEURL }}/theme/css/w3.css">
  <script src="{{ SITEURL }}/theme/js/script.js"></script>

Here we put the default title if we cannot find title variable.

  {% if not headtitle %}{% set headtitle = "Link Example - Default" %}{% endif %}
  <title>{{ headtitle }}</title>

Loop in Template

Very similar with previous example

This time, consider alter a bit, both the sidebar and the navbar, so we can render each data in loop.

  <div class="w3-sidebar w3-bar-block w3-card w3-animate-left" 
       style="display:none" id="mySidebar">
    <button class="w3-bar-item w3-button w3-large"
       id="closeNav" >Close &times;</button>
    {% for page in PAGES %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.long }}</a>
    {% endfor %}
  </div>
    <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge"
              id="openNav">&#9776;</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
    </div>

    <div class="w3-bar w3-black">
    {% for page in PAGES %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.short }}</a>
    {% endfor %}
    </div>

All you need to know is these lines:

    {% for page in PAGES %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.short }}</a>
    {% endfor %}

Pelican: Loop in Jinja2

This will render a hyperlink, with result about the same with previous example.

Running Pelican

Running pelican is as easy as this command below.

$ make devserver

HTML: Hyperlink Example

❯ make devserver
pelican -lr /home/epsi/Documents/html-preprocessor/04-pelican/content -o /home/epsi/Documents/html-preprocessor/04-pelican/output -s /home/epsi/Documents/html-preprocessor/04-pelican/pelicanconf.py 

-> Modified: content, theme, settings. re-generating...
Done: Processed 0 articles, 0 drafts, 5 pages, 0 hidden pages and 0 draft pages in 0.29 seconds.

Pelican: make devserver

You are ready to run a website, with pelican SSG, using jinja2.

What’s Next?

Consider continue reading [ Template - Jekyll - Liquid ].