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

开发
7

我意识到我没有完全回答 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 在提取适当内容到主题方面做得很好：

image
image1061×1151 150 KB