# Diet templates Vibe.d comes with a templating engine called Diet. For now, create **views\simplehello.html** with the following code: ```html Simple hello!

Simple hello, World!

How are you doing today?

``` Edit the **source\app.d** file to make it display the **views\simplehello.html** file. ```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!"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: ```html 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 Vibe.d ``` 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: ```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!"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/](https://www.google.com/url?q=http://jade-lang.com/\&sa=D\&source=editors\&ust=1676218018149446\&usg=AOvVaw1-f8GuBCNVncVKaTo93xjV)). 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 :javascript alert(‘Hello, world!’); ``` **:css** tag at the start of a line means CSS code on the following indented lines ```css :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 this ``` Plain text may contain HTML code ``` | Like this. ``` Nesting of elements is done by adding indentation ``` div Like this span this is inside the div div this

is inside the span | and there is no need for end tags ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://reyvaleza.gitbook.io/vibe.d-tutorial/diet-templates.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.