make homepage button and image editable from frontmatter

exampleSite/content/_index.md

@@ -1,6 +1,9 @@
 ---
 title: 'Hugo Whisper Docs'
 date: 2018-11-28T15:14:39+10:00
+button_link: '/docs'
+button_text: 'Read The Docs'
+image: '/images/terminal.gif'
 ---
 
 Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal. 

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "title" }}Hugo Whisper Theme Demo{{ end}}
 {{ define "header_css" }}{{ end }}
 {{ define "body_classes" }}page-home{{ end }}
-{{ define "header_classes" }}header-transparent{{ end }}
+{{ define "header_classes" }}{{ end }}
 
 {{ define "meta_tags" }}
 <meta name="description" content="{{ .Site.Params.homepage_meta_tags.meta_description }}" />
@@ -24,24 +24,28 @@
         <div class="content">
           {{ .Content }}
         </div>
-        <a class="button button-primary mb-2" href="{{ "docs" | absURL }}">Read The Docs</a>
+        <a class="button button-primary mb-2" href="{{ .Page.Params.button_link | relURL }}">
+          {{ .Page.Params.button_text }}
+        </a>
       </div>
     </div>
   </div>
 </div>
 
+{{ if .Page.Params.image }}
 <div class="strip">
   <div class="container pt-4 pb-4">
     <div class="row justify-content-center">
       <div class="col-12 col-md-10">
         <div class="terminal">
-          <img src="{{ "images/terminal.gif" | absURL}}" />
+          <img src="{{ .Page.Params.image | absURL}}" />
         </div>
       </div>
     </div>
   </div>
 </div>
-</div>
+{{ end }}
+
 {{ end }}
 
 {{ define "footer_js" }}