显示 Notion 目录树，支持自定义样式，支持 Side Peek 模式下显示目录（更多样式开发中…）。
Chrome 插件暗黑模式
点击目录树，Notion 页面跳转到对应标题位置。
同时支持 Chrome 和 Edge 等相同内核的浏览器（其实我感觉 Edge 的侧边栏更好看）。
一键返回 Notion 页面顶部。
一键刷新 Notion 页面。
适配暗黑模式。
更多可配置项和功能开发中…。
<aside> 💡
</aside>
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/1e3e7c05-fc11-4038-9f76-92db32b98824/bf70b094-4913-42a5-8882-134801af81c2/icon128.plasmo.3c1ed2d2.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/1e3e7c05-fc11-4038-9f76-92db32b98824/bf70b094-4913-42a5-8882-134801af81c2/icon128.plasmo.3c1ed2d2.png" width="40px" /> 产品特色：非侵入式、纯前端方式、最小配置（只需要在插件配置页中填表）即可实现将 Notion 文章发布到 Github Jekyll 博客，适配任何 Jekyll 主题。
</aside>
<aside>
👉🏻 Chrome Web Store 下载地址：https://chromewebstore.google.com/detail/plcjjlmnhfemckodbncnaehppkmdoacc（近期准备改名，重构中…）
**Edge Extension Store 下载地址：**审核中…
问题/功能讨论：https://github.com/Xheldon/Notion-Flow-Prod/discussions
Bug 反馈：https://github.com/Xheldon/Notion-Flow-Prod/issues
开发者博客（点点广告就算支持了）：https://www.xheldon.com
电报讨论群：https://t.me/+AN6Y9ngg8g9kNmVl
开发进度：
</aside>
<aside>
💡 注：本插件被设计成仅在 Notion 页面可用的逻辑，在 www.notion.so 和 *.notion.site 网站上点击插件 icon 可直接打开侧边栏；在其他页面上点击插件 icon 无效。
</aside>
显示 Notion 目录树，支持自定义样式，支持 Side Peek 模式下显示目录（更多样式开发中…）。
Chrome 插件暗黑模式
点击目录树，Notion 页面跳转到对应标题位置。
同时支持 Chrome 和 Edge 等相同内核的浏览器（其实我感觉 Edge 的侧边栏更好看）。
一键返回 Notion 页面顶部。
一键刷新 Notion 页面。
适配暗黑模式。
更多可配置项和功能开发中…。
<aside> 💡 后面会出一个视频讲解。
</aside>
注意：目前 Notion 的 Pages Properties 可用来作为 Jekyll 的 Front Matter 信息的字段被我固定写死了，如果有需求的话我改成更通用的配置。
<aside> 🧩 https://www.xheldon.com 个人博客模板来自：
GitHub - Huxpro/huxpro.github.io: My Blog / Jekyll Themes / PWA
</aside>
哪儿弄页面模板？
使用 Notion API 发布的时候对该数据库授权即可，不用再授权给每个 Pages 了。
为什么这个应用需要填写这么多 token，是否有泄露风险？
答：见下方页面的详细解释：
CDN 路径是什么？
/img/in-post 如果有需求，将来会支持自定义。完整路径是 ${cdn}/img/in-post/${cos}/${key}.webp其中 cdn 为插件配置（这里为 https://static.xheldon.cn），cos 为 page Property 配置（即 Meta 信息，这里为 2023/make-vscode-great-forever），key 为自动获取的 Notion 图片 id（这里为 899eeaba-8737-4f07-8e22-9480f915fcbc）。真实的地址长这样：https://static.xheldon.cn/img/in-post/2023/make-vscode-great-forever/899eeaba-8737-4f07-8e22-9480f915fcbc.webp。支持 gif。内置插件原理是什么？
内置插件的转换处理功能流程如下，以 image 为例，其他类似：
获取 Notion API 和插件，来获取 Notion 内容（Bookmark 模块 Notion 数据上没有必要数据如图片，需要找 DOM 结构获取）。
转换成 Markdown 格式，针对 image，特别转化成 Jekyll 博客使用的 Liquid 语法格式，如：
{% render_caption caption="图片 Caption" img="<https://static.xheldon.cn/img/in-post/2023/make-vscode-great-forever/9175365e-0357-4b2f-abf7-cdf20062b2ca.webp>" %}
{% endrender_caption %}
发送到 Github 仓库后，Ruby 插件读取该模板语法，生成指定 html，Ruby 插件内容如下（放置到 _plugins 下即可，本人不太会 Ruby，现学的）：
module Jekyll
class RenderImageCaptionBlock < Liquid::Block
def initialize(tag_name, attr, tokens)
super
attrs = attr.scan(/caption\\=\\"(.*)\\"\\simg\\=\\"(.*)\\"/)
@caption = attrs[0][0]
@img = attrs[0][1]
end
def render(context)
text = super
"<p caption='#{@caption}'><img src='#{@img}' alt='#{@caption}' title='#{@caption}' /></p>"
end
end
end
Liquid::Template.register_tag('render_caption', Jekyll::RenderImageCaptionBlock)
之后就会自动构建出 html，你可能还需要修改 css 以调整样式。
Bookmark 生成后我的 RSS 输出乱了，怎么办？
首先，增加一个插件作为 Liquid 模板文本过滤器，代码为：
module Jekyll
module BookmarkFilter
def bookmark_filter(input)
input.gsub(/^\\<p\\>\\<a\\s+class=\\"link-bookmark\\"\\shref=(.*)\\starget=\\"_blank\\"\\>\\<span\\>(.*)\\<\\/span\\>\\<span\\>\\<span\\>(.*)\\<\\/span\\>\\<span\\>\\n(.*)\\n\\<\\/span\\>\\<span\\>(.*)\\<\\/span\\>\\<\\/span\\>\\<\\/a\\>\\<\\/p\\>$/, '<p><a href=\\1 target="_blank">\\3</a></p>');
end
end
end
Liquid::Template.register_filter(Jekyll::BookmarkFilter)
然后在你的 feed.xml 等 rss 输出文件中使用：
{{ post.content | bookmark_filter | xml_escape }}
我同时打开了多个 Notion 页面，并同时打开了 Notion Flow 插件侧边栏，为什么我鼠标在哪个窗口，目录树内容就全部显示那个窗口的目录？
<aside> 💡 原则是不要搞一些骚操作，如分栏等非 Markdown，不会被识别转换成 Markdown。 如果有 特殊需求，可以期待接下来的「插件」功能，允许用户自定义处理数据。
</aside>
构建前使用（必填）：
构建后使用（必填）：
之后，cos（图片上传路径，用处见前面常见问题中「CDN 路径是什么」一节）、path（博客文件上传路径） 会自动补全为：
Pages 的 Property 映射到 Jekyll 博客就是天然的 Front Matter，以下是真实的我的某篇博客的 Front Matter，如图：
下图是 Notion 中的 Pages 的 Propertys：
另外，Notion Page 头图会作为博客 header-img 信息，供你使用（用于 Jekyll 的 Liquid 模板中）。