Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Sitewide Handlebars Details

Sitewide Handlebars details

Author: Will Moody


Reading Time: (approx) 2 min

Tags that this post has been filed under.

Creating a details.yml file which looks like the one below helps greatly, this gives me a bunch of details which only have to be changed once to update all pages and partials:-


company: 'Boilerplate-Test'
address: '11 Boiler Road'
village: 'Boiler'
city: 'Norwich'
county: 'Norfolk'
postcode: 'NR13 4BB'
displaytelephone: '01603 718555'
telephone: '01603718555'
displaymobile: '07948 964555'
mobile: '07948964555'
author: 'John'
sitename : 'Boilerplate-Test'
domain: 'https://www.boilerplatetest.co.uk'
emailfirst: 'info'
emaillast: 'boilerplatetest.uk'
twitterusername: '@boilerplate'
twittercreator: '@boilerjohn

This then allows me to use code like this in the footer, which on build calls in any data from the details.yml file, really simple but a great time saver.


<footer><!-- footer -->
  <div class="address">
      <li class="bold"></li>
      <li class="vcard" itemscope="" itemtype="http://schema.org/Organization">
        <a class="tel" itemprop="telephone" href="tel:" aria-label=" Mobile Phone Number">
          <svg class="icon">
            <use xlink:href="../assets/svg/regular.svg#mobile"></use>
      <li class="vcard" itemscope="" itemtype="http://schema.org/Organization">
        <a class="tel" itemprop="telephone" href="tel:" aria-label=" Phone Number">
          <svg class="icon">
            <use xlink:href="../assets/svg/regular.svg#phone"></use>
      <li><svg class="icon"><use xlink:href="../assets/svg/regular.svg#envelope-o"></use></svg>
        <script type="text/javascript">
        document.write('<a href="mailto:' + first + '@' + last + '">' + first + '@' + last + '<\/a>');
</footer><!-- /footer -->

Another area in which I use data from the details.yml file is the head section, this is combined with front matter from the individual pages.


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="keywords" content="SitewideHandlebarsymlHTML">
  <meta name="author" content="">
  <meta name="robots" content="index,follow,noodp">
  <meta name="googlebot" content="index,follow">
  <meta name="google" content="nositelinkssearchbox">
  <meta name="google" content="notranslate">
  <meta name="language" content="English">
  <meta name="rating" content="General">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta property="og:title" content="">
  <meta property="og:url" content="/.">
  <meta property="og:site_name" content="">
  <meta property="og:description" content="">
  <meta property="og:image" content="/assets/images/og.jpg">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="">
  <meta name="twitter:creator" content="">
  <meta name="twitter:title" content="">
  <meta name="twitter:description" content="">
  <meta name="twitter:image" content="/assets/images/twitter.jpg">
  <link rel="canonical" href="/.">
  <link rel="alternate" href="/." hreflang="en-gb">
  <!-- css -->
  <link rel="stylesheet" href="/assets/styles/main.css?v=" media="screen">
  <link rel="stylesheet" href="/assets/styles/print.css?v=" media="print">
  <!-- Favicon -->
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
    var first = "";
    var last = "";

frontmatter for index.html

metatitle: Home | Boilerplate | Blofield Heath
description: Boilerplate offer great deals on all sorts of stuff.
keywords: Boilerplate, Home,
pagename: index
pagetype: html
pagetitle: Index
active: { index: true }
background: background-image
slogan: Monday Monday

One neat trick I have found is using the script code at the very bottom of the head which splits the email address and then along with the script at the end of the footer displays the email address but is good at reducing spam.

From the head code, you can see the CSS calls ?v=, which is explained in this post.

Previous Article: Static Website Source Files

Next Article: Static Website Boilerplate