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:

doctype html
html
  head
    title Simple hello using a template
  body
    h1 Simple hello world from a template!
    h2 How are you doing today?
    | Please visit the home of <a href="https://vibed.org/">Vibe.d</a>

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:

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.dt");
  router.get("*", serveStaticFiles("public/"));
  auto listener = listenHTTP(settings, router);
  scope (exit) listener.stopListening();
  runApplication();
}

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/).

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

span Hello, world!
br

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

| Hello world

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

:javascript
    alert(‘Hello, world!’);

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

:css
        .alert-message
        {
                font-size: 20px;
                color: brown;
        }

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

div(class=”high-status”, id=”high-status-1”);

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

div.high-status

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

div#high-status-1

CSS class names and IDs can be combined

div.high-status#high-status-1

CSS classes can be strung together with dots

div.high-status.row-major.row-inner

Plain text following a tag should be separated by a space

div Hello!
div(class=”high-status”) Hello, world!
div.high-status Hello, world!

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

        div.
                These lines are all simple text
                but may contain HTML code
                like <a href=”/”>this

Plain text may contain HTML code

| Like <a href=”/”>this</a>.

Nesting of elements is done by adding indentation

        div Like this
                span this <span> is inside the div
                        div this <div> is inside the span
                                | and there is no need for end tags
PreviousServing other static filesNextMore template pages

Last updated