Skip to content

Commit

Permalink
[#847] Add syntax highlighting to literal includes
Browse files Browse the repository at this point in the history
  • Loading branch information
Sean Hammond committed Dec 13, 2013
1 parent f4a24ae commit a9d62f0
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 0 deletions.
1 change: 1 addition & 0 deletions doc/theming/best-practices.rst
Expand Up @@ -81,3 +81,4 @@ A snippet should have a docstring comment at the top of the file that briefly
documents what the snippet does and what parameters it requires. For example:

.. literalinclude:: /../ckanext/example_theme/v10_custom_snippet/templates/snippets/example_theme_most_popular_groups.html
:language: django
3 changes: 3 additions & 0 deletions doc/theming/css.rst
Expand Up @@ -14,6 +14,7 @@ Add this CSS into the ``example_theme.css`` file, to change the color of CKAN's
user's account info):

.. literalinclude:: /../ckanext/example_theme/v13_custom_css/public/example_theme.css
:language: css

If you restart the development web server you should be able to open this file
at http://127.0.0.1:5000/example_theme.css in a web browser.
Expand All @@ -30,6 +31,7 @@ every page of your CKAN site. Create the file::
and put this Jinja code in it:

.. literalinclude:: /../ckanext/example_theme/v13_custom_css/templates/base.html
:language: django

The default ``base.html`` template defines a ``styles`` block which can be
extended to link to custom CSS files (any code in the styles block will appear
Expand Down Expand Up @@ -62,6 +64,7 @@ implements a partial imitation of the `datahub.io <http://datahub.io/>`_ theme
:alt: A partial imitation of the datahub.io theme, circa 2013.

.. literalinclude:: /../ckanext/example_theme/v14_more_custom_css/public/example_theme.css
:language: css

.. todo::

Expand Down
1 change: 1 addition & 0 deletions doc/theming/fanstatic.rst
Expand Up @@ -45,6 +45,7 @@ to serve the CSS file with Fanstatic.
import the file:

.. literalinclude:: /../ckanext/example_theme/v15_fanstatic/templates/base.html
:language: django

.. note::

Expand Down
2 changes: 2 additions & 0 deletions doc/theming/javascript.rst
Expand Up @@ -25,6 +25,7 @@ To get CKAN to call some custom JavaScript code, we need to:
contents:

.. literalinclude:: /../ckanext/example_theme/v16_initialize_a_javascript_module/fanstatic/favorite.js
:language: javascript

This bit of |javascript| calls the ``ckan.module()`` function to register a
new JavaScript module with CKAN. ``ckan.module()`` takes two arguments: the
Expand All @@ -45,6 +46,7 @@ To get CKAN to call some custom JavaScript code, we need to:
contents:

.. literalinclude:: /../ckanext/example_theme/v16_initialize_a_javascript_module/templates/snippets/package_item.html
:language: django

.. todo:: Link to something about HTML data-* attributes.

Expand Down
2 changes: 2 additions & 0 deletions doc/theming/static-files.rst
Expand Up @@ -60,6 +60,7 @@ and file::
Edit your new ``promoted.html`` snippet, and insert these contents:

.. literalinclude:: /../ckanext/example_theme/v12_extra_public_dir/templates/home/snippets/promoted.html
:language: django

After calling ``{% ckan_extends %}`` to declare that it extends (rather than
completely replaces) the default ``promoted.html`` snippet, this custom snippet
Expand All @@ -68,6 +69,7 @@ the caption text of the promoted image. The second block replaces the ``<img>``
tag itself, pointing it at our custom static image file:

.. literalinclude:: /../ckanext/example_theme/v12_extra_public_dir/templates/home/snippets/promoted.html
:language: django
:start-after: {# Replace the promoted image. #}

If you now restart the development web server and reload the `CKAN front page`_
Expand Down
18 changes: 18 additions & 0 deletions doc/theming/templates.rst
Expand Up @@ -238,6 +238,7 @@ example, to display the value of the :ref:`ckan.site_title` setting from your
config file you would put this code in any template file:

.. literalinclude:: /../ckanext/example_theme/v03_jinja/templates/home/index.html
:language: django
:start-after: Jinja variable example
:end-before: End example

Expand Down Expand Up @@ -307,13 +308,15 @@ the logic of the template. For example, we can output a list of the currently
enabled plugins with this code in any template file:

.. literalinclude:: /../ckanext/example_theme/v03_jinja/templates/home/index.html
:language: django
:start-after: Jinja for-loop example
:end-before: End example

Other variables, such as :ref:`ckan.tracking_enabled`, are booleans, and can be
tested using Jinja's ``{% if %}`` tag:

.. literalinclude:: /../ckanext/example_theme/v03_jinja/templates/home/index.html
:language: django
:start-after: Jinja if example
:end-before: End example

Expand All @@ -325,6 +328,7 @@ Finally, any text between ``{# ... #}`` delimiters in a Jinja2 template is a
*comment*, and will not be output when the template is rendered:

.. literalinclude:: /../ckanext/example_theme/v03_jinja/templates/home/index.html
:language: django
:start-after: Jinja comment example
:end-before: End example

Expand All @@ -339,6 +343,7 @@ declare that our ``home/index.html`` template extends the default
Edit the empty ``index.html`` file you just created, and add one line:

.. literalinclude:: /../ckanext/example_theme/v04_ckan_extends/templates/home/index.html
:language: django

If you now reload the `CKAN front page`_ in your browser, you should see the
normal front page appear again. When CKAN processes our ``index.html`` file,
Expand All @@ -356,6 +361,7 @@ to render the CKAN front page) has a block that contains the Jinja and HTML
code for the "featured group" that appears on the front page:

.. literalinclude:: /../ckan/templates/home/layout1.html
:language: django
:start-after: {# Start template block example. #}
:end-before: {# End template block example. #}

Expand All @@ -377,6 +383,7 @@ template with its own code by using ``{% block %}``. Create the file
|layout1.html| with these contents:

.. literalinclude:: /../ckanext/example_theme/v05_block/templates/home/layout1.html
:language: django

This file extends the default ``layout1.html`` template, and overrides the
``featured_group`` block. Restart the development web server and reload the
Expand All @@ -399,6 +406,7 @@ If you want to add some code to a block but don't want to replace the entire
block, you can use Jinja's ``{{ super() }}`` tag:

.. literalinclude:: /../ckanext/example_theme/v06_super/templates/home/layout1.html
:language: django

When the child block above is rendered, Jinja will replace the
``{{ super() }}`` tag with the contents of the parent block.
Expand All @@ -420,6 +428,7 @@ activity stream of the site's recently created, updated and deleted datasets.
Change the code in |layout1.html| to this:

.. literalinclude:: /../ckanext/example_theme/v07_helper_function/templates/home/layout1.html
:language: django

Reload the `CKAN front page`_ in your browser and you should see a new activity
stream:
Expand All @@ -432,6 +441,7 @@ in ``{{ ... }}`` brackets), and we use the global variable :py:data:`h`
(available to all templates) to access the helper:

.. literalinclude:: /../ckanext/example_theme/v07_helper_function/templates/home/layout1.html
:language: django
:start-after: {% block featured_group %}
:end-before: {% endblock %}

Expand Down Expand Up @@ -489,6 +499,7 @@ helpers via the global variable :py:data:`h`.
Edit |layout1.html| to look like this:

.. literalinclude:: /../ckanext/example_theme/v08_custom_helper_function/templates/home/layout1.html
:language: django

Now reload your `CKAN front page`_ in your browser. You should see the featured
organization section replaced with a list of the most popular groups:
Expand Down Expand Up @@ -522,17 +533,20 @@ list of groups nicely (it's used to render the groups on CKAN's ``/group`` page
and on user dashboard pages, for example):

.. literalinclude:: /../ckan/templates/group/snippets/group_list.html
:language: django

(As you can see, this snippet calls another snippet, ``group_item.html``, to
render each individual group.)

Let's change our |layout1.html| file to call this snippet:

.. literalinclude:: /../ckanext/example_theme/v09_snippet/templates/home/layout1.html
:language: django

Here we pass two arguments to the ``{% snippet %}`` tag:

.. literalinclude:: /../ckanext/example_theme/v09_snippet/templates/home/layout1.html
:language: django
:start-after: {# Call the group_list.html snippet. #}
:end-before: {% endblock %}

Expand Down Expand Up @@ -578,6 +592,7 @@ Create a new directory |snippets_dir| containing a file named
``example_theme_most_popular_groups.html`` with these contents:

.. literalinclude:: /../ckanext/example_theme/v10_custom_snippet/templates/snippets/example_theme_most_popular_groups.html
:language: django

.. note::

Expand Down Expand Up @@ -617,6 +632,7 @@ Now edit your |layout1.html| file and change it to use our new snippet instead
of the default one:

.. literalinclude:: /../ckanext/example_theme/v10_custom_snippet/templates/home/layout1.html
:language: django

Restart the development web server and reload the `CKAN front page`_ and you
should see the most popular groups rendered differently:
Expand Down Expand Up @@ -673,6 +689,7 @@ There are two places to look for CSS classes available in CKAN:
Edit your ``example_theme_most_popular_groups.html`` file to look like this:

.. literalinclude:: /../ckanext/example_theme/v11_HTML_and_CSS/templates/snippets/example_theme_most_popular_groups.html
:language: django

This simply wraps the code in a ``<div class="box">``,
a ``<header class="module-heading">``,
Expand All @@ -685,6 +702,7 @@ To wrap your activity stream in a similar box, edit ``layout1.html`` to look
like this:

.. literalinclude:: /../ckanext/example_theme/v11_HTML_and_CSS/templates/home/layout1.html
:language: django

Reload the `CKAN front page`_, and you should see your activity stream and
most popular groups looking much better:
Expand Down

0 comments on commit a9d62f0

Please sign in to comment.