search

Diet templates

Vibe.d comes with a templating engine called Diet.

For now, create views\simplehello.html with the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple hello!</title>
  </head>
  <body>
    <h1>Simple hello, World!</h1>
    <h2>How are you doing today?</h2>
  </body>
</html>

Edit the source\app.d file to make it display the views\simplehello.html file.

import vibe.vibe;
void main()
{
  auto settings = new HTTPServerSettings;
  settings.port = 8080;
  settings.bindAddresses = ["::1", "127.0.0.1"];
  auto router = new URLRouter;
  router.get("/",staticTemplate!"simplehello.html");
  router.get("*", serveStaticFiles("public/"));
  auto listener = listenHTTP(settings, router);
  scope (exit) listener.stopListening();
  runApplication();
}

Then build and run the project and refresh the browser to see the new message:

We just tested that the new HTML file is working. Now, let’s convert the HTML file into a Diet template file.

Save the views\simplehello.html file as views\simplehello.dt with this contents:

It feels weird at first, but then you realize there is less to type when using Diet templates.

Then edit source\app.d to make it display simplehello.dt instead:

In your terminal, stop the app if it is still running (Ctrl-C), then compile and run.

dub --force

We sometimes use the --force option to tell dub to recompile everything again, just in case it fails to see that some files were changed and needed to be recompiled or that there are updated libraries that needed to be downloaded again.

Refresh your browser to see the changes.

The syntax of Diet templates is based on Jade templates (http://jade-lang.com/arrow-up-right).

Here are some of the basic rules:

By convention, the Diet template file extension is .dt

The first word on a line is usually an HTML tag

| (pipe) tag at the start of a line means the line is composed of plain text

:javascript tag at the start of a line means JavaScript code on the following indented lines

:css tag at the start of a line means CSS code on the following indented lines

The attributes of a tag are comma-separated values inside parentheses

A tag followed by a . (dot) followed by an identifier name means a CSS class name

A tag followed by a # (hash) followed by an identifier name means a CSS ID name

CSS class names and IDs can be combined

CSS classes can be strung together with dots

Plain text following a tag should be separated by a space

An HTML tag ending in a . (dot) means multi-line plain text follows

Plain text may contain HTML code

Nesting of elements is done by adding indentation

PreviousServing other static filesNextMore template pages

Last updated