Template Blocks

These blocks can be extended by child templates to replace or extend common CKAN functionality.

Usage

There are currently two base templates base.html which provides the bare HTML structure such as title, head and body tags as well as hooks for adding links, stylesheets and scripts. page.html defines the content structure and is the template that you’ll likely want to use.

To extend a template simply create a new template file and call {% extend %} then define the blocks that you wish to override.

Blocks in page.html

page.html extends the “page” block in base.html and provides the basic page structure for primary and secondary content.

content

The content block allows you to replace the entire content section of the page with your own markup if needed:

{% block content %}
  <div class="custom-content">
    {% block custom_block %}{% endblock %}
  </div>
{% endblock %}

toolbar

The toolbar is for content to be added at the top of the page such as the breadcrumb navigation. You can remove/replace this by extending this block:

{# Remove the toolbar from this page. #}
{% block toolbar %}{% endblock %}

primary

This block can be used to remove the entire primary content element:

{% block primary %}{% endblock %}

primary_content

The primary_content block can be used to add content to the page. This is the main block that is likely to be used within a template:

{% block primary_content %}
  <h1>My page content</h1>
  <p>Some content for the page</p>
{% endblock %}

secondary

This block can be used to remove the entire secondary content element:

{% block secondary %}{% endblock %}

secondary_content

The secondary_content block can be used to add content to the sidebar of the page. This is the main block that is likely to be used within a template:

{% block secondary_content %}
  <h2>A sidebar item</h2>
  <p>Some content for the item</p>
{% endblock %}

Blocks in base.html

doctype

Allows the DOCTYPE to be set on a page by page basis:

{% block doctype %}<!DOCTYPE html>{% endblock %}

htmltag

Allows custom attributes to be added to the <html> tag:

{% block htmltag %}<html lang="en-gb" class="no-js">{% endblock %}

headtag

Allows custom attributes to be added to the <head> tag:

{% block headtag %}<head data-tag="No idea what you'd add here">{% endblock %}

bodytag

Allows custom attributes to be added to the <body> tag:

{% block bodytag %}<body class="full-page">{% endblock %}

meta

Add custom meta tags to the page. Call super() to get the default tags such as charset, viewport and generator:

{% block meta %}
  {{ super() }}
  <meta name="author" value="Joe Bloggs" />
  <meta name="description" value="My website description" />
{% endblock %}

title

Add a custom title to the page by extending the title block. Call super() to get the default page title:

{% block title %}My Subtitle - {{ super() }}{% endblock %}

styles

The styles block allows you to add additional stylesheets to the page in the same way as the meta block. Use `` super() `` to include the default stylesheets before or after your own:

{% block styles %}
  {{ super() }}
  <link rel="stylesheet" href="/base/css/custom.css" />
{% endblock %}

page

The page block allows you to add content to the page. Most of the time it is recommended that you extend one of the page.html templates in order to get the site header and footer. If you need a clean page then this is the block to use:

{% block page %}
  <div>Some other page content</div>
{% endblock %}

scripts

The scripts block allows you to add additional scripts to the page. Use the super() function to load the default scripts before/after your own:

{% block scripts %}
  {{ super() }}
  <script src="/base/js/custom.js"></script>
{% endblock %}