Remove inline style and script of bg-img

* See #22
This commit is contained in:
Track3 2019-01-01 17:53:20 +08:00
parent f38b9203b2
commit 1e17ccb801
6 changed files with 61 additions and 33 deletions

View file

@ -1,10 +1,20 @@
{{ define "head" }}
<style>
.bg-img {background-image: url('
{{- if .Site.Params.bgImg -}}
{{.Site.Params.bgImg | absURL}}
{{- else if .Site.Params.images -}}
{{- range first 1 .Site.Params.images -}}
{{. | absURL}}
{{- end -}}
{{- end -}}
');}
</style>
{{ end }}
{{ define "main" }}
{{- if .Site.Params.bgImg }}
<div class="bg-img" style="background-image: url({{.Site.Params.bgImg}});"></div>
{{- else if .Site.Params.images }}
{{- range first 1 .Site.Params.images }}
<div class="bg-img" style="background-image: url({{.}});"></div>
{{- end }}
{{- if (or .Site.Params.images .Site.Params.bgImg) }}
<div class="bg-img"></div>
{{- end }}
<div id="spotlight" class="animated fadeIn">
<div id="home-center">

View file

@ -12,10 +12,10 @@
</div>
<div class="hdr-right hdr-icons">
{{ if (or .Params.images .Params.featuredImg) -}}
<button class="hdr-btn" onclick="showFeaturedImg()" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
<button id="img-btn" class="hdr-btn" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
{{- end }}
{{- with .Params.toc -}}
<button class="hdr-btn desktop-only-ib" onclick="toggleToc()" title="{{i18n "tableOfContents"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
<button id="toc-btn" class="hdr-btn desktop-only-ib" title="{{i18n "tableOfContents"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
{{- end }}
{{- with .Site.Params.social -}}
<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>

View file

@ -1,14 +1,24 @@
{{ define "head" }}
<style>
.bg-img {background-image: url('
{{- if .Params.featuredImg -}}
{{.Params.featuredImg | absURL}}
{{- else if .Params.images -}}
{{- range first 1 .Params.images -}}
{{. | absURL}}
{{- end -}}
{{- end -}}
');}
</style>
{{ end }}
{{ define "header" }}
{{ partial "header.html" . }}
{{ end }}
{{ define "main" }}
{{- if .Params.featuredImg }}
<div id="bg-img" class="bg-img" style="background-image: url({{.Params.featuredImg}});" onclick="showContent()"></div>
{{- else if .Params.images }}
{{- range first 1 .Params.images }}
<div id="bg-img" class="bg-img" style="background-image: url({{.}});" onclick="showContent()"></div>
{{- end }}
{{- if (or .Params.images .Params.featuredImg) }}
<div class="bg-img"></div>
{{- end }}
<main class="site-main section-inner animated fadeIn faster">
<article class="thin">