一周前，我构建了 Notion Flow 浏览器扩展：
而刚刚更新的 0.4.1 版本：
0.4.1 | Notion Flow
Feature
https://notion-flow.xheldon.com/blog/2024/03/31/0.4.1
支持了兼容 AWS S3 API 的自建 OSS 服务，如 Cloudflare R2：
本篇文章简单介绍一下我是如何使用这个浏览器扩展用于我的 Github Jekyll 博客的。
Jekyll 静态博客是基于 Ruby 构建的，支持插件。所以我自己写了几个插件（Jekyll 博客的插件位于 _plugins 目录下，写好 ruby 文件后，丢到该目录下，重启服务即可）来处理 Liquid 模板语言，而内容就是来自 Notion Flow 转换的 Notion 内容。如处理 bookmark 的插件内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
module Jekyll
class RenderBookMarkBlock < Liquid::Block
def initialize(tag_name, attr, tokens)
super
# 普通的链接没有 yid 和 bid
attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"\syid\=\"(.*)\"\sbid\=\"(.*)\"/)
if !attrs.empty?
# 外部的 video 链接，youtube、bilibili（如本文上一篇博客就是）
@url = attrs[0][0]
@title = attrs[0][1]
@img = attrs[0][2]
@yid = attrs[0][3]
@bid = attrs[0][4]
@firstChar = (@title)[0].upcase
@error = ""
else
# 正常和 notion 一样的 bookmark（如本文上面三个链接就是）
attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"/)
@url = attrs[0][0]
@title = attrs[0][1]
@img = attrs[0][2]
@firstChar = (@title)[0].upcase
@error = ""
end
end
def render(context)
@desc = super
if !@yid.nil? && !@yid.empty?
"<p class='embed-responsive embed-responsive-16by9'><iframe src='https://www.youtube.com/embed/#{@yid}?rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>"
elsif !@bid.nil? && !@bid.empty?
"<p class='embed-responsive embed-responsive-16by9' style='border-bottom: 1px solid #ddd;'><iframe src='//player.bilibili.com/player.html?bvid=#{@bid}&high_quality=1&as_wide=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen></iframe></p>"
else
"<p><a class='link-bookmark' href='#{@url}' target='_blank'><span data-bookmark-img='#{@img}' data-bookmark-title='#{@firstChar}'><img src='#{@img}'/></span><span><span>#{@title}</span><span>#{@desc}</span><span>#{@url}</span></span></a></p>"
end
end
end
end
# 上传的 video
module Jekyll
class RenderVideoBlock < Liquid::Block
def initialize(tag_name, attr, tokens)
super
attrs = attr.scan(/caption\=\"(.*)\"\simg\=\"(.*)\"\ssuffix\=\"(.*)\"/)
@caption = attrs[0][0]
@img = attrs[0][1]
@suffix = attrs[0][2]
end
def render(context)
text = super
"<p caption='#{@caption}'><video controls muted><source src='#{@img}' type='video/#{@suffix}' /></video></p>"
end
end
end
Liquid::Template.register_tag('render_bookmark', Jekyll::RenderBookMarkBlock)
Liquid::Template.register_tag('render_video', Jekyll::RenderVideoBlock)
这段的逻辑是如果遇到 Notion 的 bookmark 模块链接是 Youtube、Bilibili，则转成嵌入视频的 HTML（iframe），否则转成类似于 Notion bookmark 的 HTML（需要配合 CSS 实现）。
所以我使用 Notion Flow 将 Notion 内容转换成 Markdown 格式的同时，自定义了 bookmark 等模块的转换规则，以让博客能够显示 Youtube、Bilibili 和与 Notion 一样的 bookmark 样式内容，如下：
1
2
3
4
5
6
7
8
9
video: function video(block) {
if (block.type === 'file') {
// 用户自己上传的 video 文件，用默认 video 插件处理
return `<p caption='${block.caption}'><video controls muted><source src='${block.url}' type='video/${block.suffix}' /></video></p>\n`;
} else if (block.type === 'external') {
// 外部链接、youtube 和 bilibili 视频链接，用 bookmark 处理
return `\n`;
}
}
这里需要注意（我不太懂 ruby）， Liquid 模板的标签之间，必须有文本内容（你可以不用），否则，ruby 插件无法生成 HTML。即：
1
{% render_video %}这里必须有任意内容！{% endrender_video %}
这样在 ruby 插件中，super 变量拿到的就是「这里必须有任意内容！」这句话（你可以不使用该变量）。如果没有这段内容，则插件压根不会返回任何内容。
博主说：
我常常希望在面对人生中一些关键抉择的时候，有人可以告诉我最佳的做法，让我不至于白白浪费宝贵的时间。推己及人，我因此经常写博客，以期在浩渺无垠的互联网中的这个小小角落里记录下对于我来说只有一次的人生经历，希望能够帮到那些希望得到帮助的人。
