diff options
| -rw-r--r-- | assets/sass/_list.scss | 17 | ||||
| -rw-r--r-- | exampleSite/config.toml | 12 | ||||
| -rw-r--r-- | layouts/_default/single.html | 4 | ||||
| -rw-r--r-- | layouts/partials/comment-utterances.html | 6 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 52 |
5 files changed, 80 insertions, 11 deletions
diff --git a/assets/sass/_list.scss b/assets/sass/_list.scss index 1394f76..b4c660b 100644 --- a/assets/sass/_list.scss +++ b/assets/sass/_list.scss @@ -61,6 +61,23 @@ article { margin-bottom: 1.5em; } +#post-loading { + border-top: $spliter; + margin: 0 0 1.5em 0; + padding-top: 1.5em; + + #container-loading-bar { + width: 2em; + margin: 0 auto; + } + + p { + text-align: center; + margin: 0.5em 0 0 0; + } +} + + // not show while iframe not loaded #post-comment .utterances-frame { border-top: $spliter; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b6d882f..9e7c4d5 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -30,13 +30,15 @@ paginate = 10 # Comments # utterances, see: https://utteranc.es/ - # cdnUtterancesJS = "https://utteranc.es/client.js" - # utterancesRepo = "[ENTER REPO HERE]" - # utterancesIssueTerm = "pathname" - # utterancesTheme = "github-light" + utterancesComment = false + cdnUtterancesJS = "https://utteranc.es/client.js" + utterancesRepo = "[ENTER REPO HERE]" + utterancesIssueTerm = "pathname" + utterancesTheme = "github-light" # Disqus, see: https://disqus.com/admin/install/platforms/universalcode/ - # disqusShortname = "[ENTER YOUR DISQUS SHORTNAME HERE]" + disqusComment = false + disqusShortname = "[ENTER YOUR DISQUS SHORTNAME HERE]" # Custom lazyload thumbnail cdnLazyloadSRC = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr/lazyload/dsr_loading.svg" diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 78a9148..edd7c70 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -21,10 +21,10 @@ </blockquote> </div> {{ end }} - {{ if .Site.Params.cdnUtterancesJS }} + {{ if .Site.Params.utterancesComment }} {{ partial "comment-utterances.html" . }} {{ end }} - {{ if .Site.Params.disqusShortname }} + {{ if .Site.Params.disqusComment }} {{ partial "comment-disqus.html" . }} {{ end }} </div> diff --git a/layouts/partials/comment-utterances.html b/layouts/partials/comment-utterances.html index 6653661..05b5ba0 100644 --- a/layouts/partials/comment-utterances.html +++ b/layouts/partials/comment-utterances.html @@ -1,3 +1,9 @@ +<div id="post-loading"> + <div id="container-loading-bar"> + <div id="loading-bar"></div> + </div> + <p>正在加载评论区</p> +</div> <div id="post-comment"> <script src="{{ .Site.Params.cdnUtterancesJS }}" repo="{{ .Site.Params.utterancesRepo }}" issue-term="{{ .Site.Params.utterancesIssueTerm }}" theme="{{ .Site.Params.utterancesTheme }}" crossorigin="anonymous" async></script> diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index de2e018..db67ca5 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,3 +1,45 @@ +<!-- Comment loading indicator --> +{{ if and (.IsPage) (.Site.Params.utterancesComment) }} +<script> + $(function () { + var loadingBar = new ProgressBar.Circle('#loading-bar', { + color: '#8AA2D3', + strokeWidth: 15, + trailColor: '#E5E2E4', + trailWidth: 15, + fill: '#E5E2E4' + }); + loadingBar.animate(1.0, { + duration: 10000 + }); + + var commentStatus; + var commentLoadingTime = 0; + var commentCheckInterval = self.setInterval(checkUtterances, 500); + + function checkUtterances() { + commentStatus = $('#post-comment .utterances').attr('style'); + if (commentStatus === undefined) { + commentLoadingTime += 1; + if (commentLoadingTime > 16) { + clearInterval(commentCheckInterval); + $('#post-comment').hide(); + $('#post-loading p').text('评论区加载失败'); + } + return; + } else { + clearInterval(commentCheckInterval); + loadingBar.animate(1.0, { + duration: 500 + }, function () { + $('#post-loading').hide(); + }); + } + } + }); +</script> +{{ end }} +<!-- Scroll to top button --> {{ if .Site.Params.scrollTop }} <script> $(function () { @@ -7,11 +49,11 @@ trailColor: '#E5E2E4', trailWidth: 12, text: { - 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>', + value: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-up" class="svg-inline--fa fa-angle-up fa-w-10" role="img" 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', + fill: '#E5E2E4' }); var scrolled = ($(window).scrollTop() / ($(document).height() - $(window).height() - 1)); bar.animate(scrolled); @@ -35,7 +77,9 @@ {{ end }} <!-- Vanilla LazyLoad --> <script> - var lazyLoadInstance = new LazyLoad({ - elements_selector: ".lazy" + $(function () { + var lazyLoadInstance = new LazyLoad({ + elements_selector: ".lazy" + }); }); </script>
\ No newline at end of file |