diff options
-rw-r--r-- | _config.yml | 11 | ||||
-rw-r--r-- | _includes/extensions/comments/utterances.html | 46 | ||||
-rw-r--r-- | _layouts/post.html | 4 |
3 files changed, 61 insertions, 0 deletions
diff --git a/_config.yml b/_config.yml index 9029b67..989eabb 100644 --- a/_config.yml +++ b/_config.yml @@ -194,6 +194,17 @@ yat: # client_secret: "Your client secret" # redirect_uri: "Your redirect url" # If you use a custom domain name +# Utterances comments +# See https://utteranc.es/ +# set follow_site_theme true to make utterances' theme follow the site's + +# utterances: +# repo: "owner/repo" +# issue_term: "title" +# label: "utterances comment" +# theme: "github-light" +# follow_site_theme: true + # Build settings # highlighter: none markdown: kramdown 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 -%} diff --git a/_layouts/post.html b/_layouts/post.html index d1680a2..c561308 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -69,6 +69,10 @@ sidebar: {%- include extensions/comments/gitment.html -%} {%- endif -%} + {%- if site.utterances.repo -%} + {%- include extensions/comments/utterances.html -%} + {%- endif -%} + {%- endif -%} </div> {%- endif -%} |