关于评论系统

博客中开放了评论系统，目前评论系统使用的是 twikoo, 使用的是 vercel 方案，用的 mongodb.com 提供的免费储存。效果还不错，目前不会对所有的文章和页面开放评论。

嵌入 quartz 的过程中碰到了一些小问题：

由于 quartz 在 spa 模式下对于 空 hash 的情况没有考虑，所以嵌入以后如果点击评论将无法正常工作（会刷新页面）这里可以单独判断并跳过这个逻辑：

quartz/components/scripts/spa.inline.tsL128

if(isSamePage(url) && window.location.href.endsWith('#')) { 
  // 说明是没有正确设置 hash 的 a 标签，跳过即可
  return;
}

对于嵌入评论的方法，可以参考下面这个代码实现：

function loadScript(url: string) {
  return new Promise<void>((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    script.onload = () => {
      resolve();
    };
    script.onerror = () => {
      reject(new Error(`Failed to load script: ${url}`));
    };
    document.head.appendChild(script);
  });
}
 
async function init() {
  await Promise.all([
    loadScript('https://cdnjs.cloudflare.com/ajax/libs/twikoo/1.6.36/twikoo.min.js'),
    loadScript("https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js")
      .then(() => loadScript("https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js")),
  ]);
  document.getElementById("tcomment")?.addEventListener('click', (event) => {
    event.stopPropagation();
    event.preventDefault();
    return false
  });
  (window as any).twikoo?.init({
    envId: 'https://comment.iceprosurface.com',
    el: '#tcomment',
    path: (window as any).__comment_id__
  });
}
 
init();
 
document.addEventListener('nav', (event) => {
  init();
});

将会在页面加载完成后重新加载，由于 script 不会重复加载的特性，所以即使重新 append 也是能吃到的缓存的，无脑设置即可。

本文标题：关于评论系统

永久链接：https://iceprosurface.com/blog/comments/

查看源码：