forked from Git/hugo-story
adding template support for items
This commit is contained in:
mspnr
parent
6524098340
commit
22dabfe0c2
65
exampleSite/data/items.yml
Normal file
65
exampleSite/data/items.yml
Normal 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"
|
||||
|
||||
@ -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
5
layouts/partials/item.html
Normal file
@ -0,0 +1,5 @@
|
||||
<section>
|
||||
<span class="icon {{ .style }}"></span>
|
||||
<h3>{{ .name }}</h3>
|
||||
<p>{{ .content }}</p>
|
||||
</section>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user