需要在帖子中包含PGN(国际象棋棋局符号)

我试图在主题中嵌入 PGN 文件。这需要在该主题中包含 CSS 和 JavaScript。有人能告诉我如何在主题中使用 CSS 和 JavaScript 吗?

5 个赞

这在 Discourse 中无法实现。什么是 PGN 文件?您能更清晰地描述一下您的目标吗?

4 个赞

PGN 意为“便携式棋谱格式”(Portable Game Notation)。通常,国际象棋对局的所有着法都可以导出为文本格式,并通过 PGN 阅读器读取,从而重播整盘棋局。
其一般格式如下:

[Event "世界锦标赛第 28 届"]
[White "斯帕斯基,鲍里斯·V"]
[Black "菲舍尔,罗伯特·詹姆斯"]
[Site "雷克雅未克"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]

1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
4 个赞

这肯定会成为一个有趣的插件!已给此主题添加“欢迎提交拉取请求”标签。

5 个赞

您能否将棋谱发布在类似 chess.com 的网站上,然后使用他们提供的嵌入代码放到您的网站上?

6 个赞

不仅仅是 Chess.com
我可以在任何在线国际象棋平台上进行对弈。我应该能够复制我的 PGN 并将其发布到论坛中。

@codinghorror
如果有这样一个插件那就太棒了 :slight_smile:

2 个赞

你意识到这有多小众吗?
这根本不应该成为 Discourse 的功能。因为 98% 的论坛永远不会用到它。

你有三个选择:

  • 自己编写代码
  • 找人编写代码
  • 使用我 13 小时前提供的解决方案,它能解决你的问题
1 个赞

@Monkey

是的,我完全同意你的看法。

我们运营了一个非常技术性的论坛长达 15 年(主要涉及 Unix 和 Linux),拥有许多国际象棋玩家作为会员(包括我本人),但从未有人在论坛中对国际象棋表现出兴趣(尽管多年来我们安装了许多与国际象棋相关的插件)。

效果最好的方式是让对下棋或国际象棋感兴趣的会员直接前往那些优秀的在线国际象棋网站交流。

因此,我可以证实,在论坛中下国际象棋是一个非常小的细分领域,因为市面上有太多优秀的替代选择。

嵌入来自某个非常流行的在线国际象棋网站的代码将是一个很好的前进方向,我完全赞同。

4 个赞

@neounix

你运营的是一个技术论坛,因此你的受众可能对国际象棋不感兴趣。
我可以运营一个体育和游戏论坛,那里有许多国际象棋玩家和爱好者,他们花费大量时间讨论和辩论棋步。这取决于你的目标受众是谁。既然你从未运营过体育论坛,却还要验证和确认我的需求,这种做法未免太过短视,而且你的验证结果与我的请求并不相关。

你好 @Monkey

目前已有许多基于 JavaScript 的嵌入方案可用于托管 PGN 文件。但 Discourse 目前在其帖子中不支持 JavaScript 嵌入,只允许使用 iFrame 嵌入。因此,如果 Discourse 有兴趣开发一个支持 PGN 的插件,我相信这将吸引大量体育类论坛。

如果 Discourse 的客户列表中已有许多体育和游戏相关的论坛,那么我认为国际象棋相关的插件并非小众功能。

你提供的解决方案只能让我们使用 Chess.com 的直播流,但这无法帮助我们实现差异化,因为已有许多玩家直接托管 Chess.com 的每日谜题。因此,你的建议实际上并未解决我的问题。

3 个赞

我是一名国际象棋爱好者,最近一直在尝试推动一个芬兰的国际象棋论坛迁移到 Discourse。因此,我深入研究了这个问题,并亲自进行了测试。我的首要建议是利用 Discourse 内置的 iframe 功能,正如有人已经提到的那样。你只需在管理设置中查找“允许的 iframe

6 个赞

@rizka

我这里有一个非常奇怪的情况,


