Nunjucks is a template engine that allows us to keep our html code modularized (it has a lot more features, but for the purposes of this generator, that's its only utility). We chose nunjucks over other template engines due to its similarities with the django template engine, as django is the main backend technology we use, and some only-frontend projects may eventually turn into a full web application.

Blocks are used inside base.njk to indicate where to locate dynamic content that depends on the site's section, and you can define as many blocks as you need, wherever you need them (not only inside base.njk). By default, this generator comes with the following base blocks (note that most of these blocks are not obligatory):

• meta: You can use this block to define all the meta tags for every different section. If you need to define a global meta tag, you can include it directly inside base.njk
• extra_css: When it's impossible to install some external css dependency via bower, or the installation causes some problem, then you can add external imports using this block.
• title: Section's title
• content: Where the content of the section is placed
• js_libs_config: When, for any reason, you need to add some js code that is used by external libraries to change their behavior, and that needs to be different for every section, you can add that code here.
• js_project_config: Similar to the previos block, but to configure the project's scripts. It's important to separate both configurations as the project's configuration may depend on the final libraries scripts. Both js_libs_config and js_project_config blocks can be used in a similar way to extra_css.
• js_inline: Any other inline script that you may need.

These js blocks should be rarely used and instead you should place most of your js code in .js files.

Nunjucks provides two ways to write conditions when they have simple string results, such as the text to use inside a class html attribute.

<div class="my-div {% if [condition] %}my-div-active{% endif %}"></div>
<div class "my-div {{ 'my-div-active' if [condition] }}"></div>

However, as the second option is not compatible with the django template engine (one of the main reasons why whe chose nunjucks over other engines), you have to always use the first one.

By default, the content of the title html tag, as you can see in base.njk:11, is

<title>{% if section != 'index' %}{% block title %}{% endblock %} - {% endif %}{{ projectName }}</title>

This means that, for the homepage, the title will be just the project's name, and for any other section, it will be something like "Gallery - My website". You can change this behavior if needed.

This is just an auxiliary div that helps us to avoid a common css issue related to page overflow. Additionally, you can make some dynamic css class assigment to this tag using a similar logic that is used for the title tag.

<div id="page" class="{% if section == 'some_section' %}...{% endif %}></div>

Always use indentation in your html tags (preferably with 2 spaces, as there are usually a lot of levels and a higher indentation may result illegible). For nunjucks tags ({% if %}), indentation is optional as long as they are not too complex.

Sometimes you need to create extra templates to encapsulate some common html structure (for example, when you have a product catalog and all the products have their own section). Those situations are ideal to create new nunjucks templates inside partials/ directory and define new nunjucks blocks.

Try to avoid code repetition by creating templates and partials/snippets (a template is extended by sections, a partial/snippet is included)