Custom Layouts

This note is to summarize two approaches to creating a slide based on a specific layout. The example I will use is the masthead in the marketing-narrow template of bootstrap.

Approach 1

The first approach is to define the slide as YAML, and then specify a template that makes use of the YAML metadata.

Slide

--- .YAML &masthead

title: Slidify
menu:
  - {item: Home, href: "#", class: active}
  - {item: About, href: "about.html"}

Layout

---
layout: slide
---
<div class="masthead">
  <h3 class="muted">{{{ slide.title }}}</h3>
  <ul class="nav nav-pills pull-right">
  {{# slide.menu }}
    <li class='{{ class }}'><a href="{{ href }}">{{ item }}</a></li>
  {{/ slide.menu }}
  </ul>
</div>

Approach 2

The second approach is to use a generic template, specify the slide using markdown, and then use regular expressions or javascript to add additional class information

Slide

--- &div .masthead

### Slidify

- [Home](#)
- [About](about.html)

Layout

---
layout: slide
---
<div class='{{slide.class}}'>
  {{{ slide.header }}}
  {{{ slide.content }}}
</div>

Javascript

$(document).ready(function(){
 $('div.masthead > h3').addClass('muted')
 $('div.masthead > ul')
   .addClass('nav')
   .addClass('nav-pills')
   .addClass('pull-right');
 $('div.masthead > ul > li:first').addClass('active')
});

An alternate to the javascript solution is to find a way to specify additional classes for arbitrary elements using a simple syntax, or to run it through rQuery to achieve the same effect as jQuery.

For now, the YAML solution looks the simplest.

Update

My recent update to Slidify on github, now allows arbitrary multi-line YAML at the top of the slide. So, the masthead slide can now be represented as

--- {
tpl : masthead
menu:
  - {item: Home, href: "#", class: active}
  - {item: About, href: "about.html"}
}

## Slide Title

Some contents of the slide