-
Notifications
You must be signed in to change notification settings - Fork 1
Working with HTML templates
HTML templates are included in the build/templates directory.
You'll see two templates, base.html and index.html as well as a partials folder.
base.html and index.html are rendered together to create a single index.html page in the publish directory using Mozilla's Nunjucks templating language, which is pre-installed with the app.
Templating is a way of stripping out boilerplate code from your working files.
For example, let's say we have a page that looks like this:
<html>
<head>
<title>My page</title>
</head>
<body>
<!-- Some content goes here-->
</body>
</html>Templating allows you to put all this boilerplate code in one file with a placeholder for the content you'll write in another file.
So in our super simple example base.html may look like:
<html>
<head>
<title>My page</title>
</head>
<body>
{%block some_content%}
{%endblock%}
</body>
</html>The {%block%} tag creates a placeholder we can open up in another file and fill with content -- a child template which "inherits" the code of its parent. So our index.html might look like:
<!-- "extend" the parent template, base.html, into this child-->
{% extends 'base.html' %}
<!-- open the placeholder block in the parent and fill with new content -->
{%block some_content%}
<h1>Welcome to my page!</h1>
<p>Have a look around!</p>
{%endblock%}As we're working, then, these two files will be rendered together. The content in index.html blocks will replace the content in the base.html blocks.
That's only the start of what Nunjucks templating can do, but for most projects, that's all you'll need to understand.
If you're still having trouble working with template inheritance, check out a fuller explanation here.
Building on our simple example, base.html contains all the important boilerplate code for our templates, including things like:
- Masthead header and footer
- Base theme stylesheets
- Scripts to create the comments section and include analytics and other tracking codes
In a normal project, you won't need to look at this file at all. It works in the background as the parent template for the child templates you'll actually write code in.
This is the file you'll write your project-specific code in. It "extends" base.html with three placeholder {%block%} tags.
{%extends 'base.html'%}
{%block custom_head%}
{%endblock%}
{%block custom_foot%}
{%endblock%}
{%block content%}
{%endblock%}Place <link> references to CSS stylesheets here.
Links are already included to your bundled dependency CSS files from the build/static/vendor directory and to any stylesheets you create in build/static/css and build/static/sass.
Place <script> tags here.
Script tags are already included to your bundled dependency script files and to any scripts you create in build/static/jss.
Write all your HTML code here. It fills in all content between the masthead header and footer on the page.
For code blocks you can simply copy and paste into your project, be sure to checkout the Code Cookbook.