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 items

This commit is contained in:
mspnr 2021-01-31 17:07:19 +01:00
parent 6524098340
commit 22dabfe0c2
4 changed files with 83 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
exampleSite/data/items.yml Normal file
View File

@ -0,0 +1,65 @@
title : "Items"
content: |
This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. 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-items">details</a>).
style: "style1 medium onscroll-fade-in"
items:
# feature item loop
- name : "One"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "style2 major fa-gem"
# feature item loop
- name : "Two"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-save"
# feature item loop
- name : "Three"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-chart-bar"
# feature item loop
- name : "Four"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-wifi"
# feature item loop
- name : "Five"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-cog"
# feature item loop
- name : "Six"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "style2 major fa-paper-plane"
# feature item loop
- name : "Seven"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-desktop"
# feature item loop
- name : "Eight"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-sync-alt"
# feature item loop
- name : "Nine"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-hashtag"
# feature item loop
- name : "Ten"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-bolt"
# feature item loop
- name : "Eleven"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "style2 major fa-envelope"
# feature item loop
- name : "Twelve"
content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
style : "solid style2 major fa-leaf"

2
layouts/index.html
View File

@ -20,7 +20,7 @@
{{ partial "spotlight" site.Data.spotlight2 }}
{{ partial "spotlight" site.Data.spotlight3 }}
{{ partial "gallery" . }}
{{ partial "items" . }}
{{ partial "items" site.Data.items }}
{{ partial "elements" . }}
{{ partial "elements_reference" . }}
{{ partial "template/footer" . }}

5
layouts/partials/item.html Normal file
View File

@ -0,0 +1,5 @@
<section>
<span class="icon {{ .style }}"></span>
<h3>{{ .name }}</h3>
<p>{{ .content }}</p>
</section>

81
layouts/partials/items.html
View File

@ -1,69 +1,12 @@
<!-- Items -->
<section class="wrapper style1 align-center">
<div class="inner">
<h2>Items</h2>
<p>This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. 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-items">details</a>).</p>
<div class="items style1 medium onscroll-fade-in">
<section>
<span class="icon style2 major fa-gem"></span>
<h3>One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-save"></span>
<h3>Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-chart-bar"></span>
<h3>Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-wifi"></span>
<h3>Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-cog"></span>
<h3>Five</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon style2 major fa-paper-plane"></span>
<h3>Six</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-desktop"></span>
<h3>Seven</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-sync-alt"></span>
<h3>Eight</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-hashtag"></span>
<h3>Nine</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-bolt"></span>
<h3>Ten</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon style2 major fa-envelope"></span>
<h3>Eleven</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
<section>
<span class="icon solid style2 major fa-leaf"></span>
<h3>Twelve</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
</section>
</div>
</div>
</section>
<!-- Items -->
<section class="wrapper style1 align-center">
<div class="inner">
{{ with .title }}<h2>{{ . }}</h2>{{ end }}
{{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
<div class="items {{ .style }}">
{{ range .items }}
{{ partial "item" . }}
{{ end }}
</div>
</div>
</section>