Notion Flow モジュールを使用して変換する方法

❗️ 注意：この記事が作成されてから既に日が経過しています。情報の鮮度にご注意ください

🖥 説明：私には特別なNotion Flowの使い方があります～

📚 Notion にも公開： https://xheldon.notion.site/Notion-Flow-91ba709f00ff40a1afb6c23195d87fb3?pvs=4

一週間前に、私はNotion Flowブラウザ拡張機能を構築しました：

Xheldon on Twitter / X Notion Flowブラウザ拡張がついにリリースされました。設定と紹介はこちらの動画をご覧ください：https://t.co/pw4yYwnt8h官网见：https://t.co/6326Q4gIWC插件用来将 NotionのコンテンツをMarkdownまたは任意のカスタム形式でGithubに送信できます。私はGithub Pagesを使用したJekyllブログの執筆に利用しており、拡張機能はOSS設定後に画像コンテンツを自動的にCDNに処理するため、非常に便利です～。— Xheldon (@\_Xheldon) 2024年3月20日 https://twitter.com/_Xheldon/status/1770466495560294583

そして先日更新された0.4.1バージョンでは：

0.4.1 | Notion Flow 機能 https://notion-flow.xheldon.com/blog/2024/03/31/0.4.1

AWS S3 API互換の自社OSSサービス（Cloudflare R2など）をサポートしました：

Cloudflare R2 | 零出口费用分布式对象存储 | Cloudflare | Cloudflare Cloudflare R2はS3互換で、出口費用ゼロのグローバル分散型オブジェクトストレージです。データを自由に移動し、望むマルチクラウドアーキテクチャを構築できます。 https://www.cloudflare.com/zh-cn/developer-platform/r2/

本記事では、このブラウザ拡張機能をGithub Jekyllブログでどのように使用しているか簡単に紹介します。

Jekyll静的ブログはRubyで構築されており、プラグインをサポートしています。そのため、私はLiquidテンプレート言語を処理するためにいくつかのプラグインを自作しました（Jekyllブログのプラグインは_pluginsディレクトリに配置され、rubyファイルを記述後、このディレクトリに配置してサービスを再起動するだけで機能します）。コンテンツはNotion Flowで変換されたNotionの内容から取得しています。例えば、ブックマークを処理するプラグインの内容は以下の通りです：

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のブックマークモジュールのリンクがYoutubeやBilibiliの場合、埋め込み動画のHTML（iframe）に変換し、それ以外の場合はNotionブックマークに似たHTMLに変換します（CSSとの連携が必要です）。

そのため、Notion Flowを使用してNotionコンテンツをMarkdown形式に変換する際に、ブックマークなどのモジュール変換ルールをカスタマイズし、ブログでYoutube、Bilibili、およびNotionと同じブックマークスタイルのコンテンツを表示できるようにしています。以下のようになります：

video: function video(block) {
  if (block.type === 'file') {
    // 用户自己上传的 video 文件，用默认 video 插件处理
    return `{% render_video caption="${block.caption}" img="${block.url}" suffix="${block.suffix}" %}\n![${block.caption}](${block.url})\n{% endrender_video %}\n`;
  } else if (block.type === 'external') {
    // 外部链接、youtube 和 bilibili 视频链接，用 bookmark 处理
    return `{% render_bookmark url="${block.url}" title="${
      block.caption || ''
    }" img="" yid="${block.yid}" bid="${
      block.bid
    }" %}{% endrender_bookmark %}\n`;
  }
}

ここで注意が必要な点（私はrubyに詳しくありません）は、Liquidテンプレートのタグ間にテキストコンテンツが必須であること（空でも構いません）です。そうでない場合、rubyプラグインはHTMLを生成できません。つまり：

1	`{% render_video %}这里必须有任意内容！{% endrender_video %}`

このように、Rubyプラグインでは、super変数に「ここには任意の内容が必要です！」という文が取得されます（この変数を使用しないことも可能です）。この内容がない場合、プラグインは何も返しません。

- EOF -

この記事の初出: Notion Flow モジュールを使用して変換する方法 - Xheldon Blog

Notion Flow モジュールを使用して変換する方法

ブログ主より：

人気のタグ

コラム

友達