Vibe.d tutorial
  • Build web apps with Vibe.d
  • Setting up
  • The default hello world app
  • Use your own HTML page
  • Serving other static files
  • Diet templates
  • More template pages
  • Use your own functions
  • Templates for ease of maintenance
  • Using include in templates
  • Responsive layout using CSS Grid
  • A fixed navbar and sticky footer
  • CSS modal dialogues
  • The web interface
  • Setting up MySQL server and tools
  • The schema
  • Setting up MySQL for Vibe.d
  • The EmployeeController class
  • The EmployeeModel class
  • A form for adding a new employee
  • Saving form data into the database
  • Testing the whole thing
  • Listing all the employees
  • Retrieving a record for editing
  • Saving form changes to the database
  • Deleting a record from the database
  • Finding an employee record by name
  • Displaying error messages with _error
  • Authentication and authorization
  • Logging in and authentication
  • Saving the login state to the session
  • Enforcing authorization through the session
  • Logging out
  • All the sources so far
  • A new project
    • The timekeeping system
Powered by GitBook
On this page

Using include in templates

Oftentimes we need to break up our layout into smaller parts so that we can just include those smaller parts to compose a page. The include directive is just for that purpose.

Create views\header.dt and extract from views\mainlayout.dt this line:

h2 Welcome to our not so simple site

Then create views\navbar.dt and extract from views\mainlayout.dt this content:

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>
  li <a href="/helloagain">Hello again!</a>

Then create views\footer.dt and extract from views\mainlayout.dt this line:

p Copyright 2022 Notsosimple Company

So what's left with views\mainlayout.dt is this:

html
  head
    title Demo site
  body
    header
      include header.dt
    nav
      include navbar.dt
    article
      block content
    footer
      include footer.dt

Compile, run and refresh the browser. If you see no changes, you did good again.

PreviousTemplates for ease of maintenanceNextResponsive layout using CSS Grid

Last updated 2 years ago