4个插件可向您的Gatsby.js博客添加评论

2020年12月30日11:03:43 发表评论 63 次浏览

本文概述

在博客上发表评论有很多好处。它提供了与你的读者互动并获得你的写作反馈的机会。由于用户生成了内容, 它还提高了SEO。

尽管那里有很多很棒的付费评论平台, 但是在本文中, 我们将重点介绍可免费使用的插件。

在本文中, 我们将介绍如何使用以下四个插件中的任何一个, 无缝且只需很少的配置即可将评论集成到你的Gatsby博客中:

  1. 领英
  2. GitTalk
  3. 评论框
  4. GraphComment

1.领英

Disqus是一个流行的第三方评论插件, 可以轻松地在配置很少的博客上添加, 管理和审核评论。

优点

  • 使用Disqus帐户或社交登录的可靠身份验证选项
  • 可轻松自定义并适应你网站的主题
  • 直接在博客页面或管理控制台上管理评论
  • 使用机器学习自动进行垃圾邮件审核
  • 媒体(图像, 视频和gif)可以嵌入评论中

缺点

  • 有时会降低页面加载速度, 因为它不会异步加载并且具有很多依赖性

行动中的Disqus

要开始在盖茨比上使用Disqus, 你首先需要注册帐户并点击"我要在我的网站上安装Disqus"。在下一页上, 输入一个网站名称并记下该名称, 以备将来使用。

网站名称字段的屏幕截图

接下来, 安装gatsby-plugin-disqus:

npm install gatsby-plugin-disqus --save

Or

yarn add gatsby-plugin-disqus

