Features

Layouts

Lost Wood’s customization features really shine when it comes to the layout selection and their options. Included is a compress layout which minifies the final HTML and is set as the root layout. Worth noting is that all inherited layout front-matter options can be set by their children. For example, you can set the section_class variable in a page using the page.html layout because it uses default.html as a base layout.

Layout inheritence

• compress.html
  • cover.html
  • default.html
    • index.html
    • taxonomy.html
    • page.html
    • post.html

This is the base theme for many other layouts, cover.html being the only exception. It outputs the header and footer along with the base structural markup for the site layout. This is a great starting point for creating your own custom layouts.

Front matter

---
layout: default
---

The cover layout is used for creating front or landing pages as well as mastheads for posts and pages. There are many ways to customize the output of the cover layout. Here are the options using the cover namespace:

Front matter

---
layout: page
hero:
  # Style options
  height: [percentage] # Sets the min-height of the cover element
  invert: [boolean] # [default: true] Should we add invert modifiers?

  # Background options
  background: [color] # Background color to use for cover and screen elements
  screen: [boolean] # Should we put a screen over the image?
  screen_background: [color] # [default: cover.background] What color to use for the screen background
  screen_opacity: [opacity decimal] # The opacity our screen should have
  image: [string] # Image to use for the background
  slideshow: [list] # List of images to create a background slideshow from
  slideshow_duration: [milliseconds] [default: 6000] # Duration between slideshow image rotation

  # Output options
  header: [boolean] # Should we display the page header?
  title: [boolean] # If we should display the page title
  meta: [boolean] # If we should display the date
  intro: [boolean] # If we should display the page description
  footer: [boolean] # If we should display the footer
  separator: [html comment string] # [default: site.cover_separator] What html comment string should be used to split the content (E.g. <!--cover-->)

  # Class options
  type: [boolean] # If the type component should be applied
  class:
    parent: [spaced list] # Classes to add to the parent div
    container: [spaced list] # Classes to add to the container div
    section: [spaced list] # Classes to add to the section div
---

You can also set default layout class modifiers for the cover layout template in your global config file. This is added in addition to any classes you set for specific cover posts or pages.

_config.yml

hero:
  class:
    parent: [spaced list] # Classes to add to the parent div
    container: [spaced list] # Classes to add to the container div
    section: [spaced list] # Classes to add to the section div

You can also set a default separator in your global config file. If one is not set, the site.excerpt_separator value is used as the default content separator.

_config.yml

cover_separator: <!--cover-->

This index layout is used for displaying post, collection or page listings. It comes with a few ways to customize the output which uses the index namespace.

Front matter

---
layout: index
listing:
  # The key or group of things that should be output
  key: [string] # [default: posts]

  # The key that we should sort by
  sort: [string]

  # Wether or not the listing should be reversed
  reverse: [boolean]

  # The styles to use for the listings
  # Options: minimal | verbose | card
  theme: [string] # [default: minimal]

  # The modifiers to add to the listings theme
  # Options: pull [grid (masonry)]
  modifiers: [spaced list]

  # Whether or not to display pagination
  # Notice: Only works with posts and on index.html files
  paginate: [boolean]
---

This page layout is used to create a taxonomy index pages. It will list all posts with the specific taxonomy you set as the key. You also have the option to disable to taxonomy menu in cases where that’s appropriate.

Front matter

---
layout: taxonomy
taxonomy:
  # The key or group of taxonomy to output
  key: [string]

  # Whether or not to output taxonomy menu
  menu: [boolean] # [default: true]
---

By default, posts will look for categories.md and tags.md to link to specific categories and tags respectively. You can change these default paths by adding your own in the config options.

The page layout is a general purpose template for displaying all types of content. You can manually enable the share and adjacent menus and even comments similar to posts. But you also have available the siblings menu which lets you navigate between related pages as they appear in the provided menu.

Front matter

---
layout: page

# Whether or not to display the page header
header: [boolean] # [default: true]

# Whether or not to display the share menu
menu_share: [boolean] # [default: false]

# Whether or not to display a siblings menu
menu_siblings: [string | boolean] # [default: false]

# Whether or not to display the adjacent menu
menu_adjacent: [string | boolean] # [default: false]
---

The post layout is used specifically for displaying single blog posts. It comes with a few blog features enabled by default but which can be turned off manually such as the share menu and adjacent menu.

Front matter

---
layout: post

# Whether or not to display the page header
header: [boolean] # [default: true]

# Whether or not to display the share menu
menu_share: [boolean] # [default: true]

# Whether or not to display the adjacent menu
menu_adjacent: [string | boolean] # [default: true]
---

Include Helpers

Include helpers are utility includes that can be used throughout your site. Their purpose is to help organize, manage and output your content.

Used to generate a context specific assets path. Providing a filename as the src attribute will return a unique path based on the context that the resource is being requested from.

Input

{%- include asset.html src="[filename]" -%}

Output

# Post
/assets/posts/2018-08-05-post-name/[filename]

# Collection
/assets/my_collection/page-name/[filename]

# Page
/assets/path/to/page/page-name/[filename]

Example

/assets/{{ type }}/{{ path }}/{{ src }}

It’s also possible to return a relative path by using the ./ prefix in the src parameter (e.g. src="./[your-path]"). This is mainly used by the theme when handling front-matter variables.

Example

{% for post in site.posts %}
  <a href="{{ post.url }}">
    <img src="{%- include asset.html src="example.jpg" context=post -%}" />
  </a>
{% endfor %}

Embed video media using this include helper. It returns an iframe with your provided media src wrapped in a responsive container and lazy loaded. You can optionally pass in a class for the wrapper.

Input

{% include embed.html src="[media-url]" %}

Output

Lost woods comes pre-packaged with the entire feather icons library. There are two ways to include an svg icon; either referencing a symbols definition or inject the svg inline. This helper include will use whichever method depending on if a file path is set for site.symbols.

Input

{% include icon.html icon="[icon-name]" %}

Output

Lost woods includes the LazyLoad script for loading images, video or iframes as they enter the viewport. This include helper makes it easy to include image assets which utilizes lazy loading and optional context specific asset fetching. It’s also posssible to provide srcset and sizes attributes for creating responsive images.

Input

{% include lazyload.html src="[image-src]" %}

Output