添加评论
如果您正在使用 Gatsby 运行博客,并且已经开始添加一些内容,那么接下来应该考虑的是如何提高访客的参与度。一个很好的方法是允许他们对您写的内容提出问题和表达观点。这将使您的博客对任何访问者来说都显得更加生动。
市面上有很多添加评论功能的选项,其中一些专门针对静态网站。虽然这个列表绝非详尽无遗,但它可以作为一个很好的起点,说明有哪些可用的选项。
您也可以 自己动手实现评论系统,正如 Tania Rascia 在 Gatsby 博客上写的那样。
使用 Disqus 添加评论
在本指南中,您将学习如何在博客中实现 Disqus,因为它具有许多出色的功能。
- 它维护成本低,这意味着 管理评论和维护论坛 会更轻松。
- 它提供官方的 React 支持。
- 它提供了一个 慷慨的免费套餐。
- 它 似乎是迄今为止最广泛使用的服务。
- 评论更容易:Disqus 拥有庞大的现有用户群,新用户的上手过程很快。您可以使用您的 Google、Facebook 或 Twitter 帐户注册,用户可以通过这些渠道更无缝地分享他们撰写的评论。
- Disqus 的 UI 具有独特但不过分突出的外观,许多用户会认出并信任它。
- 所有 Disqus 组件都采用懒加载方式,这意味着它们不会对帖子的加载时间产生负面影响。
但是,请记住,选择 Disqus 也会带来取舍。您的网站不再完全是静态的,而是依赖于外部平台,通过动态生成的 iframe 来传递评论。此外,您还应考虑让第三方存储您访问者的评论并可能跟踪他们的浏览行为所带来的隐私影响。您可以查阅 Disqus 隐私政策、隐私常见问题解答(特别是关于 GDPR 合规性的最后一个问题),并告知您的用户 如何编辑他们的数据共享设置。
如果这些顾虑 outweighs Disqus 的好处,您可能需要考虑上面列出的一些其他选项。我们欢迎贡献拉取请求,以扩展本指南,包含其他服务的设置说明。
实现 Disqus
以下是将 Disqus 评论添加到您自己的博客的步骤
- 注册 Disqus 账号。在此过程中,您需要为您的网站选择一个短名称。Disqus 将以此识别来自您网站的评论。请将此短名称复制以备后用。
- 安装 Disqus React 包
- 将步骤 1 中的短名称添加为类似
GATSBY_DISQUS_NAME的内容到您的.env和.env.example文件中,以便 fork 您仓库的人知道他们需要提供此值才能使评论正常工作。(您需要为环境变量加上GATSBY_前缀,才能 使其可供客户端代码访问。)
- 在您的博客文章模板(通常是
src/templates/post.js)中,导入DiscussionEmbed组件。
然后定义您的 Disqus 配置对象
其中 identifier 必须是一个唯一标识帖子的字符串或数字。它可以是帖子的 slug、标题或某个 ID。最后,将 DiscussionEmbed 添加到您的帖子模板的 JSX 中。
这样就完成了。您现在应该可以在您的博客文章下方看到 Disqus 评论表单 看起来像这样。祝您博客愉快!
立即开始构建,在 Netlify!