• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

War Room

Shells from above

RSM logo

  • Home
  • About
  • Blog
  • Talks/Whitepapers
  • Tools
  • Recreation
Home > R&D > Development > Becoming a Master Template Creator with Jinja2: Getting Started

Becoming a Master Template Creator with Jinja2: Getting Started

March 1, 2016 By Jeremy

My last blog was a primer for getting into scripting web templates using Jinja2. In this next blog (part two of an intended four part series) we’ll get started by installing the necessary dependencies, setting up a directory, and starting to build our site.

Installation

Before we get started, it’s important to note I’m running Ubuntu Gnome 15.04, so the majority of commands I’ll be showing you revolve around my operating system of choice. So keep that in mind moving forward.

Installing the jinja necessities is quite simple. There are three ways to install jinja:

  • easy_install jinja2
  • pip install jinja2
  • git clone git://github.com/mitsuhiko/jinja2.git

A little about Flask

Flask is what we’re going to use to actually render our site. It’s Python driven and comes packaged with Jinja so there’s little else to do in the way of installation, but in the event that you happen to have problems, just run:

pip install Flask

Hello World!

To test if Flask is ready to go, let’s do the standard check. Create a file called hello.py and in that file type in:

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
return "Hello World!"

if __name__ == "__main__":
app.run()

Change your permissions accordingly then run python hello.py. Browse to localhost:5000 and voila! There’s your first page in Flask.

jinja-hello-world

Now that that’s done, let’s take a look at what’s happening here so we can understand the python a little better. Essentially, you’re setting your app.route to the resource / page you would like to provide. After that, you’re assigning functions to render whatever page you’d like. For a bigger site, you’re going to assign functions for each page you’d like to render so, for a site with multiple pages, it’ll look a little like:

Multi-Page Setup

Back to Jinja

An important part of Jinja is your directory structure. Knowing what items are going to be templates or pages and what items will be static will be key in developing your page. Let’s take a look at the below diagram which illustrates what your site’s directory should look like.

Jinja Directory Structure

You’ll see in the top directory, there are folders labeled ‘templates’ and ‘static.’ These will house all of your pages’ content. The ‘run.py’ and ‘app.py’ files are the python files which build your site.

File: app.py

This file will be where you define all of your pages like we did for our ‘hello.py’ earlier.

File: run.py

This file is where we will actually use to run the app.py feature. We can include arguments to specify ports, ip addresses or whatever.

Folder: templates

This folder houses all of your web pages.

Folder: static

This folder will contain all of your stylistic files such as images, css files, and any other scripts you’d like. The idea here is that the static folder will hold files that will be used across multiple pages.

Making The First Page

Making the index is the start of your site. This will be your home page that users will see when first visiting your site. The first thing we will need to do is open up your ‘app.py’ file and add:

After that, create two files called ‘layout.html’ and ‘index.html’ in your templates folder. From the last blog, we’ve learned that inheritance is one of the best features in Jinja, so we’re going to create a general layout first and then add in all of our content utilizing child pages, such as index.html. Once created, open up the layout.html page and let’s start building.

Now we add some content. Open up you index.html page and type in:

The jinja tags {% extends “template.html” %} indicates that this page is a child page of template.html and inherits everything that we’ve previously defined therefore there’s no need to repeat code.

Now, create a style.css file in the ‘./static/styles’ folder and we’re going to add the following styles:

And finally, open the run.py file and we’re going to add the code:

Thanks to steiner for the above code.

After that, run the command python run.py serve to test your page.

Screenshot from 2016-02-15 09:48:10

In the next post, we’ll talk about filters and how they can be applied to your site.

Share this...
  • Reddit
  • email
  • Facebook
  • Twitter
  • Linkedin

Jeremy

Primary Sidebar

Categories

  • Defense
  • Forensics
  • Offense
  • Physical
  • R&D

Most Viewed Posts

  • Sophos UTM Home Edition – 3 – The Setup 10.7k views
  • DLL Injection Part 1: SetWindowsHookEx 10.6k views
  • Leveraging MS16-032 with PowerShell Empire 9.9k views
  • Bypassing Gmail’s Malicious Macro Signatures 9.8k views
  • How to Bypass SEP with Admin Access 8.7k views

Footer

  • RSS
  • Twitter
  • Tools
  • About
  • RSM US LLP

+1 800 903 6264

1 S Wacker Dr Suite 800
Chicago, IL 60606

Copyright © 2021 RSM US LLP. All rights reserved. RSM US LLP is a limited liability partnership and the U.S. member firm of RSM International, a global network of independent audit, tax and consulting firms. The member firms of RSM International collaborate to provide services to global clients, but are separate and distinct legal entities that cannot obligate each other. Each member firm is responsible only for its own acts and omissions, and not those of any other party. Visit for more information regarding RSM US LLP and RSM International.