diff options
| -rw-r--r-- | assets/js/fuji.js | 256 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-image.html | 4 | ||||
| -rw-r--r-- | layouts/partials/head.html | 2 | ||||
| -rw-r--r-- | layouts/partials/scripts-end.html | 8 | ||||
| -rw-r--r-- | layouts/shortcodes/img-lazy.html | 44 | ||||
| -rw-r--r-- | layouts/shortcodes/img-nz-lazy.html | 49 | ||||
| -rw-r--r-- | layouts/shortcodes/img-nz.html | 7 | ||||
| -rw-r--r-- | static/assets/js/fuji.min.js | 2 |
8 files changed, 216 insertions, 156 deletions
diff --git a/assets/js/fuji.js b/assets/js/fuji.js index 14d63bc..c68bdc8 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -2,152 +2,160 @@ // get current theme function getNowTheme() { - let nowTheme = document.body.getAttribute('data-theme'); - if (nowTheme === 'auto') { - return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - } else { - return nowTheme === 'dark' ? 'dark' : 'light'; - } -} - -// update utterances theme -function updateUtterancesTheme(utterancesFrame) { - let targetTheme = getNowTheme(); - if (utterancesFrame) { - if (targetTheme === 'dark') { - utterancesFrame.contentWindow.postMessage( - { - type: 'set-theme', - theme: 'photon-dark', - }, - 'https://utteranc.es' - ); - } else { - utterancesFrame.contentWindow.postMessage( - { - type: 'set-theme', - theme: 'github-light', - }, - 'https://utteranc.es' - ); - } - } + let nowTheme = document.body.getAttribute('data-theme'); + if (nowTheme === 'auto') { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } else { + return nowTheme === 'dark' ? 'dark' : 'light'; + } } // load comment button only when comment area exist if (document.querySelector('span.post-comment-notloaded')) { - document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment); + document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment); } // to-top button document.querySelector('.btn .btn-scroll-top').addEventListener('click', () => { - document.documentElement.scrollTop = 0; + document.documentElement.scrollTop = 0; }); -// theme switch button -document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => { - let nowTheme = getNowTheme(); - let domTheme = document.body.getAttribute('data-theme'); - let systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; +document.addEventListener('DOMContentLoaded', () => { + mediumZoom('.img-zoomable', { + margin: 32, + background: '#00000054', + scrollOffset: 128, + }); +}); - if (domTheme === 'auto') { - // if now in auto mode, switch to user mode - document.body.setAttribute('data-theme', nowTheme === 'light' ? 'dark' : 'light'); - localStorage.setItem('fuji_data-theme', nowTheme === 'light' ? 'dark' : 'light'); - } else if (domTheme === 'light') { - // if now in user mode and light mode - document.body.setAttribute('data-theme', 'dark'); - // if the theme want to switch is system theme - localStorage.setItem('fuji_data-theme', systemTheme === 'dark' ? 'auto' : 'dark'); +// update utterances theme +function updateUtterancesTheme(utterancesFrame) { + let targetTheme = getNowTheme(); + if (utterancesFrame) { + if (targetTheme === 'dark') { + utterancesFrame.contentWindow.postMessage( + { + type: 'set-theme', + theme: 'photon-dark', + }, + 'https://utteranc.es' + ); } else { - // if now in user mode and dark mode - document.body.setAttribute('data-theme', 'light'); - // if the theme want to switch is system theme - localStorage.setItem('fuji_data-theme', systemTheme === 'light' ? 'auto' : 'light'); + utterancesFrame.contentWindow.postMessage( + { + type: 'set-theme', + theme: 'github-light', + }, + 'https://utteranc.es' + ); } + } +} - // switch comment area theme - // if this page has comment area - let commentArea = document.querySelector('.post-comment'); - if (commentArea) { - // if comment area loaded - if (document.querySelector('span.post-comment-notloaded').getAttribute('style')) { - if (commentArea.getAttribute('data-comment') === 'utterances') { - updateUtterancesTheme(document.querySelector('.post-comment iframe')); - } - if (commentArea.getAttribute('data-comment') === 'disqus') { - DISQUS.reset({ - reload: true, - }); - } - } +// theme switch button +document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => { + let nowTheme = getNowTheme(); + let domTheme = document.body.getAttribute('data-theme'); + let systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + + if (domTheme === 'auto') { + // if now in auto mode, switch to user mode + document.body.setAttribute('data-theme', nowTheme === 'light' ? 'dark' : 'light'); + localStorage.setItem('fuji_data-theme', nowTheme === 'light' ? 'dark' : 'light'); + } else if (domTheme === 'light') { + // if now in user mode and light mode + document.body.setAttribute('data-theme', 'dark'); + // if the theme want to switch is system theme + localStorage.setItem('fuji_data-theme', systemTheme === 'dark' ? 'auto' : 'dark'); + } else { + // if now in user mode and dark mode + document.body.setAttribute('data-theme', 'light'); + // if the theme want to switch is system theme + localStorage.setItem('fuji_data-theme', systemTheme === 'light' ? 'auto' : 'light'); + } + + // switch comment area theme + // if this page has comment area + let commentArea = document.querySelector('.post-comment'); + if (commentArea) { + // if comment area loaded + if (document.querySelector('span.post-comment-notloaded').getAttribute('style')) { + if (commentArea.getAttribute('data-comment') === 'utterances') { + updateUtterancesTheme(document.querySelector('.post-comment iframe')); + } + if (commentArea.getAttribute('data-comment') === 'disqus') { + DISQUS.reset({ + reload: true, + }); + } } + } }); // search by fuse.js function searchAll(key, index, counter) { - let fuse = new Fuse(index, { - shouldSort: true, - distance: 10000, - keys: [ - { - name: 'title', - weight: 2.0, - }, - { - name: 'tags', - weight: 1.5, - }, - { - name: 'content', - weight: 1.0, - }, - ], - }); - let result = fuse.search(key); - // console.log(result); - if (result.length > 0) { - document.getElementById('search-result').innerHTML = template('search-result-template', result); - return [new Date().getTime() - counter, result.length]; - } else { - return 'notFound'; - } + let fuse = new Fuse(index, { + shouldSort: true, + distance: 10000, + keys: [ + { + name: 'title', + weight: 2.0, + }, + { + name: 'tags', + weight: 1.5, + }, + { + name: 'content', + weight: 1.0, + }, + ], + }); + let result = fuse.search(key); + // console.log(result); + if (result.length > 0) { + document.getElementById('search-result').innerHTML = template('search-result-template', result); + return [new Date().getTime() - counter, result.length]; + } else { + return 'notFound'; + } } let urlParams = new URLSearchParams(window.location.search); // get params from URL if (urlParams.has('s')) { - let counter = new Date().getTime(); - let infoElements = document.querySelectorAll('.search-result-info'); - let key = urlParams.get('s'); // get search keyword, divided by space - document.querySelector('.search-input input').setAttribute('value', key); - // get search index from json - let xhr = new XMLHttpRequest(); - xhr.open('GET', '/index.json', true); - xhr.responseType = 'json'; - xhr.onerror = () => { - infoElements[2].removeAttribute('style'); - }; - xhr.ontimeout = () => { - infoElements[2].removeAttribute('style'); - }; - xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - // use index json to search - // console.log(xhr.response); - counter = searchAll(key, xhr.response, counter); - // console.log(counter); - if (counter === 'notFound') { - infoElements[1].removeAttribute('style'); - } else { - infoElements[0].innerHTML = infoElements[0].innerHTML.replace('[TIME]', counter[0]); - infoElements[0].innerHTML = infoElements[0].innerHTML.replace('[NUM]', counter[1]); - infoElements[0].removeAttribute('style'); - } - } else { - infoElements[2].removeAttribute('style'); - } + let counter = new Date().getTime(); + let infoElements = document.querySelectorAll('.search-result-info'); + let key = urlParams.get('s'); // get search keyword, divided by space + document.querySelector('.search-input input').setAttribute('value', key); + // get search index from json + let xhr = new XMLHttpRequest(); + xhr.open('GET', '/index.json', true); + xhr.responseType = 'json'; + xhr.onerror = () => { + infoElements[2].removeAttribute('style'); + }; + xhr.ontimeout = () => { + infoElements[2].removeAttribute('style'); + }; + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + // use index json to search + // console.log(xhr.response); + counter = searchAll(key, xhr.response, counter); + // console.log(counter); + if (counter === 'notFound') { + infoElements[1].removeAttribute('style'); + } else { + infoElements[0].innerHTML = infoElements[0].innerHTML.replace('[TIME]', counter[0]); + infoElements[0].innerHTML = infoElements[0].innerHTML.replace('[NUM]', counter[1]); + infoElements[0].removeAttribute('style'); } - }; - xhr.send(null); + } else { + infoElements[2].removeAttribute('style'); + } + } + }; + xhr.send(null); } diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 1b20943..397ff55 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,3 +1 @@ -<a href="{{ .Destination | safeURL }}" target="_blank"> - <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" /> -</a>
\ No newline at end of file +<img class="img-zoomable" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" /> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 1bcdf85..85f008e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -40,6 +40,8 @@ {{ with .Site.Params.googleAdsense }} <script async data-ad-client="ca-pub-{{ . }}" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> {{ end}} +<script async type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.esm.js"></script> +<script async nomodule src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.js"></script> {{ if .Params.player }} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" /> {{ end }} diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html index 37311b7..b945211 100644 --- a/layouts/partials/scripts-end.html +++ b/layouts/partials/scripts-end.html @@ -1,20 +1,17 @@ -<script async type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.esm.js"></script> -<script async nomodule src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.js"></script> {{ if eq .Section "search" }} <script defer src="https://cdn.jsdelivr.net/combine/npm/art-template@4.13.2/lib/template-web.min.js,npm/fuse.js@6.2.0"></script> {{ else if eq .Section "archives" }} {{ else }} +<script defer src="https://cdn.jsdelivr.net/combine/npm/medium-zoom@1.0.5,npm/lazysizes@5.2.2"></script> <script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-core.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script> -<script defer src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script> {{ end }} <script defer src="{{ "/assets/js/fuji.min.js" | relURL }}"></script> {{ with .Params.player }} <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> -<!-- prettier-ignore --> <script> // in-post aplayer - /* beautify preserve:start */ + // prettier-ignore var aPlayer = new APlayer({ container: document.getElementById('post-aplayer'), theme: '#8f82bc', @@ -29,7 +26,6 @@ }, {{- end -}}] }); - /* beautify preserve:end */ // aplayer toc anchors fix // see https://github.com/MoePlayer/APlayer/issues/242#issuecomment-602471423 document.addEventListener('DOMContentLoaded', function () { diff --git a/layouts/shortcodes/img-lazy.html b/layouts/shortcodes/img-lazy.html index e57b8fb..a8927a5 100644 --- a/layouts/shortcodes/img-lazy.html +++ b/layouts/shortcodes/img-lazy.html @@ -1,22 +1,22 @@ -{{- if len .Params | eq 2 -}} -<p> - <a href="{{ index .Params 1 | safeURL }}" target="_blank"> - <img class="lazyload" src="{{ .Site.Params.lazyPlaceholder | relURL }}" - data-src="{{ index .Params 1 | safeURL }}" alt="{{ index .Params 0 }}" /> - </a> -</p> -{{- else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" -}} -<p> - <a href="{{ index .Params 2 | safeURL }}" target="_blank"> - <img class="lazyload" src="{{ .Site.Params.lazyPlaceholderRow | relURL }}" - data-src="{{ index .Params 2 | safeURL }}" alt="{{ index .Params 1 }}" /> - </a> -</p> -{{- else if eq (index .Params 0) "col" -}} -<p> - <a href="{{ index .Params 2 | safeURL }}" target="_blank"> - <img class="lazyload" src="{{ .Site.Params.lazyPlaceholderCol | relURL }}" - data-src="{{ index .Params 2 | safeURL }}" alt="{{ index .Params 1 }}" /> - </a> -</p> -{{- else -}}{{- end -}}{{- else -}}{{ end -}}
\ No newline at end of file +{{ if len .Params | eq 2 }} +<img + class="lazyload img-zoomable" + src="{{ .Site.Params.lazyPlaceholder | relURL }}" + data-src="{{ index .Params 1 }}" + alt="{{ index .Params 0 }}" +/> +{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }} +<img + class="lazyload img-zoomable" + src="{{ .Site.Params.lazyPlaceholderRow | relURL }}" + data-src="{{ index .Params 2 }}" + alt="{{ index .Params 1 }}" +/> +{{ else if eq (index .Params 0) "col" }} +<img + class="lazyload img-zoomable" + src="{{ .Site.Params.lazyPlaceholderCol | relURL }}" + data-src="{{ index .Params 2 }}" + alt="{{ index .Params 1 }}" +/> +{{ else }}{{ end }}{{ else }}{{ end }} diff --git a/layouts/shortcodes/img-nz-lazy.html b/layouts/shortcodes/img-nz-lazy.html new file mode 100644 index 0000000..a606f51 --- /dev/null +++ b/layouts/shortcodes/img-nz-lazy.html @@ -0,0 +1,49 @@ +{{ if len .Params | eq 2 }} +<img + class="lazyload" + src="{{ .Site.Params.lazyPlaceholder | relURL }}" + data-src="{{ index .Params 1 }}" + alt="{{ index .Params 0 }}" +/> +{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }} +<img + class="lazyload" + src="{{ .Site.Params.lazyPlaceholderRow | relURL }}" + data-src="{{ index .Params 2 }}" + alt="{{ index .Params 1 }}" +/> +{{ else if eq (index .Params 0) "col" }} +<img + class="lazyload" + src="{{ .Site.Params.lazyPlaceholderCol | relURL }}" + data-src="{{ index .Params 2 }}" + alt="{{ index .Params 1 }}" +/> +{{ else }} +<a href="{{ index .Params 2 }}" target="_blank"> + <img + class="lazyload" + src="{{ .Site.Params.lazyPlaceholder | relURL }}" + data-src="{{ index .Params 1 }}" + alt="{{ index .Params 0 }}" + /> +</a> +{{ end }}{{ else if len .Params | eq 4 }}{{ if eq (index .Params 0) "row" }} +<a href="{{ index .Params 3 }}" target="_blank"> + <img + class="lazyload" + src="{{ .Site.Params.lazyPlaceholderRow | relURL }}" + data-src="{{ index .Params 2 }}" + alt="{{ index .Params 1 }}" + /> +</a> +{{ else if eq (index .Params 0) "col" }} +<a href="{{ index .Params 3 }}" target="_blank"> + <img + class="lazyload" + src="{{ .Site.Params.lazyPlaceholderCol | relURL }}" + data-src="{{ index .Params 2 }}" + alt="{{ index .Params 1 }}" + /> +</a> +{{ else }}{{ end }}{{ else }}{{ end }} diff --git a/layouts/shortcodes/img-nz.html b/layouts/shortcodes/img-nz.html new file mode 100644 index 0000000..30ea28a --- /dev/null +++ b/layouts/shortcodes/img-nz.html @@ -0,0 +1,7 @@ +{{ if (index .Params 2) }} +<a href="{{ index .Params 2 }}" target="_blank"> + <img src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /> +</a> +{{ else }} +<img src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /> +{{ end }} diff --git a/static/assets/js/fuji.min.js b/static/assets/js/fuji.min.js index d7e8d68..90d79bd 100644 --- a/static/assets/js/fuji.min.js +++ b/static/assets/js/fuji.min.js @@ -1 +1 @@ -"use strict";function getNowTheme(){var e=document.body.getAttribute("data-theme");return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":"dark"===e?"dark":"light"}function updateUtterancesTheme(e){var t=getNowTheme();e&&("dark"===t?e.contentWindow.postMessage({type:"set-theme",theme:"photon-dark"},"https://utteranc.es"):e.contentWindow.postMessage({type:"set-theme",theme:"github-light"},"https://utteranc.es"))}function searchAll(e,t,n){var o=new Fuse(t,{shouldSort:!0,distance:1e4,keys:[{name:"title",weight:2},{name:"tags",weight:1.5},{name:"content",weight:1}]}).search(e);return 0<o.length?(document.getElementById("search-result").innerHTML=template("search-result-template",o),[(new Date).getTime()-n,o.length]):"notFound"}document.querySelector("span.post-comment-notloaded")&&document.querySelector("span.post-comment-notloaded").addEventListener("click",loadComment),document.querySelector(".btn .btn-scroll-top").addEventListener("click",function(){document.documentElement.scrollTop=0}),document.querySelector(".btn .btn-toggle-mode").addEventListener("click",function(){var e=getNowTheme(),t=document.body.getAttribute("data-theme"),n=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";"auto"===t?(document.body.setAttribute("data-theme","light"===e?"dark":"light"),localStorage.setItem("fuji_data-theme","light"===e?"dark":"light")):"light"===t?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("fuji_data-theme","dark"==n?"auto":"dark")):(document.body.setAttribute("data-theme","light"),localStorage.setItem("fuji_data-theme","light"==n?"auto":"light"));var o=document.querySelector(".post-comment");o&&document.querySelector("span.post-comment-notloaded").getAttribute("style")&&("utterances"===o.getAttribute("data-comment")&&updateUtterancesTheme(document.querySelector(".post-comment iframe")),"disqus"===o.getAttribute("data-comment")&&DISQUS.reset({reload:!0}))});var counter,infoElements,key,xhr,urlParams=new URLSearchParams(window.location.search);urlParams.has("s")&&(counter=(new Date).getTime(),infoElements=document.querySelectorAll(".search-result-info"),key=urlParams.get("s"),document.querySelector(".search-input input").setAttribute("value",key),(xhr=new XMLHttpRequest).open("GET","/index.json",!0),xhr.responseType="json",xhr.onerror=function(){infoElements[2].removeAttribute("style")},xhr.ontimeout=function(){infoElements[2].removeAttribute("style")},xhr.onreadystatechange=function(){4===xhr.readyState&&(200===xhr.status?"notFound"===(counter=searchAll(key,xhr.response,counter))?infoElements[1].removeAttribute("style"):(infoElements[0].innerHTML=infoElements[0].innerHTML.replace("[TIME]",counter[0]),infoElements[0].innerHTML=infoElements[0].innerHTML.replace("[NUM]",counter[1]),infoElements[0].removeAttribute("style")):infoElements[2].removeAttribute("style"))},xhr.send(null));
\ No newline at end of file +"use strict";function getNowTheme(){var e=document.body.getAttribute("data-theme");return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":"dark"===e?"dark":"light"}function updateUtterancesTheme(e){var t=getNowTheme();e&&("dark"===t?e.contentWindow.postMessage({type:"set-theme",theme:"photon-dark"},"https://utteranc.es"):e.contentWindow.postMessage({type:"set-theme",theme:"github-light"},"https://utteranc.es"))}function searchAll(e,t,n){var o=new Fuse(t,{shouldSort:!0,distance:1e4,keys:[{name:"title",weight:2},{name:"tags",weight:1.5},{name:"content",weight:1}]}).search(e);return 0<o.length?(document.getElementById("search-result").innerHTML=template("search-result-template",o),[(new Date).getTime()-n,o.length]):"notFound"}document.querySelector("span.post-comment-notloaded")&&document.querySelector("span.post-comment-notloaded").addEventListener("click",loadComment),document.querySelector(".btn .btn-scroll-top").addEventListener("click",function(){document.documentElement.scrollTop=0}),document.addEventListener("DOMContentLoaded",function(){mediumZoom(".img-zoomable",{margin:32,background:"#00000054",scrollOffset:128})}),document.querySelector(".btn .btn-toggle-mode").addEventListener("click",function(){var e=getNowTheme(),t=document.body.getAttribute("data-theme"),n=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";"auto"===t?(document.body.setAttribute("data-theme","light"===e?"dark":"light"),localStorage.setItem("fuji_data-theme","light"===e?"dark":"light")):"light"===t?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("fuji_data-theme","dark"==n?"auto":"dark")):(document.body.setAttribute("data-theme","light"),localStorage.setItem("fuji_data-theme","light"==n?"auto":"light"));var o=document.querySelector(".post-comment");o&&document.querySelector("span.post-comment-notloaded").getAttribute("style")&&("utterances"===o.getAttribute("data-comment")&&updateUtterancesTheme(document.querySelector(".post-comment iframe")),"disqus"===o.getAttribute("data-comment")&&DISQUS.reset({reload:!0}))});var counter,infoElements,key,xhr,urlParams=new URLSearchParams(window.location.search);urlParams.has("s")&&(counter=(new Date).getTime(),infoElements=document.querySelectorAll(".search-result-info"),key=urlParams.get("s"),document.querySelector(".search-input input").setAttribute("value",key),(xhr=new XMLHttpRequest).open("GET","/index.json",!0),xhr.responseType="json",xhr.onerror=function(){infoElements[2].removeAttribute("style")},xhr.ontimeout=function(){infoElements[2].removeAttribute("style")},xhr.onreadystatechange=function(){4===xhr.readyState&&(200===xhr.status?"notFound"===(counter=searchAll(key,xhr.response,counter))?infoElements[1].removeAttribute("style"):(infoElements[0].innerHTML=infoElements[0].innerHTML.replace("[TIME]",counter[0]),infoElements[0].innerHTML=infoElements[0].innerHTML.replace("[NUM]",counter[1]),infoElements[0].removeAttribute("style")):infoElements[2].removeAttribute("style"))},xhr.send(null));
\ No newline at end of file |