用 JavaScript 嵌入 Discourse 评论


(Erick Guan) #1

本文翻译于官方论坛,于 2015-09-12。

Discourse 有能力用 JavaScript 从主题中嵌入评论至远程站点,并创建一个 IFRAME。你可以看一些例子来查看效果,看看 Coding Horror 的博客。博客运行在Ghost 上,但是评论来自他的Discourse 论坛中。

一个重要的要注意的事情是,用户要到你的论坛发表回复。这是目标设计,因为我们觉得 Discourse 论坛中的发帖界面比我们能用 JavaScript 嵌入的更强大。

这篇主题将展示如何设置在你的博客和站点上设置评论嵌入。

它如何工作

在 Discourse 中,一个主题是由许多帖子组成的。当你将 Discourse 嵌入至其他站点时,你是链接了一个文档(博文、HTML 页面等等)至一个主题。当人们发表了一个主题,他们的评论将自动在你嵌入到的页面出现。

你可以选择在 Discourse 发现了新的可嵌入的文档时,自动创建一个主题,或者是你可以自己提前先创建一个主题。

配置 Discourse 嵌入(简单安装)

下列步骤将嵌入评论流至一个博客,假地址为 http://example.com/blog/entry-123.html。Discourse 论坛运行于 http://discourse.example.com

  1. 访问你 Discourse 的 管理员 > 定制 > 嵌入

  2. 创建至少一个可嵌入的主机。这应该是你想要嵌入你评论的主机地址(域名)。在这个例子中,主机是 example.com ——注意没有 http:// 和路径。

  • (可选)——如果除了主机外你还提供了分类,帖子将出现在那个分类中。不同的主机能发到不同的分类。
  1. Embed by Username 字段填写创建主题的用户名。假设这个用户名是 eviltrout,所以值会是 eviltrout

  2. 插入下列 HTML 至 http://example.com/blog/entry-123.html

<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'http://discourse.example.com/',
                     discourseEmbedUrl: 'http://example.com/blog/entry-123.html' };

  (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>

这段代码中可以配置的部分在 DiscourseEmbed 对象中。discourseUrl 是到 Discourse 的完整路径,包括了结尾的 /discourseEmbedUrl 是目前正嵌入评论流的地址。

如果设置正确,当你第一次访问 http://example.com/blog/entry-123.html 时,它将尝试为该博文载入评论。因为还没有评论,它会告诉 Discourse 论坛在后台先创建一个新主题。所以一个新主题将由 eviltrout 创建,并且第一帖的内容将从你的博客中获取,文字将自动被截取。

当主题被创建后,用户能回复,然后他们的评论将自动出现在 http://example.com/blog/entry-123.html

在超过一个页面中嵌入

以上例子中,我们写死了 http://example.com/blog/entry-123.html 链接,作为 JavaScript 嵌入识别的目标。这在许多自动生成页面的站点显然不够用。举例子来说,一篇博文通常有一个页面。为了支持多页面嵌入,将同样的代码放在每一个想要显示评论的页面,但是将 discourseEmbedUrl 的值定义为当前页面的地址。在我的博客上,我使用了这个值作为 discourseEmbedUrl'http://eviltrout.com<%= current_page.url %>' ——当新博客页面被创建了,新主题将自动在 Discourse 被创建。

调整你嵌入的内容的样式

如果你运行最新的 Discourse(或 1.4.0beta9 或发布后的 1.4.0 稳定版)你将可以为你嵌入的评论增加样式表。访问 管理员 > 定制 > CSS/HTML > 嵌入的 CSS,然后你可以增加自定义样式表,它将在加载嵌入的评论时同时被加载。我们认为默认排版在白色背景下看起来不错,但是如果你的站点的排版特殊,你将要自己调整样式。

(可选的)增加可轮询的流

正如上文所说,Discourse 将自动从它嵌入的任何站定中抓取内容。然而,有时 HTML 可能很难解析,或者可能没法截取正确的内容。许多博客和站点支持 RSS/Atom 流同步,Discourse 可以使用他们从你的博文中准确地提取内容。

如果你嵌入 Discourse 评论的站点有一个 RSS 或 Atom 流,你可以配置 Discourse 从那截取内容,只要启用设置 feed polling enabled 然后再填一个到流的地址至 feed polling url 设置。

(另一种配置)链接到已存在的主题

一些人不想要 Discourse 自动创建主题。他们想要自己创建主题,然后在告诉他们的嵌入代码让它们关联到特定地址。你可以通过简单地改动嵌入代码为:

<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'http://discourse.example.com/',
                     topicId: 12345 };

  (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>

真正的区别是,我们将 discourseEmbedUrl 改为了 Discourse 主题 ID。如果你这么做了,没有主题将被自动创建,并且代码将自动显示那个主题的评论。

除错

最普遍的问题会是你将嵌入 Discourse 的站点设置的值不正确。确认域名是正确的,并且没有包含结尾的 / 或非法字符。


discourse安装经验总结-使用指南
(Jerry) #2

从帖子中提取标题的正则表达式(admin_js.admin.embedding.embed_title_scrubber)
这个参数的用法能举个例子吗?


(Erick Guan) #3

/\d+(字).*/ 可以匹配:

  • 1字
  • 12字
  • 12字2m
  • 12字任何字

这是高级特性,写法可以参照这里:

https://deerchao.net/tutorials/regex/regex.htm