Guides

Concepts

HTML Layouts

Single html files are great, but more often than not you're going to need common content across many pages.

Lancer generates your project with a simple layout file. The concepts you need to know are:

  • The <page> tag
  • The <yield> tag
  • The <content-for> tag

The <page> Tag

<page> is a component that you will have on nearly every page in your project. Let's start with the simplest example:

<!-- client/_layout.html -->
<!DOCTYPE html>
<title>{{ page.title }}</title>
<yield>

<!-- client/index.html -->
<page title="Home Page">
<h1>Home</h1>

Here's the final HTML this generates:

<!DOCTYPE html>
<title>Home Page</title>
<h1>Home</h1>

In this example, the presence of the <page> tag in client/index.html causes Lancer to:

  • Automatically use client/_layout.html as the page's layout file
  • Assign title to the page object
  • Inject all content into the <yield> tag in the layout file.

Layout Files

Simply having a <page> tag will tell Lancer to use your client/_layout.html file. However, you can also specify which layout file you want to use:

<page layout="/_other_layout.html" title="Example">

Files in the layout attribute are file paths relative to the client/ folder.

Nested Layouts

It's possible to have a layout use another layout file. Here's an example:

<!-- client/_layout.html -->
<title>{{ page.title }} | My Website</title>
<yield>

<!-- client/_blog-layout.html -->
<page title="{{page.title}} | Blog">
<div class="blog-wrapper">
  <yield>
</div>

<!-- client/posts/post-1.html -->
<page title="Post 1" layout="/_blog-layout.html">
<h1>Post 1</h1>
<p>some content</p>

This generates the final HTML:

<title>Post 1 | Blog | My Website</title>
<div class="blog-wrapper">
  <h1>Post 1</h1>
  <p>some content</p>
</div>

Next: Server Side API Calls

Edit this page on GitHub