kennethormandy/hb-snippet-variable-example.md

## hb-snippet-variable-example.md

      
    Raw
  

              hb-snippet-variable-example.md
            
          
    A quick example Harp app that uses the correct title for your blog in the correct place.
The App
app/
  |- _harp.json
  |- _layout.ejs
  |- index.ejs
  |+ posts/
      |- _data.json
      |- there-is-no-spoon.md
      |- by-the-way.md

_harp.json
{
  "globals": {
    "title": "egeozcan",
    "tagline": "My Awesome Harp Based Blog"
  }
}
posts/_data.json
{
  "there-is-no-spoon": {
    "title": "There Is No Spoon",
    "tags": ["intro", "personal"],
    "date": "2012-02-07"
  },
  "by-the-way": {
    "title": "By The Way",
    "tags": ["intro", "javascript"],
    "date": "2012-02-07"
  }
}
_layout.ejs
<!DOCTYPE>
<html>
  <head>
    <title><%= title %> | <%= tagline %></title>
  </head>
  <body>
    <%- yield %>
  </body>
</html>
index.ejs
<h1><%= title %></h1>
<ul>
  <% for (var slug in public.posts._data) { %>
    <% var post = public.posts._data[slug] %> 
    <li>
      <a href="posts/<%= slug %>">
        <%= post.title %>
      </a>
    </li>
  <% } %>
</ul>
So, if I’m at /posts/there-is-no-spoon, there’s a corresponding title in the _data.json, so my title tag will be <title>There Is No Spoon | My Awesome Harp Based Blog</title>. There is no _data.json file in the root directory, so there is no metadata for the index page. This means title falls back to whatever’s in the harp.json, if there is anything. So, on the index page, the title is <title>There Is No Spoon | My Awesome Harp Based Blog</title>
You could even take this further. If I wanted to add a different tagline on the By The Way post:
_data.json
{
  "there-is-no-spoon": {
    "title": "There Is No Spoon",
    "tags": ["intro", "personal"],
    "date": "2012-02-07"
  },
  "by-the-way": {
    "title": "By The Way",
    "tags": ["intro", "javascript"],
    "date": "2012-02-07",
    "tagline": "This is my Harp post"
  }
}
Now, one /posts/by-the-way, the title will be <title>By The Way | This is my Harp post</title>.