在预览中我可以看到 iFrame 嵌入。但是,当我保存帖子时,iFrame 嵌入却不可见。我是不是漏掉了什么?
保存帖子后的截图:

您在浏览器控制台中看到任何错误吗?(可能是 CSP 相关的)

我遇到了以下错误:

与 https://lichess.org/ 处的跨站资源关联的 cookie 在未设置 `SameSite` 属性的情况下被设置。它已被阻止,因为 Chrome 现在仅在跨站请求中交付设置了 `SameSite=None` 和 `Secure` 的 cookie。您可以在开发者工具的“应用程序 > 存储 > Cookie”中查看 cookie,并在以下链接查看更多详细信息:https://www.chromestatus.com/feature/5088147346030592 和 https://www.chromestatus.com/feature/5633521622188032。

我已将设置更改为 SameSite=None。
但这并没有解决问题。

我认为你正在嵌入的网站(https://lichess.org/)应该将该设置添加到 Cookie 中(假设他们希望允许其他网站使用他们的 Cookie)。不过,我不确定 iframe 未显示是否与此有关(通常 Cookie 用于会话或广告,因此即使 iframe 没有会话,我认为它仍应能加载)。

更新

看起来他们允许这样做。

此外,你可以查看预览。如果我在 discourse meta 中直接通过浏览器检查器将 iframe 添加到 HTML 中,它可以正常工作,如下图所示:

你可以尝试直接在页面上添加它,使用浏览器检查器。如果无法工作,那可能是某些 CSP 规则或 Discourse 阻止了 iframe(如果是 CSP 问题,你应该会在浏览器控制台中看到错误或警告)。

在这里的 meta 上,如果我尝试包含 iframe,也会得到一个空白帖子(尽管我甚至无法看到预览):

<iframe src="https://lichess.org/tv/frame?theme=wood&bg=light" style="width: 400px; height: 444px;" allowtransparency="true" frameborder="0"></iframe>

更新 2

allowed_iframes 站点设置可能正是你所需要的(用于允许来自该域的 iframe):

我已在 try.discourse.org 上临时启用了 lichess.org 的 iframe,以便任何人都可以在那里测试其行为:

该设置将持续到每日重置。

在 Firefox 中显示效果更好:

而在 Chrome 中:

5 个赞

@supermathie

与其使用 iframe 嵌入,我有一段像这样的 JavaScript 代码:

<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />

<div class="cbreplay">

[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]

1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>

这样的代码能否用于嵌入帖子中?我的许多用户更喜欢直接复制粘贴这类脚本,而不是跳转到第三方网站来生成 iframe。

可以的!

看起来你已非常接近将这一切整合为一个主题组件(我认为这可以通过主题组件实现,但我对主题组件并非非常熟悉,所以请勿将此视为绝对定论)。

接下来,你可以选择自行编写代码,或者按照 @Monkey 的建议聘请他人来完成这项工作。

(我很乐意接手这个项目以学习主题组件,但目前我无法抽出时间。)

5 个赞

是的,你可以基于类似这样的项目:

GitHub 上有不少类似的项目,但这个是其中的佼佼者之一。

将其与自定义 BBCode 结合使用:Developer's guide to Markdown extensions

你只需要留意在将其集成到 Ember 渲染管道中时可能遇到的陷阱…

@supermathie 说得对——你需要找到一位愿意学习并投入时间实现的爱好者,或者在 Marketplace 频道中聘请专人。

4 个赞

@merefield

我已经自定义了我的主题,包含了以下脚本:

<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />

我已将 CSS 链接 “https://pgn.chessbase.com/CBReplay.css” 加入白名单,以允许在嵌入内容中使用。

当我在帖子中复制粘贴该脚本时,div 标签被忽略,仅显示了文本:

<div class="cbreplay">

[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]

1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>

我是否还需要进行其他设置才能在我的帖子中使用此脚本?请给予建议。

我现在没时间看这个。请按我说的做。