home header image slider support, shave.js deleted,
This commit is contained in:
parent
dc08a64178
commit
34192c2acb
|
@ -61,7 +61,6 @@ Zzo theme is using this library.
|
|||
* jquery.toc
|
||||
* photoswipe
|
||||
* prism
|
||||
* shave.js
|
||||
|
||||
## Minimum Hugo version
|
||||
|
||||
|
@ -218,8 +217,11 @@ logoText = "Zzo"
|
|||
description = "The Zzo theme for Hugo example site."
|
||||
custom_css = ["css/custom.css", "css/custom.css"]
|
||||
custom_js = ["js/custom.js"]
|
||||
myname = "yourname"
|
||||
|
||||
# home
|
||||
myname = "zzossig"
|
||||
whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
|
||||
swiperCount = 3
|
||||
|
||||
# body
|
||||
enableBreadcrumb = true
|
||||
|
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
|
||||
@version v2.5.6
|
||||
@link https://github.com/dollarshaveclub/shave#readme
|
||||
@author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
|
||||
@license MIT
|
||||
**/
|
||||
!function (e) { "function" == typeof define && define.amd ? define(e) : e() }(function () { "use strict"; if ("undefined" != typeof window) { var e = window.$ || window.jQuery || window.Zepto; e && (e.fn.shave = function (e, t) { return function (e, t) { var n = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : {}; if (void 0 === t || isNaN(t)) throw Error("maxHeight is required"); var i = "string" == typeof e ? document.querySelectorAll(e) : e; if (i) { var a = n.character || "…", o = n.classname || "js-shave", r = "boolean" != typeof n.spaces || n.spaces, s = '<span class="js-shave-char">'.concat(a, "</span>"); "length" in i || (i = [i]); for (var c = 0; c < i.length; c += 1) { var h = i[c], d = h.style, l = h.querySelector(".".concat(o)), f = void 0 === h.textContent ? "innerText" : "textContent"; l && (h.removeChild(h.querySelector(".js-shave-char")), h[f] = h[f]); var v = h[f], g = r ? v.split(" ") : v; if (!(g.length < 2)) { var u = d.height; d.height = "auto"; var p = d.maxHeight; if (d.maxHeight = "none", h.offsetHeight <= t) d.height = u, d.maxHeight = p; else { for (var m = g.length - 1, y = 0, j = void 0; y < m;)j = y + m + 1 >> 1, h[f] = r ? g.slice(0, j).join(" ") : g.slice(0, j), h.insertAdjacentHTML("beforeend", s), h.offsetHeight > t ? m = j - 1 : y = j; h[f] = r ? g.slice(0, m).join(" ") : g.slice(0, m), h.insertAdjacentHTML("beforeend", s); var w = r ? " ".concat(g.slice(m).join(" ")) : g.slice(m), x = document.createTextNode(w), H = document.createElement("span"); H.classList.add(o), H.style.display = "none", H.appendChild(x), h.insertAdjacentElement("beforeend", H), d.height = u, d.maxHeight = p } } } } }(this, e, t), this }) } });
|
|
@ -113,7 +113,4 @@ $(document).ready(function() {
|
|||
$(this).removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// truncate
|
||||
$('.summary__text').shave(160);
|
||||
});
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
.swiper-container {
|
||||
width: $grid_max_width;
|
||||
height: 200px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
opacity: .5;
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
@include themify($themes) {
|
||||
background: themed('navbar-title-active-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23424242'%2F%3E%3C%2Fsvg%3E") !important;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23424242'%2F%3E%3C%2Fsvg%3E") !important;
|
||||
}
|
|
@ -1,6 +1,4 @@
|
|||
.header {
|
||||
padding: 1rem;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
|
|
|
@ -163,6 +163,7 @@ $gallery_mask_background_color: {{ $scr.Get "gallery_mask_background_color" }};
|
|||
@import 'components/switch';
|
||||
@import 'components/subs';
|
||||
@import 'components/mermaid';
|
||||
@import 'components/swiper';
|
||||
|
||||
@import 'pages/body';
|
||||
@import 'pages/home';
|
||||
|
|
|
@ -2,8 +2,11 @@ logoText = "Zzo"
|
|||
description = "The Zzo theme for Hugo example site."
|
||||
custom_css = ["css/custom.css", "scss/custom.scss"]
|
||||
custom_js = ["js/custom.js"]
|
||||
|
||||
# home
|
||||
myname = "zzossig"
|
||||
whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
|
||||
swiperCount = 3
|
||||
|
||||
# body
|
||||
enableBreadcrumb = true
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"direction": "horizontal",
|
||||
"loop": true,
|
||||
"pagination": {
|
||||
"el": ".swiper-pagination"
|
||||
},
|
||||
"navigation": {
|
||||
"nextEl": ".swiper-button-next",
|
||||
"prevEl": ".swiper-button-prev"
|
||||
},
|
||||
"autoplay": {
|
||||
"delay": 5000
|
||||
}
|
||||
}
|
|
@ -28,8 +28,11 @@ rssLimit = 100
|
|||
description = "The Zzo theme for Hugo example site."
|
||||
custom_css = ["css/custom.css", "scss/custom.scss"]
|
||||
custom_js = ["js/custom.js"]
|
||||
myname = "yourname"
|
||||
|
||||
# home
|
||||
myname = "zzossig"
|
||||
whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
|
||||
swiperCount = 3
|
||||
|
||||
# body
|
||||
enableBreadcrumb = true
|
||||
|
|
|
@ -8,8 +8,6 @@
|
|||
<script defer src="{{ $prism.RelPermalink }}"></script>
|
||||
{{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
|
||||
<script defer src="{{ $lazysizes.RelPermalink }}"></script>
|
||||
{{ $shave := resources.Get "js/jquery.shave.min.js" | resources.Fingerprint }}
|
||||
<script defer src="{{ $shave.RelPermalink }}"></script>
|
||||
{{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
|
||||
<script defer src="{{ $zzo.RelPermalink }}"></script>
|
||||
|
||||
|
|
|
@ -1,13 +1,31 @@
|
|||
{{ if .IsHome }}
|
||||
<header class="header">
|
||||
<div class="header__whoami">
|
||||
<img src="{{ "/images/whoami/photo.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ end }}" class="header__whoami--image">
|
||||
<div class="header__whoami--name h6">
|
||||
Hi, I'm {{ .Site.Params.myname }}
|
||||
</div>
|
||||
<div class="header__whoami--desc p2">
|
||||
|
||||
<!-- Slider main container -->
|
||||
<div class="swiper-container">
|
||||
<!-- Additional required wrapper -->
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slides -->
|
||||
{{ if .Site.Params.swiperCount }}
|
||||
{{ range $idx, $seq := (seq .Site.Params.swiperCount) }}
|
||||
<div class="swiper-slide">
|
||||
{{ partial (print "header/slide-" $seq) . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
|
||||
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
|
||||
|
||||
<script>
|
||||
{{ $swiper := .Site.Data.swiper }}
|
||||
var options = JSON.parse({{ $swiper | jsonify }});
|
||||
|
||||
var mySwiper = new Swiper('.swiper-container', options);
|
||||
</script>
|
||||
|
||||
{{ end }}
|
|
@ -0,0 +1 @@
|
|||
<div>slide 111</div>
|
|
@ -0,0 +1 @@
|
|||
<div>slide 222</div>
|
|
@ -0,0 +1 @@
|
|||
<div>slide 333</div>
|
Loading…
Reference in New Issue