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.

#. Begin by creating a directory under templates named as your site's domain.  For this example, we'll use ``example.com``.
#. Create a file with the full path of ``templates/example.com/base.html``
#. 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.