Customizing Existing Pages

Any of the pages in Enfix can be completely customized to your needs.

Template Language

All templates in Enfix are built with Jinja2: http://jinja.pocoo.org/docs/2.10/

General Structure

Many of the templates themselves inherit from other templates. The application structure is such that you may choose at any point whether to inherit from other templates within your own space, or the templates from the base application.

All base application templates can be found in templates/_default.

Overriding the Base Template

base.html represents the general layout that all pieces of the site are based on. It’s completely possible to change this file in your own implementations, and all other files you have not overridden will still use this extension.

Common Blocks

  • {% block js_global %} For global overrides that you want to apply irrespective of per-page customization needs.
  • {% block js_page %}. For per-page JS behavior. Most page templates will put their custom behaviors here, and can be replaced by overriding this block.
  • {% block css_global %}. For global CSS overrides that you want to apply irrespective of per-page customization needs. Custom static CSS files are still considered preferable.
  • {% block css_page %}. For per-page CSS behavior. Unlike js_page, there’s rarely inlined CSS to be inherited from templates, and is here only for the customizer’s convenience.
  • {% block content %}. The general central area of the page, inside all major containers and menus. Most pages will contain most of their functional behavior in this block.

A Simple Override Example

Let’s add a small amount of Javascript to run on every page of the site, like a Google Analytics tracker.

  1. Begin by creating a directory under templates named as your site’s domain. For this example, we’ll use example.com.

  2. Create a file with the full path of templates/example.com/base.html

  3. Populate it with the following code:

    {% extends "_default/base.html" %}
    {% block js_global %}
    <script type="text/javascript">
    console.log("Hello world!");
    </script>
    {% endblock %}
    

Now load any page on your site. In your console, you should see the Hello world! execution output.