在 Quartz 中集成 Artalk 评论系统

Quartz 是一个很棒的数字花园工具，但默认只支持 Giscus 评论系统。如果你想使用 Artalk 这个轻量级的评论系统，本文将介绍如何集成。

为什么选择 Artalk？

• 完全开源，可以自托管
• 界面简洁美观
• 支持匿名评论
• 不需要依赖第三方服务

集成步骤

1. 修改 Comments 组件

首先，我们需要修改 quartz/components/Comments.tsx 文件，添加 Artalk 支持：

type ArtalkOptions = {
  server: string
  site: string
  placeholder?: string
}

这里定义了 Artalk 的配置选项：

• server: Artalk 服务器地址
• site: 站点名称
• placeholder: 评论框占位文字

2. 添加 Artalk 实现

在同一个文件中，添加 Artalk 的实现代码：

if (opts.provider === "artalk") {
  const artalkOpts = opts.options as ArtalkOptions
  return (
    <div class={classNames(displayClass, "Comments")}>
      <link href="https://unpkg.com/artalk/dist/Artalk.css" rel="stylesheet" />
      <script src="https://unpkg.com/artalk/dist/Artalk.js"></script>
      <div id="Comments"></div>
      <script dangerouslySetInnerHTML={{ __html: `
        document.addEventListener('nav', function initArtalk() {
          document.removeEventListener('nav', initArtalk)
          
          Artalk.init({
            el: '#Comments',
            server: '${artalkOpts.server}',
            site: '${artalkOpts.site}',
            placeholder: '${artalkOpts.placeholder || ''}',
            darkMode: false,
            gravatar: {
              mirror: "https://cravatar.cn/avatar/"
            }
          })
        })
      `}} />
    </div>
  )
}

3. 配置 Artalk

在 quartz.layout.ts 文件中添加 Artalk 配置：

export const sharedPageComponents: SharedLayout = {
  head: Component.Head(),
  header: [],
  footer: Component.Footer(),
  afterBody: [
    Component.Comments({
      provider: "artalk",
      options: {
        server: "https://your-artalk-server.com",  // 替换为你的 Artalk 服务器地址
        site: "Your Site Name",                    // 替换为你的站点名称
        placeholder: "说点什么..."                 // 可选的评论框占位文字
      }
    })
  ],
}

4. 控制评论显示

你可以在文章的 frontmatter 中通过 comments 字段控制是否显示评论：

---
title: 你的文章标题
comments: false  # 设置为 false 将禁用该页面的评论
---

注意事项

1. 确保你已经部署了 Artalk 服务器
2. 评论系统将使用亮色主题，不会跟随网站的暗色模式
3. 使用 CDN 加载 Artalk 资源，如果需要可以下载到本地使用

总结

通过以上步骤，你就可以在 Quartz 中使用 Artalk 评论系统了。相比 Giscus，Artalk 提供了更简单的评论体验，不需要用户登录 GitHub 就能发表评论。

如果你遇到任何问题，欢迎在下方评论区留言讨论！