diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | README_CN.md | 4 | ||||
| -rw-r--r-- | layouts/partials/analytic-cfga.html | 2 | ||||
| -rw-r--r-- | layouts/partials/analytic-gtag.html | 2 | ||||
| -rw-r--r-- | layouts/partials/head.html | 10 | ||||
| -rw-r--r-- | layouts/partials/scripts-end.html | 152 | ||||
| -rw-r--r-- | layouts/partials/scripts-front.html | 6 | ||||
| -rw-r--r-- | package.json | 9 | ||||
| -rw-r--r-- | static/assets/js/fuji.dev.js | 130 |
9 files changed, 153 insertions, 164 deletions
@@ -2,7 +2,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markdown style. -    +    [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) diff --git a/README_CN.md b/README_CN.md index 38c36f7..0c199a8 100644 --- a/README_CN.md +++ b/README_CN.md @@ -2,7 +2,7 @@ 简单的 Hugo 主题，支持夜间模式，Markdown 是蹭的 GitHub Primer。萌新一个啥也不会，有问题尽管提（ -    +    [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) @@ -19,7 +19,7 @@ - [放大图片；网慢，要 lazyload](#放大图片网慢要-lazyload) - [Markdown 钩子](#markdown-钩子) - [这字体也太丑了，换掉](#这字体也太丑了换掉) - - [自定义 highlight.js 支持的语言]() + - [自定义 highlight.js 支持的语言](#自定义-highlightjs-支持的语言) - [Disqus identifier](#disqus-identifier) - [批判一番](#批判一番) - [License](#license) diff --git a/layouts/partials/analytic-cfga.html b/layouts/partials/analytic-cfga.html index ee7567e..63db4d6 100644 --- a/layouts/partials/analytic-cfga.html +++ b/layouts/partials/analytic-cfga.html @@ -3,5 +3,5 @@ window.ga_tid = '{{ .Site.Params.googleAnalyticsTid }}'; window.ga_api = '{{ .Site.Params.googleAnalyticsRoute }}'; </script> -<script src="https://cdn.jsdelivr.net/npm/cfga@1.0.1/cfga.min.js" async></script> +<script async src="https://cdn.jsdelivr.net/npm/cfga@1.0.1/cfga.min.js"></script> {{ end }}
\ No newline at end of file diff --git a/layouts/partials/analytic-gtag.html b/layouts/partials/analytic-gtag.html index f43e48a..f851745 100644 --- a/layouts/partials/analytic-gtag.html +++ b/layouts/partials/analytic-gtag.html @@ -1,6 +1,5 @@ {{ with .Site.GoogleAnalytics }} <!-- GA --> -<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script> <script> window.dataLayer = window.dataLayer || []; @@ -10,4 +9,5 @@ gtag('js', new Date()); gtag('config', '{{ . }}'); </script> +<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script> {{ end }}
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d4b610c..f648160 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -38,18 +38,10 @@ {{ $style := $sass | resources.ToCSS $options }} <link rel="stylesheet" href="{{ $style.RelPermalink }}" /> -<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" data-cfasync="false"></script> -<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script> -<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script> +<script data-cfasync="false" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.5/font-awesome/fontawesome.min.css" /> -{{ if .Site.Params.customHighlight }} -<script src="{{ .Site.Params.customHighlightURL | relURL }}"></script> -{{ else }} -<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js"></script> -{{ end }} {{ if .Params.playerURL }} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" /> -<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> {{ end }} {{ partial "analytic-gtag.html" . }} diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html index 39b3a00..220ee93 100644 --- a/layouts/partials/scripts-end.html +++ b/layouts/partials/scripts-end.html @@ -1,152 +1,14 @@ -<script> - // toggle theme - function toggleTheme() { - $('body').attr('data-theme', (index, attr) => { - if (attr === 'light') { - localStorage.setItem('fuji_theme', 'dark'); - return 'dark'; - } else { - localStorage.setItem('fuji_theme', 'light'); - return 'light'; - } - }); - } - // update medium-zoom theme - // @params fujiTheme, mediumEvent - function updateMeidumTheme(fujiTheme, mediumEvent) { - if (fujiTheme && mediumEvent) { - mediumEvent.detach(); - let mediumTheme; - if (fujiTheme === 'dark') { - mediumTheme = '#2f3136'; - } else { - mediumTheme = '#fffffd'; - } - mediumEvent = mediumZoom('.img-zoomable', { - background: mediumTheme - }); - } - } - // update utterances theme - // @params fujiTheme, utterancesFrame - function updateUtterancesTheme(fujiTheme, utterancesFrame) { - if (fujiTheme && utterancesFrame) { - let ifMessage; - if (fujiTheme === 'dark') { - ifMessage = { - type: 'set-theme', - theme: 'photon-dark' - }; - } else { - ifMessage = { - type: 'set-theme', - theme: 'github-light' - }; - } - utterancesFrame.contentWindow.postMessage(ifMessage, 'https://utteranc.es'); - } - } -</script> - -<script> - // toc anchors & to-top button - $('.btn .btn-scroll-top').on('click', () => { - $('html, body').animate({ - scrollTop: 0, - }); - }); - $('.sidebar-toc a').on('click', (event) => { - $('html, body').animate({ - scrollTop: $($(event.currentTarget).attr('href')).offset().top - }); - }); - - // init medium-zoom - var mediumTheme; - if ($('body').attr('data-theme') === 'dark') { - mediumTheme = '#2f3136'; - } else { - mediumTheme = '#fffffd'; - } - var mediumEvent = mediumZoom('.img-zoomable', { - background: mediumTheme - }); - - hljs.initHighlightingOnLoad(); - - // remove empty ul in toc if article only have ## and ### - if ($('.sidebar-toc ul ul').length > 0 && $('.sidebar-toc ul ul li').text() === '') { - $('.sidebar-toc ul ul').hide(); - } - - // init highlight.js - hljs.initHighlighting(); -</script> - -{{ if and (and (ne .Params.noComments true) (.IsPage)) (.Site.Params.utterancesRepo) }} -<script> - // utterances comment loading indicator - var commentStatus; // utterence status - var commentLoadingTime = 0; // loading time passed - var commentCheckInterval = self.setInterval(checkUtterances, 500); - - function checkUtterances() { - commentStatus = $('.post-comment .utterances').attr('style'); - if (commentStatus) { - clearInterval(commentCheckInterval); - updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]) - $('.post-loading').hide(); - } else { - if (++commentLoadingTime > 20) { - clearInterval(commentCheckInterval); - $('.post-comment').hide(); - $('.post-loading p').text('{{ i18n "postCommentLoadingFailed" }}'); - $('.post-loading i').attr('class', 'far fa-times-circle'); - } - } - } - - // theme switch button - $('.btn .btn-toggle-mode').on('click', () => { - // toggle theme - toggleTheme(); - // update medium background - updateMeidumTheme($('body').attr('data-theme'), mediumEvent); - // update utterances theme if available - if (commentStatus) { - updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]); - } - }); -</script> -{{ else if and (and (ne .Params.noComments true) (.IsPage)) (.Site.Params.disqusShortname) }} -<script> - // theme switch button - $('.btn .btn-toggle-mode').on('click', () => { - // toggle theme - toggleTheme(); - // update medium background - updateMeidumTheme($('body').attr('data-theme'), mediumEvent); - // update disqus theme if available - if (DISQUS) { - DISQUS.reset({ - reload: true - }); - } - }); -</script> +<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script> +<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script> +{{ if .Site.Params.customHighlight }} +<script src="{{ .Site.Params.customHighlightURL | relURL }}"></script> {{ else }} -<script> - // theme switch button - $('.btn .btn-toggle-mode').on('click', () => { - // toggle theme - toggleTheme(); - // update medium background - updateMeidumTheme($('body').attr('data-theme'), mediumEvent); - }); -</script> +<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js"></script> {{ end }} +<script src="{{ "/assets/js/fuji.dev.js" | relURL }}"></script> {{ with .Params.playerURL }} +<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> <script> // in-post aplayer var aPlayer = new APlayer({ diff --git a/layouts/partials/scripts-front.html b/layouts/partials/scripts-front.html index 59c3bb0..9425769 100644 --- a/layouts/partials/scripts-front.html +++ b/layouts/partials/scripts-front.html @@ -1,6 +1,6 @@ <script data-cfasync="false"> // detect theme data in localStorage - // change the data-theme attribute of body + // if diff change the data-theme attribute of body var fujiThemeData = localStorage.getItem('fuji_theme'); if (fujiThemeData) { if ($('body').attr('data-theme') !== fujiThemeData) { @@ -12,12 +12,10 @@ } }); } - } else { - localStorage.setItem('fuji_theme', $('body').attr('data-theme')); } </script> <script data-cfasync="false"> - // ie + // ie detection var ua = window.navigator.userAgent; function browserDetection() { diff --git a/package.json b/package.json index e6592f3..7e7f66b 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,13 @@ }, "homepage": "https://github.com/amzrk2/hugo-theme-fuji#readme", "devDependencies": { - "@primer/css": "14.4.0" + "@babel/cli": "^7.10.1", + "@babel/core": "^7.10.2", + "@primer/css": "14.4.0", + "uglify-js": "^3.9.4" + }, + "scripts": { + "babel": "babel static/assets/js/fuji.dev.js --out-file static/assets/js/fuji.js", + "js": "uglifyjs static/assets/js/fuji.js -o static/assets/js/fuji.min.js -c --source-map" } } diff --git a/static/assets/js/fuji.dev.js b/static/assets/js/fuji.dev.js new file mode 100644 index 0000000..d6917a3 --- /dev/null +++ b/static/assets/js/fuji.dev.js @@ -0,0 +1,130 @@ +'use strict'; + +// toggle theme +function toggleTheme() { + $('body').attr('data-theme', (index, attr) => { + if (attr === 'light') { + localStorage.setItem('fuji_theme', 'dark'); + return 'dark'; + } else { + localStorage.setItem('fuji_theme', 'light'); + return 'light'; + } + }); +} + +// update medium-zoom theme +// @params targetTheme, mediumInst +function updateMeidumTheme(targetTheme, mediumInst) { + if (targetTheme && mediumInst) { + mediumInst.detach(); + if (targetTheme === 'dark') { + mediumInst = mediumZoom('.img-zoomable', { + background: '#2f3136', + }); + } else { + mediumInst = mediumZoom('.img-zoomable', { + background: '#fffffd', + }); + } + } +} + +// update utterances theme +// @params targetTheme, utterancesFrame +function updateUtterancesTheme(targetTheme, utterancesFrame) { + if (targetTheme && 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' + ); + } + } +} + +// to-top button +$('.btn .btn-scroll-top').on('click', () => { + $('html, body').animate({ + scrollTop: 0, + }); +}); + +// toc anchors +$('.sidebar-toc a').on('click', (event) => { + $('html, body').animate({ + scrollTop: $($(event.currentTarget).attr('href')).offset().top, + }); +}); + +// remove empty ul in toc if article only have ## and ### +if ($('.sidebar-toc ul ul').length > 0 && $('.sidebar-toc ul ul li').text() === '') { + $('.sidebar-toc ul ul').hide(); +} + +// init medium-zoom +var mediumInst; // medium-zoom instance +if ($('body').attr('data-theme') === 'dark') { + mediumInst = mediumZoom('.img-zoomable', { + background: '#2f3136', + }); +} else { + mediumInst = mediumZoom('.img-zoomable', { + background: '#fffffd', + }); +} + +// init highlight.js +hljs.initHighlighting(); + +// if in post page and using utterances +// add utterances comment loading indicator +if ($('.post-loading').length >= 1) { + var commentStatus; // utterence status + var commentLoadingTime = 0; // loading time passed + var commentCheckInterval = self.setInterval(checkUtterances, 500); + + function checkUtterances() { + commentStatus = $('.post-comment .utterances').attr('style'); + if (commentStatus) { + clearInterval(commentCheckInterval); + updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]); + $('.post-loading').hide(); + } else { + if (++commentLoadingTime > 20) { + clearInterval(commentCheckInterval); + $('.post-comment').hide(); + $('.post-loading i').attr('class', 'far fa-times-circle'); + } + } + } +} + +// init theme switch button +$('.btn .btn-toggle-mode').on('click', () => { + // toggle theme + toggleTheme(); + // update medium background + updateMeidumTheme($('body').attr('data-theme'), mediumInst); + // switch comment area theme + // only works after comment area are initialized + if ($('.post-loading').length >= 1 && commentStatus) { + updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]); + } + if ($('#disqus_thread').length >= 1 && typeof DISQUS !== 'undefined') { + DISQUS.reset({ + reload: true, + }); + } +}); |