如何在网站里嵌入可互动的国际象棋棋盘

你希望读者在你自己的页面上点着走完一盘棋——俱乐部赛后复盘、教练博客、Newsletter——而不用跳到 Lichess 或 Chess.com。这就是 embed（嵌入）的用途：一块嵌在你版式里的可互动棋盘。

最快的做法是一段 iframe：不用插件、不用打包、也不用再装一套 React 棋盘库。把 PGN 贴进免费的 ScanChess PGN Viewer，点 Embed，再把片段贴进 WordPress、Ghost 或任意 HTML 即可。

先分清：整盘，还是一个局面？

选工具前先选格式：

• 整盘（PGN）： 读者逐步复盘 → 用可互动嵌入。就是这篇。
• 单个局面（FEN）： 只要一张示意图，或一行给别人贴进分析棋盘的文本 → 看 FEN 是什么、FEN 转图片，或 如何在线分享一盘棋。

拿不准时，嵌 PGN。整盘本来就包含沿途每一个局面。

第一步：准备一份干净的 PGN

你需要 Portable Game Notation（PGN） 着法。常见来源：

1. 从 Lichess 或 Chess.com 导出。
2. 粘贴你已经打好的着法。
3. 拍摄纸质记谱单，用 ScanChess 数字化——适合棋还只存在于纸上的情况。

不合法或打错的着法，后面复盘会断。PGN 不稳时，先过一遍 PGN 校验。

第二步：生成嵌入代码

1. 打开 PGN Viewer。
2. 粘贴 PGN（或载入你已在 ScanChess 分享的对局）。
3. 确认复盘正确——若文章站在黑方视角，先翻转棋盘。
4. 点工具栏里的 Embed，iframe 会复制到剪贴板。

典型片段如下（你的 src 会带上编码后的 PGN）：

<iframe
  src="https://scanchess.com/embed/pgn-viewer?pgn=1.+e4+e5+2.+Nf3+Nc6+3.+Bb5+a6"
  width="640"
  height="560"
  style="border:0;border-radius:12px;width:100%;max-width:100%;aspect-ratio:16/10;"
  allowfullscreen
  loading="lazy">
</iframe>

可被嵌套的地址是 /embed/pgn-viewer。请用这条路径（或 Embed 按钮给出的片段），不要用普通工具页或分享页的 URL——那些故意禁止被 iframe。

第三步：贴进你的 CMS

WordPress（区块编辑器）

1. 在要出现棋盘的位置添加 自定义 HTML 区块。
2. 粘贴 iframe 片段。
3. 桌面和手机都预览一下，再发布。

不需要象棋插件。片段里的 width: 100% 会让棋盘随栏宽缩放。

Ghost

1. 编辑器里输入 /html，选 HTML 卡片。
2. 粘贴片段。
3. 预览后发布。

Substack 等 Newsletter

不少 Newsletter 编辑器限制原始 iframe。若 HTML 卡片能接受片段，直接用；若不能，改放链接——PGN Viewer 深链（/tools/pgn-viewer?pgn=...）或扫描后得到的 ScanChess 永久分享地址——并写一句「打开可互动棋盘」。再配一张 FEN 转图片 的示意图，或一段 PGN 转 GIF，收件箱里也好读。

静态站（Hugo、Astro、Jekyll、纯 HTML）

把 iframe 贴进模板或 Markdown 的 HTML 块即可。它是纯 HTML，不依赖 React、Vue，也不依赖某个棋盘 npm 包。

从纸质记谱单到嵌入

线下对局常常从墨水手写开始，而不是下载按钮：

1. 拍记谱单。
2. 用 ScanChess 扫成校验过的 PGN（通常还有分享链接）。
3. 在 PGN Viewer 打开该对局，或把 PGN 贴进去。
4. 点 Embed，把片段贴进俱乐部站或博客。

这比「手打整盘棋，再和嵌入插件较劲」短一整截。

少返工的几个细节

• 嵌之前先在 Viewer 里走一遍。 行棋方错了、PGN 被截断，在 Viewer 里一眼能看出来；跳过这步，CMS 预览里往往看不出来。
• 长对局别硬塞进 URL。 查询参数有实际长度上限。若 Embed 帮你缩短或重排了文本，就用那个版本。俱乐部存档页更适合永久分享链接，而不是把五十回合塞进 src。
• 注意手机宽度。 保留片段里的流体宽度；草稿里写死的像素宽度，到手机上经常溢出。
• 署名行。 复制出的片段带有一行小号的 “powered by ScanChess”。能留就留：读者知道复盘从哪来，也让这个免费工具跑得下去。

什么时候用静图或 GIF 就够了

聊天里的一步战术题、社交平台缩略图，可互动棋盘往往过重。这时：

• 单局面用 FEN 转图片。
• 短亮点用 PGN 转 GIF。

以后若要在自己站点上完整复盘，再回到 iframe 嵌入。

可选：开发者自托管

若你掌控前端、又不想 iframe 托管播放器，ScanChess 仓库里的开源 chess-board-embed 提供零依赖 Web Component（<chess-board-embed>），可自行构建并托管。多数俱乐部站长不需要这条路——PGN Viewer 的 iframe 就够。只有当你希望棋盘资源在自己的域名上，或设计体系禁止第三方 frame 时，再考虑组件。

相关指南

• 如何在线分享一盘棋 — PGN 文件、链接、FEN，以及什么时候不必嵌入。
• PGN 是什么？ — 标签、着法文本、合法文件长什么样。
• 手写记谱单转成 PGN — 嵌入之前先数字化。
• 免费工具：PGN Viewer — 复盘、分享、复制嵌入代码。