20230828 将飞书云文档嵌入到博客中
输入“/”快速插入
20230828 将飞书云文档嵌入到博客中
飞书用户78582023年8月28日创建
背景
2021 年初的时候，我就已经将所有的博客迁移到了 beego blog 中。后来我发现在线的 markdown 编辑器始终不如本地的 markdown。所以一直尝试改变。
同样是 2021 年，实施了本地 markdown 文档上传到 beego blog 项目。我可以在本地写 markdown 笔记，然后根据 yaml 头部的是否发布选择性地同步到博客中。
好景不长，我发现飞书云文档更好用。在反复权衡之下，我将所有的文档都迁移到了飞书中。这就带来了新的问题，一些不错的飞书文档如何同步到自己的博客中。
几种同步方法
手工复制或导出
顾名思义，就是将飞书文档复制到 beego blog 的在线编辑器中。这种方法只适用于纯文本，图片复制不过去。
后来我在将飞书文档同步到知乎编辑器中尝试了先导出 docx 文件再导入的方式。图片和文档都可以凑合，但代码格式会乱。
代码同步
飞书云文档提供完善的 api，github 上也有不少实现，将飞书云文档的块转换为 markdown。
但图片与格式的问题仍旧存在，因为图片需要转存自己的图床，一些飞书自己的格式无法转换为 markdown（如思维导图）。
把飞书云文档嵌入到博客中
上面两种方法还有一个共同的弊端，无法同时应用文档修改。比如我发现文档中有个错别字，在原始文档修复后，还要在 beego blog 和知乎等网站一个一个修复，很繁琐。
使用 iframe 嵌入则不会有这个问题。唯一的弊端就是网站打开的速度会慢一些。
实施嵌入方案
DB 变更
首先需要记录文章是自有的还是嵌入的。新增一列 source，字段类型为 varchar，有如下的可选项
SELF: 自有文章
FEISHU: 飞书文章
复用原有的 content 字段，将飞书云文档的链接存下来。
逻辑变更
接下来的逻辑很简单，判断是飞书文档的时候，就使用新的飞书博客模板。而在模板中使用了 iframe 做嵌入。
{{template "blog/head.html" .}}
<!-- 主体（一般只改变这里的内容） -->
<iframe id="bi_iframe" src="{{.post.Content}}" frameborder="0" scrolling="auto" onload="adjustIframe();"></iframe>
{{template "blog/foot.html" .}}
</body>
</html>%
另外加一段 iframe 自适应的代码，这也是关键部分。
// iframe自适应
function adjustIframe() {
console.log("hello");
var ifm = document.getElementById("bi_iframe");
ifm.height = document.documentElement.clientHeight;
ifm.width = document.documentElement.clientWidth;
}
最终效果
如下图所示，看上去还 ok