Introduction

Pages

Resources

Plugins

Content As Data

Reference

On This Page

  1. Usage
  2. Pages
  3. App

Layouts

Greenwood defines two types of layouts that can be used to wrap your pages with common HTML

Greenwood will handle merging the <body> and <head> tag contents when building up your pages and layouts.

Usage

Layouts should be placed in a layouts/ directory within your workspace.

src/
  pages/
    index.html
    blog/
      first-post.md
      second-post.md
  layouts/
    app.html
    blog.html

Note: You can use either relative (../) or absolute (/) paths in your layouts since using ../ will allow for IDE autocomplete on your filesystem, but is marginally slower than using /.

Pages

Pages in your project will generally want a layout so you can control the output of the HTML and include all your own custom components and styles to wrap the content. By default all pages will default to looking for a page.html in the layouts/ directory. A placeholder of <content-outlet></content-outlet> can be used to position where the processed content from the incoming page will go.

Below is an example of a page.html layout:

<!doctype html>
<html lang="en" prefix="og:http://ogp.me/ns#">
  <body>
    <header>
      <h1>Welcome to my site!</h1>
    </header>

    <content-outlet></content-outlet>
  </body>
</html>

You can create more layouts and use them for pages with the following steps:

  1. Create a new layout, e.g. layouts/blog.html

  2. In your frontmatter, specify that layout's filename

    ---
layout: blog
---

## My First Post

Lorum Ipsum

App

To customize the outer most wrapping HTML of your layouts, create an app.html file. Like a page layout, this will just be another HTML document and a <page-outlet></page-outlet> placeholder that can be used to position where the content from the processed page layout will appear.

As with Page layouts, App layouts are just HTML:

<!doctype html>
<html lang="en" prefix="og:http://ogp.me/ns#">
  <body>
    <header>
      <h1>Welcome to My Site!</h1>
    </header>

    <section>
      <page-outlet></page-outlet>
    </section>

    <footer>
      <h4>&copy; My Site</h4>
    </footer>
  </body>
</html>

When an app layout is present, Greenwood will merge the <head> and <body> tags for both app and page layouts into one HTML document structure for you.

Edit on GitHub