Archief - Blog + mogelijkheid deze te plaatsen op eigen website

  // Monthmapping
  var monthArray = [null, "jan", "feb", "maa", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
  
  // A few Handlebars helpers to render data properly
  Handlebars.registerHelper('intro', function(content) {
    var introRegex = /<p>(.*)<\/p>/,
         introMatch = content.match(introRegex);
    if(introMatch && introMatch.length > 1) {
      return introMatch[1];
    } else {
      return "";
    }
  });
  
  Handlebars.registerHelper('shortDate', function(date) {
    var dateRegex = /^(\d{4})-(\d+)-(\d+) /,
         dateMatch = date.match(dateRegex),
         theDate = new Date();
    if(dateMatch && dateMatch.length == 4) {
      theDate = new Date(parseInt(dateMatch[1],10), parseInt(dateMatch[2],10),parseInt(dateMatch[3],10));
    }
    return theDate.getDate()+" "+monthArray[theDate.getMonth()];
  });

  // Render the blog template with JSONP data
  var blogSource = $('#blog-roll-template').html();
  if (blogSource) {
    var blogTemplate = Handlebars.compile(blogSource);
    $.getJSON("http://wordpress-domein/api/get_recent_posts?callback=?", function(data) {
      var filteredData = {posts: data.posts},
           blogHTML = blogTemplate(filteredData);
      $('#blog-roll').append(blogHTML);
    });
  }

    <div id="blog-roll" class="blog-roll">
      <h2>Blog</h2>
      
      <script id="blog-roll-template" type="text/x-handlebars-template">
            <div class="recent-posts">
              <h3>Recente artikels</h3>

              <ul>
              {{#each posts}}
               <li>
                <div class="date">
                  {{shortDate date}}
                </div>
                <h3>{{title}}</h3>
                <p>{{{intro content}}}</p>
                <a href="{{url}}" class="more">Lees verder</a>
               </li>
              {{/each}}
              </ul>
            </div>
      </script>
    </div>