然后, 在以下位置添加并配置插件gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-disqus`, options: {
        shortname: `codewithlinda`
      }
    }, ]
}

的简称选项应与你在上一步中提供的网站名称相对应。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

4个插件可向您的Gatsby.js博客添加评论1

下一步是将Disqus评论组件添加到你的博客页面模板文件中:

import Disqus from 'gatsby-plugin-disqus'

const PostTemplate = () => (
  <>
    /* Page Contents */
    <Disqus 
      identifier={post.id}
      title={post.title}
      url={`${config.siteUrl}${location.pathname}`}
    />
  </>
)

export default PostTemplate

根据GraphQL查询的结构, 提供ID, 标题和路径URL。这些有助于将评论线程正确地关联到相应的博客文章。部署并导航到你的站点URL, 你现在应该已启用Disqus评论。

Disqus评论示例已激活

2.GitTalk

GitTalk是一个基于GitHub问题的评论组件, 事前。用户认证是通过GitHub完成的, 因此它是技术博客的理想选择, 因为你的大多数读者已经拥有GitHub帐户。

优点

  • 没有性能上的缺点。 GitTalk是无服务器的, 因此注释可以快速加载
  • 所有评论都将存储在你的GitHub存储库中, 因此你可以控制所有数据, 并且可以随时随地轻松迁移
  • 支持多种语言

缺点

  • 仅适用于拥有GitHub帐户的用户
  • 无内置审核。这意味着你无法从博客页面中删除或禁用评论, 而必须从GitHub问题线程中手动将其删除

行动中的GitTalk

要将GitTalk集成到Gatsby博客中, 我们将使用盖茨比插件.

首先, 安装插件:

npm install --save gatsby-plugin-gitalk

Or

yarn add gatsby-plugin-gitalk

然后注册一个新的GitHub Oauth应用程序让你的博客启用身份验证和授权。提供可以是任何名称的应用程序名称, 应作为你的博客URL的主页URL, 描述以及应作为你的博客URL的授权回调URL。

授权回调URL字段屏幕截图

点击"注册应用程序"以生成我们将在下一步中使用的客户ID和客户机密。

接下来, 在以下位置添加并配置插件gatsby-config.js:

plugins: [
    {
      resolve: `gatsby-plugin-gitalk`, options: {
        config: {
          clientID: 'f16d485a306b836cabd1', clientSecret: '6ee5e2a6c2a4992fc49aeab2740e6493bbc9cfae', repo: 'gatsby-demo-comments', owner: 'Linda-Ikechukwu', admin: ['Linda-Ikechukwu']
        }

      }
    }, ]

在配置选项中, 客户编号和客户秘密是上一步中的值。的回购是你要提交评论问题的回购的名称-最好是存储博客代码的回购。的所有者config是你的GitHub用户名, 管理员是一系列回购所有者和合作者。还有其他可选的配置参数这里.

最后, 将注释组件添加到你的博客文章模板文件中:

//in template/blog-post.js
import Gitalk from 'gatsby-plugin-gitalk'
import '@suziwen/gitalk/dist/gitalk.css'

const PostTemplate = () => {
  let gitalkConfig = {
    id: post.slug || post.id, title:post.frontmatter.title, }
  return (
     <Gitalk options={gitalkConfig}/>
  )
}

export default PostTemplate

CSS文件包含插件的样式。你可以通过复制以下内容来修改注释组件的样式:node_modules/@suziwen/gitalk/dist/gitalk.css, 对其进行修改, 然后将其作为替代导入。根据GraphQL查询的结构, 提供注释组件的ID和标题。

提交针对特定文章的第一条评论时, GitTalk会打开一个问题, 并在配置中提供提供的标题作为该问题的标题, 并将在该文章下发表的所有评论附加到该问题上。你可以通过删除有关GitHub问题的评论来从页面中删除评论。

删除有关GitHub问题的评论的示例

要测试, 部署和访问你的站点URL, 请单击"初始化注释", 现在你应该在站点上启用注释。

注释已激活示例

3.评论框

CommentBox是一个注重隐私的第三方评论解决方案, 每月免费提供100条评论。

优点

  • 通过社交或电子邮件登录进行身份验证
  • 提供匿名评论
  • 直接在博客页面或管理控制台上管理评论
  • 从Disqus导入和迁移评论

缺点

  • 每月可免费提供100条评论, 之后你需要支付15美元

行动中的CommentBox

要开始使用CommentBox, 你需要创建一个帐户。输入不带https和www的网站域。之后, 将为你生成一个项目ID。注意这一点, 因为它将在以后的步骤中使用。

CommentBox上的基本信息字段

接下来, 通过npm安装CommentBox:

npm install commentbox.io --save

然后, 将注释组件添加到博客页面模板文件:

import commentBox from 'commentbox.io';
const BlogPostTemplate = ()=>{
  useEffect(() =>{
    commentBox('5632596591509504-proj')
  }, [])

  return(
     <div className="commentbox" />
  )

}

提供给commentBox函数应该是你从上一步生成的项目ID。默认情况下, 评论会自动获得批准, 但你也可以选择从信息中心手动批准它们。

如果你想更改注释插件的主题, 请为对象提供以下参数commentBox功能:

commentBox('5632596591509504-proj', {
   backgroundColor: null, // default transparent
   textColor: null, // default black
    subtextColor: null, // default grey
})
主题不同的评论

4.GraphComments

GraphComments不仅仅是一个评论平台。这是一个嵌入到你博客中的社区系统。

优点

  • 通过社交或电子邮件登录进行身份验证
  • 匿名评论。已通过管理信息中心批准
  • 推送通知已启用。如果用户收到回复或对评论的赞誉, 将向用户发出警报
  • 媒体(图像, 视频和GIF)可以嵌入评论中
  • 直接在博客页面或管理控制台上管理评论
  • 用户可以编辑评论

缺点

  • 有限的免费套餐, 每月最多可加载1, 000, 000个数据。这意味着你网站上每月的页面浏览总数将被限制为一百万, 然后在该月的剩余时间内将自动禁用GraphComments。对于流量最小的网站, 这实际上无需担心。

GraphComments在行动

首先, 注册并在你的仪表板上添加一个新站点。请注意你的唯一ID, 因为它将在以后的步骤中使用。

唯一ID字段截图

之后, 你将被重定向到仪表板。单击我的站点>你的站点名称>设置以查找你的设置脚本。

你可以使用以下任一方法将该脚本添加到博客文章模板文件中在线反应脚本oruseEffect:

import Script from "react-inline-script"

<div id="graphcomment"></div>
      <Script>
        {`
          window.gc_params = {
              graphcomment_id: 'codewithlinda', fixed_header_height: 0, };

          (function() {
            var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
            gc.src = 'https://graphcomment.com/js/integration.js?' + Math.round(Math.random() * 1e8);
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
          })();
        `}
      </Script>

Or

useEffect(() => {
    window.gc_params = {
      graphcomment_id: 'codewithlinda', fixed_header_height: 0, };

  (function() {
    var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
    gc.src = 'https://graphcomment.com/js/integration.js?' + Math.round(Math.random() * 1e8);
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
  })();
 }, [])

确保graphcomment_id值与你在上一步中给出的值匹配。而已。 GraphComments现在应该嵌入在你的博客页面上。

启用GraphComments的示例

总结

在本文中, 我讨论并引导了你如何使用四个插件, Disqus, CommentBox, GitTalk和GraphComments中的任何一个为Gatsby博客设置评论。

如果你喜欢控制自己, 并希望通过一个GitHub帐户管理有关博客, 代码, 文章和评论的所有内容, 请使用GitTalk。如果你不介意第三方工具(他们可能拥有你的评论内容), 并希望坚持使用大多数网络用户习惯并可能已经拥有帐户的方式, 请使用Disqus。如果你不希望因Disqus的性能缺陷而烦恼, 那么GraphComments和CommentBox都具有简洁的界面以及免费的免费产品。

最后, 完全使用哪个评论插件的选择取决于你。虽然上面提到的四个插件都很不错, 但还有其他选项可用。探索, 找到适合你的方法, 然后使用它。

那么, 你更喜欢哪个评论插件?随时发表评论。

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: