Notion的Embed功能只能提供静态HTML的嵌入,对于需要js的场合基本上束手无策。所以刚开始我以为像股票行情这种需要实时刷新的图表在Notion中是无法显示的——直到我发现了CodePen。

简单来说,CodePen是前端开发者用于交流网页设计代码及其显示效果的网站,Notion也原生支持其链接的嵌入功能。有了它,可以轻易做很多以前想不到的事情。

话不多说,我们开始。

步骤

  1. 打开CodePen网站,并注册一个账号。

    CodePen

  2. 新建一个Pen(New Pen)。

  3. 获取嵌入代码:

    免费股票插件 - 金融网站组成

    为技术分析提供的免费的金融图表插件

  4. 把嵌入代码放在Pen界面的HTML那部分。

    这时候Pen界面应该长这样了:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c64bbb4c-a9e6-4111-b2aa-1b7a3e19ed4e/untitled

    (为了显示效果,我稍微改了一下标题,并在嵌入代码那一步稍稍调整了一下尺寸)

  5. 把地址栏里面的链接复制到Notion,选择Embed CodePen;等成功Embed之后,Run一下,看效果吧。

效果

https://codepen.io/miraclexyz/pen/OqRYwR