Begin templatizing configuration

README.md

@@ -1,8 +1,8 @@
 # The Fresh theme for Hugo
 
-**Fresh** is a theme for the [Hugo](https://gohugo.io) static site generator adapted from the gorgeous, [Bulma](https://bulma.io)-based theme of the same name from [CSS Ninja](https://cssninja.io).
+**Fresh** is a theme for the [Hugo](https://gohugo.io) static site generator adapted from the gorgeous, [Bulma](https://bulma.io)-based theme of the same name from [CSS Ninja](https://cssninja.io/themes/fresh). You can find a live demo of the original theme [here](https://cssninjastudio.github.io).
 
-![Fresh theme logo](fresh.png)
+![Fresh theme logo](images/screenshot.png)
 
 > This theme is for landing pages only. If you'd like to extend the theme to include other types of pages—blog posts, documentation pages, etc.—feel free to submit a pull request.
 

exampleSite/config.yaml

@@ -2,3 +2,37 @@ baseURL: http://something-fresh.org/
 languageCode: en-us
 title: Hugo Fresh Theme
 theme: hugo-fresh
+
+params:
+  hero:
+    # Main hero title
+    title: Manage. Deploy.
+    # Hero subtitle (optional)
+    subtitle: Lorem ipsum sit dolor amet is dummy text used by the typography industry
+    buttonText: Get started
+    buttonLink: "#"
+    # Hero image (from /images/___)
+    image: illustrations/worker.svg
+    # Footer logos (from /images/logos/clients/___.svg)
+    clientLogos:
+    - systek
+    - tribe
+    - kromo
+    - infinite
+    - gutwork
+  section1:
+    title: Great power comes
+    subtitle: with great responsibility
+    tiles:
+    - title: App builder
+      icon: mouse-globe
+      text: This is some explanatory text that is on two rows
+      buttonText: Free trial
+    - title: Cloud integration
+      icon: laptop-cloud
+      text: This is some explanatory text that is on two rows
+      buttonText: Get started
+    - title: Add-ons & plugins
+      icon: plug-cloud
+      text: This is some explanatory text that is on two rows
+      buttonText: Get started

layouts/partials/hero-body.html

@@ -1,20 +1,30 @@
+{{- $hero       := .Site.Params.hero }}
+{{- $title      := index $hero "title" }}
+{{- $subtitle   := index $hero "subtitle" }}
+{{- $buttonText := index $hero "buttonText" }}
+{{- $buttonLink := index $hero "buttonLink" }}
+{{- $image      := index $hero "image" }}
 <div class="hero-body">
   <div class="container">
     <div class="columns is-vcentered">
       <div class="column is-5 is-offset-1 landing-caption">
         <h1 class="title is-1 is-bold is-spaced">
-          Manage, Deploy.
+          {{ $title }}
         </h1>
-        <h2 class="subtitle is-5 is-muted">Lorem ipsum sit dolor amet is a dummy text used by typography industry </h2>
+        {{ with $subtitle }}
+        <h2 class="subtitle is-5 is-muted">
+          {{ . }}
+        </h2>
+        {{ end }}
         <p>
-          <a class="button cta rounded primary-btn raised">
+          <a class="button cta rounded primary-btn raised" href="{{ $buttonLink }}">
-            Get Started
+            {{ $buttonText }}
           </a>
         </p>
       </div>
       <div class="column is-5 is-offset-1">
         <figure class="image is-4by3">
-          <img src="{{ "/images/illustrations/worker.svg" | relURL }}" alt="Description">
+          <img src="{{ printf "/images/%s" $image | relURL }}" alt="Description">
         </figure>
       </div>
     </div>

layouts/partials/hero-footer.html

@@ -1,12 +1,16 @@
+{{- $hero        := .Site.Params.hero }}
+{{- $clientLogos := index $hero "clientLogos" }}
 <div class="hero-foot mb-20">
   <div class="container">
     <div class="tabs is-centered">
       <ul>
-        <li><a><img class="partner-logo" src="{{ "/images/logos/clients/systek.svg" | relURL }}"></a></li>
+        {{- range $clientLogos }}
-        <li><a><img class="partner-logo" src="{{ "/images/logos/clients/tribe.svg" | relURL }}"></a></li>
+        <li>
-        <li><a><img class="partner-logo" src="{{ "/images/logos/clients/kromo.svg" | relURL }}"></a></li>
+          <a>
-        <li><a><img class="partner-logo" src="{{ "/images/logos/clients/infinite.svg" | relURL }}"></a></li>
+            <img class="partner-logo" src="{{ printf "/images/logos/clients/%s.svg" . | relURL }}">
-        <li><a><img class="partner-logo" src="{{ "/images/logos/clients/gutwork.svg" | relURL }}"></a></li>
+          </a>
+        </li>
+        {{- end }}
       </ul>
     </div>
   </div>

layouts/partials/section1.html

@@ -1,62 +1,36 @@
+{{- $section1 := .Site.Params.section1 }}
+{{- $title    := index $section1 "title" }}
+{{- $subtitle := index $section1 "subtitle" }}
+{{- $tiles    := index $section1 "tiles" }}
 <section class="section section-feature-grey is-medium">
-    <div class="container">
+  <div class="container">
-        <div class="title-wrapper has-text-centered">
+    <div class="title-wrapper has-text-centered">
-            <h2 class="title is-2">Great Power Comes </h2>
+      <h2 class="title is-2">{{ $title }}</h2>
-            <h3 class="subtitle is-5 is-muted">With great Responsability</h3>
+      <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
-            <div class="divider is-centered"></div>
+      <div class="divider is-centered"></div>
-        </div>
-
-        <div class="content-wrapper">
-            <div class="columns">
-                <div class="column is-one-third">
-                    <div class="feature-card is-bordered has-text-centered revealOnScroll delay-1" data-animation="fadeInLeft">
-                        <div class="card-title">
-                            <h4>App builder</h4>
-                        </div>
-                        <div class="card-icon">
-                            <img src="{{ "/images/illustrations/icons/mouse-globe.svg" | relURL }}">
-                        </div>
-                        <div class="card-text">
-                            <p>This is some explanatory text that is on two rows</p>
-                        </div>
-                        <div class="card-action">
-                            <a href="#" class="button btn-align-md accent-btn raised">Free Trial</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="column">
-                    <div class="feature-card is-bordered has-text-centered revealOnScroll delay-2" data-animation="fadeInLeft">
-                        <div class="card-title">
-                            <h4>Cloud integration</h4>
-                        </div>
-                        <div class="card-icon">
-                            <img src="{{ "/images/illustrations/icons/laptop-cloud.svg" | relURL }}">
-                        </div>
-                        <div class="card-text">
-                            <p>This is some explanatory text that is on two rows</p>
-                        </div>
-                        <div class="card-action">
-                            <a href="#" class="button btn-align-md secondary-btn raised">Get Started</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="column">
-                    <div class="feature-card is-bordered has-text-centered revealOnScroll delay-3" data-animation="fadeInLeft">
-                        <div class="card-title">
-                            <h4>Addons & Plugins</h4>
-                        </div>
-                        <div class="card-icon">
-                            <img src="{{ "/images/illustrations/icons/laptop-cloud.svg" | relURL }}">
-                        </div>
-                        <div class="card-text">
-                            <p>This is some explanatory text that is on two rows</p>
-                        </div>
-                        <div class="card-action">
-                            <a href="#" class="button btn-align-md primary-btn raised">Get Started</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
+
+    <div class="content-wrapper">
+      <div class="columns">
+        {{- range $tiles }}
+        <div class="column is-one-third">
+          <div class="feature-card is-bordered has-text-centered revealOnScroll delay-1" data-animation="fadeInLeft">
+            <div class="card-title">
+              <h4>{{ .title }}</h4>
+            </div>
+            <div class="card-icon">
+                <img src="{{ printf "/images/illustrations/icons/%s.svg" .icon | relURL }}">
+            </div>
+            <div class="card-text">
+                <p>{{ .text }}</p>
+            </div>
+            <div class="card-action">
+                <a href="#" class="button btn-align-md accent-btn raised">{{ .buttonText }}</a>
+            </div>
+          </div>
+        </div>
+        {{- end }}
+      </div>
+    </div>
+  </div>
 </section>