Site cover image

Site icon imageみずかるちゃー

ガジェットやカメラ、ちょっとだけ技術の話題が中心のブログ

🔧astro-notion-blogでHTMLタグを文字列ではなくHTML要素として扱う

NotionでHTMLタグを記載しても、Notion上は文字列なのでastro-notion-blogでは「p要素」扱いされてしまいます。

Image in a image block

こうなってしまうと商品広告を貼ろうとしても表示できないので、これをなんとかしてHTML要素として扱わせる必要があります。

修正点

対象ファイル:src/components/NotionBlocks.astro

修正前

case 'paragraph':
        return <Paragraph block={block} headings={headings} />

修正後

case 'paragraph':
        if(typeof block.Paragraph.RichTexts[0] != "undefined"){
          if(block.Paragraph.RichTexts[0].PlainText.indexOf('data-vc_mylinkbox_id') != -1
            || block.Paragraph.RichTexts[0].PlainText.indexOf('valuecommerce') != -1
          ){
            return <Fragment set:html={block.Paragraph.RichTexts[0].PlainText}/>
          }
        }
        return <Paragraph block={block} headings={headings} />
今回はバリューコマースの「MyLinkBox」とバリューコマースの広告を表示させたかったので「data-vc_mylinkbox_id」と「valuecommerce」を設定しています。

複数のタグを設定したい場合は、設定ファイルなどで管理するようにしてもいいかもしれません。

修正後

商品広告が表示されるようになりました。

Image in a image block