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.