问题
utterances 是一个基于 GitHub Issues 的评论系统，Svelte 是一个前端框架，也是采用模板的形式，但没有虚拟 DOM。
我在 Svelte 项目中通过 script 标签引入 utterances 后发现，在开发模式下，utterances 可以正常显示，但是在部署到 GitHub Pages 之后显示不出来。
控制台中可以看到 script 标签已经插入了，但是在网络连接中没有出现 utterances 相关的连接。
在本地 build 后运行，同样不会显示 utterances。
原因
可能与 Svelte 的构建方式有关，React 同样会出现这个问题。
解决方案
需要手动操作 DOM，插入一个 script 标签。
<script>
document.addEventListener('DOMContentLoaded', () => {
const comment = document.querySelector('#comment')
if (comment) {
const utterances = document.createElement('script')
utterances.setAttribute('src', 'https://utteranc.es/client.js')
utterances.setAttribute('repo', <Your Repo>)
utterances.setAttribute('issue-term', <Your Issue Title>)
utterances.setAttribute('theme', 'preferred-color-scheme')
utterances.setAttribute('crossOrigin', 'anonymous')
utterances.setAttribute('async', 'true')
comment.appendChild(utterances)
}
})
</script>
<div class="comment" id="comment" />
上面代码中的 repo 和 issue-term 别忘了改成你自己的，可以在 utterances 官网 查看具体的含义。
对于 React，也需要使用这个方法来插入 utterances，具体解决方案可以查看下面的参考资料。