diff options
| -rw-r--r-- | assets/sass/_sidebar.scss | 14 | ||||
| -rw-r--r-- | exampleSite/config.toml | 4 | ||||
| -rw-r--r-- | layouts/_default/single.html | 4 | ||||
| -rw-r--r-- | layouts/index.html | 4 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 2 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 25 | ||||
| -rw-r--r-- | layouts/tags/list.html | 4 |
7 files changed, 42 insertions, 15 deletions
diff --git a/assets/sass/_sidebar.scss b/assets/sass/_sidebar.scss index 9053ac1..88a39d8 100644 --- a/assets/sass/_sidebar.scss +++ b/assets/sass/_sidebar.scss @@ -44,4 +44,18 @@ width: 3em; right: 1em; bottom: 1em; + + @include link-primary(); + + .progressbar-text { + svg { + width: 24px; + vertical-align: middle; + } + + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } }
\ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 66bc4c3..57c75cb 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -18,6 +18,9 @@ paginate = 10 # Bangumi image chart id # bgmImageChart = "000000" + # Show scroll to top button + scrollTop = true + # License license = "知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 (CC BY-NC-SA 4.0)" licenseLink = "http://creativecommons.org/licenses/by-nc-sa/4.0/" @@ -34,6 +37,7 @@ paginate = 10 # Custom css & js CDN cdnVanillaLazyloadJS = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js" cdnJQueryJS = "https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" + cdnProgessJS = "https://cdn.jsdelivr.net/npm/progressbar.js@1.1.0/dist/progressbar.min.js" [markup] [markup.highlight] diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 506127b..49e70df 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -30,7 +30,9 @@ {{ partial "sidebar.html" . }} </div> <div id="container-progress"> - <div id="progress"></div> + <a href="javascript:void(0)"> + <div id="progress"></div> + </a> </div> </div> </main> diff --git a/layouts/index.html b/layouts/index.html index 158c982..ddc93f1 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -32,7 +32,9 @@ {{ partial "sidebar.html" . }} </div> <div id="container-progress"> - <div id="progress"></div> + <a href="javascript:void(0)"> + <div id="progress"></div> + </a> </div> </div> </main> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 31dd791..9b2c461 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,7 +2,7 @@ <div class="container-lg text-center"> <p> © {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> | - Powered by <a href="https://gohugo.io/" target="_blank">Hugo {{ hugo.Version }}</a> + Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a> & <a href="https://github.com/amzrk2/hugo-theme-fuji/" target="_blank">Fuji</a> </p> </div> diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index c5efc63..de2e018 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,22 +1,17 @@ +{{ if .Site.Params.scrollTop }} <script> $(function () { var bar = new ProgressBar.Circle('#progress', { color: '#8AA2D3', - strokeWidth: 15, + strokeWidth: 12, trailColor: '#E5E2E4', - trailWidth: 15, + trailWidth: 12, text: { - autoStyleContainer: false + value: '<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg>', + autoStyleContainer: false, + style: null }, fill: '#E5E2E4', - step: function (state, circle) { - var value = Math.round(circle.value() * 100); - if (value == 0 || value == 100) { - circle.setText(''); - } else { - circle.setText(value); - } - } }); var scrolled = ($(window).scrollTop() / ($(document).height() - $(window).height() - 1)); bar.animate(scrolled); @@ -30,7 +25,15 @@ bar.set(scrolled); }); }); + $('#container-progress').click(function () { + $('html, body').animate({ + scrollTop: 0 + }, 'slow'); + return false; + }); </script> +{{ end }} +<!-- Vanilla LazyLoad --> <script> var lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy" diff --git a/layouts/tags/list.html b/layouts/tags/list.html index 30cca51..0b58a6d 100644 --- a/layouts/tags/list.html +++ b/layouts/tags/list.html @@ -38,7 +38,9 @@ {{ partial "sidebar.html" . }} </div> <div id="container-progress"> - <div id="progress"></div> + <a href="javascript:void(0)"> + <div id="progress"></div> + </a> </div> </div> </main> |