static site using jade

gistfile1.md

static site using jade

structure

• layouts
• pages
• partials
• data

layouts

defines common blocks using the jade block statement.

example

doctype html
html
  head
    //- always used -> include
    include ../partials/head
    //- conditional -> block
    block seo
  body
    block header
    block navigation
    .main
      block column
      block content
    include ../partials/footer

pages

defines the pages blocks and contents using the jade extends and append statement.

example

extends ../layouts/main.jade

append seo
  meta(
    name="description"
    content="#{data.description}"
  )

append header
  include ../partials/header.jade

append navigation
  include ../partials/navigation.jade

append content
  include ../partials/homepage/helloworld.jade

partial

smallest piece of the puzzle, reusable parts

example

h1 #{data.helloworld}
p #{data.someText}

data

some json

generate it

just run jade for pages/**.jade, passing the data as local template variable.