PaperMod&utterances主题联动

PaperMod&utterances主题联动 #

utterances的安装非常简单，官方指引下点几下就安装好。

但安装代码中主题是静态指定的，切换明暗模式是不能正常跟随切换。

需要改为动态渲染，这块网上代码比较多，主要是在comments.html增加变量。

find . -name comments.html 
>> ./PaperMod/layouts/partials/comments.html

与PaperMod主题搭配时，有2个适配点。

PaperMod生效主题参数标识，存放于localStorage.pref-theme，未使用浏览器标准主题。
手动点PaperMod明暗主题切换按钮，可监听.logo-switches点击，进行utterances跟随切换。
关于跟随切换：
1. 不建议优先用MutationObserver，万能但有点性能损耗。
2. 应该监听#theme-toogle的点击事件触发utterances主题跟随切换：
  但修改其onclick事件会导致原有明暗模式切换动作失效。
  无类似jquery的监听追加功能: 给元素追加事件回调，且不覆盖已有回调(Adding listeners without overriding)
3. 一个tricky方法是监听其父元素.logo-switch点击事件触发utterances主题切换。
  当然肯定有其它方式。

主题切换DOM相关:

最终效果：Pangzi's Blog。

参考代码：

<section class="article discussion">
<script>
	let currentHugoTheme = window.localStorage.getItem("pref-theme");
	function loadComment() {
		let theme = currentHugoTheme == 'dark' ? 'photon-dark' :'github-light';
		let s = document.createElement('script');
		s.src = 'https://utteranc.es/client.js';
		s.setAttribute('repo', '<your repo>');
		s.setAttribute('issue-term', 'url');
		s.setAttribute('label', 'utterances');
		s.setAttribute('theme', theme);
		s.setAttribute('crossorigin', 'anonymous');
		s.setAttribute('async', '');
		document.querySelector('section.article.discussion').innerHTML = '';
		document.querySelector('section.article.discussion').appendChild(s);
	}

	loadComment();
	
	document.querySelector('.logo-switches').onclick = async ()=>{

	await new Promise(r => setTimeout(r, 200));

	let newHugoTheme = window.localStorage.getItem('pref-theme');
	if(newHugoTheme != currentHugoTheme){
		currentHugoTheme = newHugoTheme;
			loadComment();
		}
	};
</script>
</section>