Git
/
hugo-story
mirror of https://github.com/caressofsteel/hugo-story.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

adding template support for spotlights

This commit is contained in:
mspnr 2021-01-31 16:47:21 +01:00
parent 51e38e582c
commit 6524098340
5 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
exampleSite/data/spotlight1.yml Normal file
View File

@ -0,0 +1,10 @@
####################### Spotlight #########################
style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
id: "first"
title : "Spotlight"
content: |
This is a <strong>Spotlight</strong> element, and it's generally used &ndash; as its name implies &ndash; to spotlight a particular feature, subject, or pretty much whatever. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).
button:
label: "Learn More"
link: "#"
image: "images/spotlight01.jpg"

9
exampleSite/data/spotlight2.yml Normal file
View File

@ -0,0 +1,9 @@
####################### Spotlight #########################
style: "style1 orient-left content-align-left image-position-center onscroll-image-fade-in"
title : "Spotlight"
content: |
This is also a <strong>Spotlight</strong> element, and it's here because this demo would look a bit empty with just one spotlight. Like all spotlights, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).
button:
label: "Learn More"
link: "#"
image: "images/spotlight02.jpg"

10
exampleSite/data/spotlight3.yml Normal file
View File

@ -0,0 +1,10 @@
####################### Spotlight #########################
style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
id: "first"
title : "Spotlight"
content: |
And yes, this is another <strong>Spotlight</strong> element, and it's also here because I need to fill a bit of space. Naturally, like any other spotlight, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).
button:
label: "Learn More"
link: "#"
image: "images/spotlight03.jpg"

6
layouts/index.html
View File

@ -16,9 +16,9 @@
<!-- Main -->
{{ partial "banner" site.Data.banner }}
{{ partial "spotlight-01-left" . }}
{{ partial "spotlight-02-right" . }}
{{ partial "spotlight-03-left" . }}
{{ partial "spotlight" site.Data.spotlight1 }}
{{ partial "spotlight" site.Data.spotlight2 }}
{{ partial "spotlight" site.Data.spotlight3 }}
{{ partial "gallery" . }}
{{ partial "items" . }}
{{ partial "elements" . }}

13
layouts/partials/spotlight.html Normal file
View File

@ -0,0 +1,13 @@
<!-- Spotlight -->
<section class="spotlight {{ .style }}"{{ with .id }} id="{{ . }}"{{ end }}>
<div class="content">
{{ with .title }}<h2>{{ . }}</h2>{{ end }}
{{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
{{ with .button }}<ul class="actions stacked">
<li><a href="{{ .link }}" class="button">{{ .label }}</a></li>
</ul>{{ end }}
</div>
{{ with .image }}<div class="image">
<img src="{{ . }}" alt="" />
</div>{{ end }}
</section>