More template pages

Let’s have a more interesting example.

Create another file named views\notsimplehello.html with the following contents:

<!DOCTYPE html>
<html>
  <head>
    <title>Demo site</title>
  </head>
  <body>
    <header>
      <h2>Welcome to our not so simple site</h2>
    </header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About us</a></li>
        <li><a href="/events">Events</a></li>
        <li><a href="/contact">Contact us</a></li>
      </ul>
    </nav>
    <article>
      <hl>Welcome to our not so simple site!</hl>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisci elit, sed
        eiusmod tempor incidunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrum exercitationem ullam
        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
        consequatur. Quis aute iure reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        obcaecat cupiditat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
      </div>
    </article>
    <footer>
      <p>Copyright 2021 Notsosimple Company</p>
    </footer>
  </body>
</html>

Then edit source\app.d to use the new file:

source\app.d

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

Then compile, run and refresh your browser:

Now we have shown that the HTML page is working.

Let’s convert it into a Diet template. Save notsimplehello.html as notsimplehello.dt with the following contents:

html
  head
    title Demo site
  body
    header
      h2 Welcome to our not so simple site
    nav
      ul
        li <a href="/">Home</a>
        li <a href="/about">About us</a>
        li <a href="/events">Events</a>
        li <a href="/contact">Contact us</a>
    article
      hl Welcome to our not so simple site!
      div.
        Lorem ipsum dolor sit amet, consectetur adipisci elit, sed
        eiusmod tempor incidunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrum exercitationem ullam
        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
        consequatur. Quis aute iure reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        obcaecat cupiditat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
    footer
      p Copyright 2022 Notsosimple Company

There is really less to type when you use Diet templates.

Then copy notsimplehello.dt into about.dt, events.dt and contact.dt inside the views\ folder (or File->Save As three times)

And make some changes to the three new files so they display a different message.

views\about.dt:

html
  head
    title Demo site
  body
    header
      h2 Welcome to our not so simple site
    nav
      ul
        li <a href="/">Home</a>
        li <a href="/about">About us</a>
        li <a href="/events">Events</a>
        li <a href="/contact">Contact us</a>
    article
      hl This is the About us page!
    footer
      p Copyright 2022 Notsosimple Company

views\contact.dt

html
  head
    title Demo site
  body
    header
      h2 Welcome to our not so simple site
    nav
      ul
        li <a href="/">Home</a>
        li <a href="/about">About us</a>
        li <a href="/events">Events</a>
        li <a href="/contact">Contact us</a>
    article
      hl This is the Contact us page!
    footer
      p Copyright 2022 Notsosimple Company

views\events.dt:

html
  head
    title Demo site
  body
    header
      h2 Welcome to our not so simple site
    nav
      ul
        li <a href="/">Home</a>
        li <a href="/about">About us</a>
        li <a href="/events">Events</a>
        li <a href="/contact">Contact us</a>
    article
      hl This is the Events page!
    footer
      p Copyright 2022 Notsosimple Company

Next, edit source\app.d to use views\notsimplehello.dt

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

Then compile, run and refresh your browser. If you see no changes, that means you did good.

But when you click on the links, you get an error message like this:

That’s because we did not indicate what page to load when the user clicks on a link. We need a router to display a certain page when given a certain URL. This matching of URLs to pages or actions is called routing.

Edit source\app.d to make the server display the appropriate page when clicking on a link.

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

Then compile, run and refresh your browser. Now the links should work.

The home page:

The About us page:

The Events page:

The Contact us page:

PreviousDiet templates NextUse your own functions

Last updated 1 year ago