在Shopify博客文章中使用Discourse的最有效方法是什么?

大家好!

我在这里搜索了有关此特定应用程序的信息,但似乎大多数问题都与在 WordPress 帖子中使用 Discourse 进行评论有关。

除了这篇操作指南(https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963)之外,还有其他关于特别为 Shopify 博客文章实现 Discourse 评论的指导吗?

我所设想的一个例子可以在 macrumors.com 的评论处理方式中看到(即,在查看文章时,文章顶部会显示评论,用户可以选择查看所有评论。点击该链接后,会加载因文章而创建的论坛主题)。

提前感谢!

3 个赞

The Lion King Help GIF
:laughing:

1 个赞

javascript嵌入有什么问题?

3 个赞

谢谢你的回复!

我今天会实现这个功能,如果遇到任何问题,我会回来反馈——我猜我没有意识到 JavaScript 嵌入选项的功能和我上面描述的一样。抱歉!:slight_smile:

5 个赞

@MarximusMG!这件事对你来说进展如何?你介意分享一下使用 JS 嵌入的经历吗?或者你已经放弃了这个计划?

我一直在想这个问题,所以想尝试一下。请注意,我对 Shopify 的经验非常少,但这是我在为 Discourse 做客户支持工作时被问到过很多次的事情。

如果 Shopify 商店和 Discourse 站点都配置为匿名(未登录)用户可以查看,那么 Discourse 评论就可以嵌入到 Shopify 产品页面。要做到这一点,请将您的商店域名添加到 Discourse 站点“管理 / 自定义 / 嵌入”页面的“允许的主机”部分:

请确保将将要显示为 Discourse Shopify 主题作者的 Discourse 用户名添加到“主题创建用户名”设置中。然后点击页面底部的“保存嵌入设置”按钮。

将嵌入页面上显示的嵌入代码复制到 Shopify 产品页面的“描述”部分。在插入代码之前,请确保点击编辑器上的“显示 HTML”按钮:

编辑嵌入代码,将 DISCOURSE_USERNAME 替换为您在 Discourse 嵌入页面上输入的“主题创建用户名”。同时将嵌入代码中的 EMBED_URL 文本替换为产品的 URL。然后保存产品页面。

请注意,您可以在此处获取有关嵌入 Discourse 评论的更多详细信息:https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963。

现在,您应该会在 Shopify 产品页面上看到一个“Discourse 评论”部分(嵌入为 iframe)。假设没有错误,当您第一次访问它时,它可能会显示文本“正在加载讨论”。正在发生的是,访问该页面触发 Discourse 为产品页面创建了一个主题。几秒钟后,您应该会看到文本“开始讨论”。如果您点击该链接,您将被带到相关的 Discourse 主题。

如果您访问该主题并回复它,该回复将显示在 Shopify 产品页面上。

可能出现的问题:
默认 Shopify 主题的描述部分似乎不够宽,无法显示 Discourse 评论部分:

我假设这可以通过自定义 Shopify 主题轻松修复。

Discourse 在控制从 Shopify 产品提取到 Discourse 主题的内容方面没有给您太多控制权。以下是我链接到 Discourse 的产品所看到的内容:

点击“显示完整帖子”按钮后:

我希望看到产品描述、价格和图片。我绝对不希望显示以下文本:

产品变体
无法加载取货可用性 刷新

这可能可以通过调整 Discourse 的 allowed embed selectors 站点设置来修复。有关该设置的一些详细信息在此处:配置允许的嵌入选择器设置。Discourse 还有一个隐藏的 blocked embed selectors 站点设置可能很有用。我最近设置了一个在线调试器来帮助配置 Discourse 嵌入设置。它仍在开发中,但如果您想尝试一下,请给我发私信。

如果 Discourse 站点或 Shopify 商店配置为不允许匿名用户查看,我怀疑您会遇到嵌入评论的问题。

必须手动将 Discourse 嵌入代码添加到大量先前已发布的 Shopify 产品中可能会很麻烦。我怀疑可以创建一个 Shopify 应用,自动将 Discourse 嵌入代码附加到所有产品描述中。

可能还需要处理的一件事是让嵌入的 Discourse 评论的样式与 Shopify 产品页面的样式匹配。这可以通过在您的默认 Discourse 主题的主题编辑器中将一些 CSS 添加到“嵌入 CSS”部分来实现。例如,这可以修复我之前截图中的背景颜色问题:

1 个赞

我意识到我没有完全回答 OP 的问题。下面是一个适用于 Shopify 产品页面或博客文章的通用方法。在商店的“主题 / 自定义”部分,转到要添加 Discourse 评论的页面模板。根据页面,向某个部分添加“自定义 Liquid”块,或添加一个新的“自定义 Liquid”部分。然后将 Discourse 嵌入代码添加到该部分。

对于嵌入代码的 discourseEmbedUrl,请使用 location.href。这样 discourseEmbedUrl 将自动设置。例如:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'DISCOURSE_URL',
    discourseEmbedUrl: location.href,
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

对于 Shopify 博客文章,您可能需要在 Liquid 部分添加一些自定义 CSS,以使评论部分居中并限制其宽度。例如:

div#discourse-comments {
  max-width: 726px;
  margin: 0 auto;
}

与产品页面相比,在博客文章中,我发现 Discourse 在提取适当内容到主题方面做得很好:

3 个赞