Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Sitewide Handlebars Details

Sitewide Handlebars details

Published:

Reading Time: (approx) 2 min

Tags that this post has been filed under.

The main content about Sitewide Handlebars Details

When creating a website, I like to create code that allows me to only have to go to one file to update details across multiple locations within the website, simple clean efficient coding at work.

To do this I create a details.yml file which looks like the one below, this gives me a bunch of details which only have to be changed once to update all the pages and partials where the details are called:-

details.yml

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><!-- footer -->
  <div class="address">
    <ul>
      <li class="bold"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></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>
          </svg></a>
      </li>
      <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>
          </svg></a>
      </li>
      <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>');</script>
     </li>
    </ul>
  </div>
</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.

head

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="Sitewide Handlebars Details,Handlebars Coding,Clean efficient coding,Project Handlebars Details,Sitewide,Handlebars,Coding,Handlebars Code">
  <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 -->
  <style></style>
  <link rel="stylesheet" href="/assets/styles/main.css?v=" media="screen">
  <link rel="stylesheet" href="/assets/styles/print.css?v=" media="print">
  <script>
    var first = "";
    var last = "";
  </script>

This is the 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 into two separate parts, and then along with the script shown at the end of the footer then displays the email address, which is a good way of reducing spam as the email address is never displayed in full making it harder for spambots to find.

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

Journal Index

Previous Article: Static Website Source Files

Next Article: Static Website Boilerplate