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.
