HTML

Concepts

Templates

Kibble is our static site generator: it combines a set of templates with your data to produce the HTML pages for your site.

Kibble uses the Jet Template Engine for Go and will process any file ending in .jet. If you have used other templating systems (e.g. Mustache, Handlebars, etc.), the syntax should be familiar:

<!-- Assuming you have access to a film object. -->
<h1>{{film.Title}}</h1>

Overriding

Typical approach is to find the base template in node_modules/@shift72/core-template/site and copy it to a similar folder structure in local. You can then make modifications that will override the base template.

Warning: Forward compatibility

How Tos

Understand the available properties for a template

The available objects (and their properties) will vary from template to template. For example, if you saw a template using a film object:

<h1>{{film.Title}}</h1>

... you can dump the object in the page as JSON to see what else it has:

<h1>{{film.Title}}</h1>
<p>{{film|json}}</p>

The models that Kibble uses are mapped from the equivalent APIs. In the above example, this is the model for films.

Use a custom field

If you have custom fields enabled and have added data to them, you can access them like this:

<!-- The second argument is the default value to return if the custom field is missing. -->
<p>Stars: {{film.CustomFields.GetString("film_rating", "Unrated - be the first!")}}</p>

Conditionally display an element

For example, when a film has a trailer:

{{if len(film.Trailers) > 0}}
  <blink>Check out the trailer: {{film.Trailers[0].URL}}</blink>
{{end}}