Add Scroll To Top button
This commit is contained in:
1bl4z3r
parent
cfcfd6cd3e
commit
301efb837f
9 changed files with 90 additions and 12 deletions
|
|
@ -100,3 +100,15 @@ if (header !== null) {
|
|||
}
|
||||
}, 250));
|
||||
}
|
||||
// Scroll to Top button Toggle
|
||||
//
|
||||
const scroll = document.querySelector(".scroll-up"), rootElement = document.documentElement;
|
||||
|
||||
function handleScroll() {
|
||||
if (rootElement.scrollTop / (rootElement.scrollHeight - rootElement.clientHeight) > 0.4) {
|
||||
scroll.classList.remove("hide");scroll.classList.add("show");
|
||||
} else {
|
||||
scroll.classList.add("hide");scroll.classList.remove("show");
|
||||
}
|
||||
}
|
||||
document.addEventListener("scroll", handleScroll);
|
||||
16
assets/scss/_scroll.scss
Normal file
16
assets/scss/_scroll.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.scroll-up{
|
||||
position: fixed;
|
||||
bottom: 10%;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
.show{
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
@import "normalize.scss";
|
||||
@import "syntax.scss";
|
||||
@import "animate.scss";
|
||||
@import "scroll.scss";
|
||||
|
||||
/* Webkit Scrollbar Customize */
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@ enableEmoji = true
|
|||
# Add custom css
|
||||
# customCSS = ["css/foo.css", "css/bar.css"]
|
||||
|
||||
scrollToTop = true # To enable Scroll to Top button Sitewide
|
||||
# Social Icons
|
||||
# Check https://github.com/Track3/hermit#social-icons for more info.
|
||||
[[params.social]]
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
{{ block "header" . -}}{{ end -}}
|
||||
{{ block "main" . -}}{{ end -}}
|
||||
{{ block "footer" . -}}{{ end }}
|
||||
|
||||
{{ partial "scroll-to-top.html" . }}
|
||||
{{ $main := resources.Get "js/main.js" -}}
|
||||
{{ if .Site.Params.code_copy_button | default true -}}
|
||||
{{ $codeCopy := resources.Get "js/code-copy.js" -}}
|
||||
|
|
|
|||
6
layouts/partials/scroll-to-top.html
Normal file
6
layouts/partials/scroll-to-top.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{{ if and (.Site.Params.scrollToTop) (.Params.scrolltotop) }}
|
||||
<a href="#" class="scroll-up">{{ partial "svg.html" (dict "context" . "name" "scrollup") }}</a>
|
||||
<noscript>
|
||||
<a href="#" class="scroll-up show">{{ partial "svg.html" (dict "context" . "name" "scrollup") }}</a>
|
||||
</noscript>
|
||||
{{ end }}
|
||||
|
|
@ -46,6 +46,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.428 14.359c-.326 1.678-2.92 3.513-5.9 3.87-1.554.185-3.084.355-4.715.28-2.668-.122-4.773-.637-4.773-.637 0 .26.016.507.048.739.347 2.633 2.61 2.79 4.755 2.864 2.164.074 4.092-.534 4.092-.534l.089 1.957s-1.514.813-4.211.962c-1.487.082-3.334-.037-5.485-.606C1.664 22.019.862 17.047.738 12.002.702 10.504.726 9.092.726 7.91c0-5.159 3.38-6.67 3.38-6.67C5.809.456 8.733.126 11.774.102h.074c3.04.024 5.967.354 7.671 1.136 0 0 3.38 1.512 3.38 6.671 0 0 .043 3.806-.471 6.449"/><path d="M18.912 8.31v6.247h-2.474V8.494c0-1.278-.538-1.927-1.614-1.927-1.19 0-1.785.77-1.785 2.291v3.319h-2.46V8.858c0-1.521-.596-2.29-1.786-2.29-1.075 0-1.613.648-1.613 1.926v6.063H4.705V8.31c0-1.276.325-2.29.978-3.041.674-.75 1.555-1.136 2.65-1.136 1.266 0 2.225.487 2.86 1.46l.616 1.034.616-1.033c.634-.974 1.593-1.46 2.86-1.46 1.094 0 1.976.384 2.65 1.135.652.75.977 1.765.977 3.041"/></svg>
|
||||
{{- else if (eq .name "rss") -}}
|
||||
<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-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
|
||||
{{- else if (eq .name "scrollup") -}}
|
||||
<svg fill="#3B3E48" width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" id="up-circle" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color" stroke="#3B3E48" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.9600000000000002"><circle id="primary" cx="12" cy="12" r="10" style="fill: #3B3E48;"></circle><path id="secondary" d="M15,14a1,1,0,0,1-.71-.29L12,11.41l-2.29,2.3a1,1,0,0,1-1.42-1.42l3-3a1,1,0,0,1,1.42,0l3,3a1,1,0,0,1,0,1.42A1,1,0,0,1,15,14Z" style="fill: #018574;"></path></g><g id="SVGRepo_iconCarrier"><circle id="primary" cx="12" cy="12" r="10" style="fill: #3B3E48;"></circle><path id="secondary" d="M15,14a1,1,0,0,1-.71-.29L12,11.41l-2.29,2.3a1,1,0,0,1-1.42-1.42l3-3a1,1,0,0,1,1.42,0l3,3a1,1,0,0,1,0,1.42A1,1,0,0,1,15,14Z" style="fill: #018574;"></path></g></svg>
|
||||
{{- else -}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="feather feather-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -22,14 +22,10 @@
|
|||
<div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
<div class="content">
|
||||
{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
|
||||
</div>
|
||||
{{- if .Site.Params.relatedPosts }}
|
||||
{{- partial "related-posts.html" . -}}
|
||||
<div class="post-info">
|
||||
{{- with .Params.description }}
|
||||
<p>{{.}}</p>
|
||||
{{- end }}
|
||||
<hr class="post-end">
|
||||
<footer class="post-info">
|
||||
{{- with $.Param "author" }}
|
||||
<p><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-feather"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>{{ . }}</p>
|
||||
{{- end }}
|
||||
|
|
@ -42,11 +38,25 @@
|
|||
</p>
|
||||
{{- end }}
|
||||
<p><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-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>{{ i18n "wordCount" . }}</p>
|
||||
<p><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-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}</p>
|
||||
<p><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-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
|
||||
{{ if .Lastmod }}
|
||||
{{ if not (eq .Lastmod .Date ) }}
|
||||
[Modified : {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }}]
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</p>
|
||||
{{- if and .GitInfo .Site.Params.gitUrl }}
|
||||
<p><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-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg><a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> @ {{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}</p>
|
||||
{{- end }}
|
||||
</footer>
|
||||
</div>
|
||||
<hr class="post-end">
|
||||
<div class="content">
|
||||
{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
|
||||
</div>
|
||||
{{- if .Site.Params.relatedPosts }}
|
||||
{{- partial "related-posts.html" . -}}
|
||||
{{- end }}
|
||||
<hr class="art-end">
|
||||
</article>
|
||||
{{- if .Params.toc }}
|
||||
<aside id="toc">
|
||||
|
|
|
|||
30
layouts/shortcodes/figure.html
Normal file
30
layouts/shortcodes/figure.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
|
||||
{{- if .Get "link" -}}
|
||||
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
|
||||
{{- end -}}
|
||||
<img src="{{ .Get "src" }}"
|
||||
{{- if or (.Get "alt") (.Get "caption") }}
|
||||
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
|
||||
{{- end -}}
|
||||
{{- with .Get "width" }} width="{{ . }}"{{ end -}}
|
||||
{{- with .Get "height" }} height="{{ . }}"{{ end -}}
|
||||
{{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
|
||||
loading="lazy"
|
||||
/><!-- Closing img tag -->
|
||||
{{- if .Get "link" }}</a>{{ end -}}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
|
||||
<figcaption>
|
||||
{{ with (.Get "title") -}}
|
||||
<h4>{{ . }}</h4>
|
||||
{{- end -}}
|
||||
{{- if or (.Get "caption") (.Get "attr") -}}<p>
|
||||
{{- .Get "caption" | markdownify -}}
|
||||
{{- with .Get "attrlink" }}
|
||||
<a href="{{ . }}">
|
||||
{{- end -}}
|
||||
{{- .Get "attr" | markdownify -}}
|
||||
{{- if .Get "attrlink" }}</a>{{ end }}</p>
|
||||
{{- end }}
|
||||
</figcaption>
|
||||
{{- end }}
|
||||
</figure>
|
||||
Loading…
Reference in a new issue