x0rg/agr.asia
1
0
Fork 0
forked from Git/hugo-story
Code Pull Requests Activity

switching banner to data concept

Browse Source
This commit is contained in:
mspnr
2021-01-31 01:20:41 +01:00
parent 60f3a622d7
commit 51e38e582c
3 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
exampleSite/data/banner.yml Normal file
View File

@@ -0,0 +1,12 @@
####################### Banner #########################
style: "style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right"
title : "Hugo Story"
subtitle: |
Hugo Story released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.
content : |
This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. 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-banner">details</a>).
button:
label : "Get Started"
link : "#first"
image : "images/banner.jpg"

2
layouts/index.html
View File

@@ -15,7 +15,7 @@
<div id="wrapper" class="divided">
<!-- Main -->
{{ partial "banner" . }}
{{ partial "banner" site.Data.banner }}
{{ partial "spotlight-01-left" . }}
{{ partial "spotlight-02-right" . }}
{{ partial "spotlight-03-left" . }}

28
layouts/partials/banner.html
View File

@@ -1,14 +1,14 @@
<!-- Banner -->
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
<div class="content">
{{ with .Site.Title }}<h1>{{.}}</h1>{{end}}
{{ with .Site.Params.subtitle }}<p class="major">{{.}} released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.</p>{{end}}
<p>This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. 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-banner">details</a>).</p>
<ul class="actions stacked">
<li><a href="#first" class="button large wide smooth-scroll-middle">Get Started</a></li>
</ul>
</div>
<div class="image">
{{ with .Site.Params.logo }}<img src="{{.}}" alt="Hugo Story" />{{end}}
</div>
</section>
<!-- Banner -->
<section class="banner {{ .style }}">
<div class="content">
{{ with .title }}<h1>{{ . }}</h1>{{ end }}
{{ with .subtitle }}<p class="major">{{ . | safeHTML }}</p>{{ end }}
{{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
{{ with .button }}<ul class="actions stacked">
<li><a href="{{ .link }}" class="button primary large wide smooth-scroll-middle">{{ .label }}</a></li>
</ul>{{ end }}
</div>
{{ with .image }}<div class="image">
<img src="{{.}}" alt="Hugo Story" />
</div>{{end}}
</section>