Skip to content

Theming

Jump to bottom
Pawan Dubey edited this page Jul 8, 2015 · 1 revision

Griffin uses {{handlebars}} templates for styling. Handlebars provides an easy to use and (almost) logic-free templates for easy styling.

Griffin makes use of themes to style the content. A theme is basically a set of handlebars layout files in a directory. Changing the theme is as easy as changing the name of the theme directory in the Configuration file.

Griffin makes no assumptions about how the user will like to style their content, however there is a certain directory structure for the themes to follow.

  • A theme is basically a set of handlebars layout files. The extension of the layout files must be .html.
  • There must be a layout file each of the following: index.html, post.hmtl, page.html , tagindex.html
  • A theme may also have a SITEMAP.html and a feed.hmtl for genrating the sitemap.xml and feed.xml files.
  • All the layouts should stay in the root directory of the theme. All static resources, i.e CSS files etc should go in a directory called assets inside the theme's directory.
  • Each theme should be contained within a directory named after itself.
  • All themes are placed in the themes folder within the root folder.

A demo theme adapted (rather poorly) from Hyde is included for reference in every new site you scaffold out with Griffin.

Each template has some handlebars variables available to it for styling. Below is a list of those, template wise.

  • post.html and page.html

    • config.*
    • post.title
    • post.author
    • post.prettyDate [not available in page.html]
    • post.slug
    • post.permalink
    • post.excerpt
    • post.featuredImage
    • post.content
    • post.tags [list of tags]
    • data.navpages
    • data.latestposts

  • index.html

    • config.siteName
    • config.siteBaseUrl
    • config.siteTagline
    • config.siteAuthor
    • config.headerImage
    • config.social.gplus
    • config.social.disqus
    • config.social.fb
    • config.social.twitter
    • config.social.github
    • config.social.so
    • index.posts [list of posts for that index page -> index.posts.*]
    • index.currentPage
    • index.previouspage
    • index.nextPage

  • SITEMAP.html

    • data.fileQueue [queue of all content]
    • data.config
    • data.latestPosts [latest posts]

  • feed.html

    • config.*
    • data.latestPosts
    • data.navPages

You can make use of these variables by wrapping them in handlebar style mustaches {{}} and placing them throughout your layouts. Remember that list type variables need a context change for iteration. See Handlebars documentation for more info.

Clone this wiki locally