diff options
author | 裸奔狂甩丁丁 <30397306+StreakingMan@users.noreply.github.com> | 2022-05-05 23:36:54 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-05 23:36:54 +0800 |
commit | 26475d899bfd1cd7abdef35ecd2d77274064e0cd (patch) | |
tree | 664bf569b192d7997e2b1ae62de8307a438b831a /_includes | |
parent | ffb0e94ff53d3585efd7acad7560dd11a153f5e6 (diff) |
feat: support utterances comment (#83)
Diffstat (limited to '_includes')
-rw-r--r-- | _includes/extensions/comments/utterances.html | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/_includes/extensions/comments/utterances.html b/_includes/extensions/comments/utterances.html new file mode 100644 index 0000000..4743562 --- /dev/null +++ b/_includes/extensions/comments/utterances.html @@ -0,0 +1,46 @@ +<script async + crossorigin="anonymous" + issue-term="{{ site.utterances.issue_term }}" + label="{{ site.utterances.label }}" + {%- if site.utterances.follow_site_theme -%} + onload="initUtterancesTheme()" + {%- endif -%} + repo="{{ site.utterances.repo }}" + src="https://utteranc.es/client.js" + theme="{{ site.utterances.theme }}"> +</script> + +{%- if site.utterances.follow_site_theme -%} +<script> + const setUtterancesTheme = (dataTheme) => { + const iframe = document.querySelector('.utterances-frame'); + if (iframe) { + const utterancesTheme = dataTheme === 'dark' ? 'github-dark' : 'github-light' + const message = { + type: 'set-theme', + theme: utterancesTheme + }; + iframe.contentWindow.postMessage(message, 'https://utteranc.es'); + } + } + + // init theme + const initUtterancesTheme = () => { + const iframe = document.querySelector('.utterances-frame'); + if (!iframe) return + iframe.onload = () => { + setUtterancesTheme(document.documentElement.getAttribute('data-theme')) + } + } + + // dynamic change + const observer = new MutationObserver((mutationsList, observer) => { + for (let mutation of mutationsList) { + if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') { + setUtterancesTheme(document.documentElement.getAttribute('data-theme')) + } + } + }); + observer.observe(document.documentElement, {attributes: true, childList: false, subtree: false}); +</script> +{%- endif -%} |