文章内容中植入一些自定义扩展组件可能是一部分人的刚需 (比如我)
xfm(xLog flavored markdown) 基本是基于 gfm 的并提供了一些内置组件的扩展
所以如果有一定的内容定制化需求的其实就直接使用 html 标签来构建就好了
嵌入ビデオコンポーネント#
最も一般的ビデオウェブサイトは、ビデオを埋め込むために iframe を使用します（Bilibili など）
Bilibili ビデオ
ただし、Bilibili の埋め込みプレーヤーは、いくつかのスタイルのカスタマイズとパラメータの使用が必要です。
<style>iframe{ aspect-ratio: 16/9 }</style>
<iframe src="//player.bilibili.com/player.html?bvid=BV1Zh411M7P7&autoplay=0" width="100%" allowfullscreen> </iframe>
xlog のコンテンツ部分はremark-directiveを使用しているため、html タグを書くのが嫌いな場合は、次のようにすることもできます。
::style[iframe{aspect-ratio: 16/9}]
::iframe{src="//player.bilibili.com/player.html?bvid=BV1Zh411M7P7&autoplay=0" width="100%" allowfullscreen}
もちろん、YouTube もあります。
YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/uHGShqcAHlQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
もちろん、iframe を埋め込むことは非常に簡単ですが、もし少し対話的なコンポーネントが必要な場合はどうすればよいでしょうか？
シンプルなコンテンツインタラクション拡張コンポーネント#
実際には、現代の CSS は一部のインタラクティブな機能を提供することができますが、それには CSS の高度な知識が必要です。
ただし、iframe の機能に基づいて、フロントエンドフレームワークのコンポーネントを使用して記事のコンテンツを拡張することができますが、いくつかの前提条件があります。
iframe を使用してフロントエンドフレームワークのコンポーネントを使用する#
たとえば、次のような web-component があるとします（YunYouJunから）
<!-- 実際には通常のHTML構造が必要です -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/wc-github-corners@latest"
></script>
<github-corners blank="true"></github-corners>
通常の場合、この HTML コードを base64 に変換して iframe の src に挿入することができます。以下は本来動作するはずですが、このコンポーネントは絶対位置に配置されているため、表示効果はあまり良くないかもしれません。
<iframe
src="data:text/html;base64,PGh0bWwgc3R5bGU9IiI+DQo8aGVhZD4NCjxzY3JpcHQgdHlwZT0ibW9kdWxlIiBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vd2MtZ2l0aHViLWNvcm5lcnNAbGF0ZXN0Ij48L3NjcmlwdD4NCjwvaGVhZD4NCjxib2R5IHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsiPg0KPGdpdGh1Yi1jb3JuZXJzIGJsYW5rPSJ0cnVlIj48L2dpdGh1Yi1jb3JuZXJzPg0KPC9ib2R5Pg0KPC9odG1sPg==" style="color-scheme: auto;"></iframe>
ただし、xLog では src 属性にhttpとhttps以外のプロトコルを許可していないため、
この問題を解決する方法は非常に簡単です。xlog にコードを寄付してこの制限を解除する
明らかにそれは機能しませんので、変換のための非常にシンプルなサービスを提供することができます。パラメータを直接解析して HTML に変換し、返すだけです。これにより、いくつかのシンプルなインタラクティブなコンポーネントを提供することができます。URL パラメータを使用する際は、encodeURIComponentを使用することを忘れないでください。
以下の例では、Vercel Function を使用して書かれた非常に単純なサービスを使用していますが、安定性はありません
もちろん、これにより、いくつかのシンプルなフロントエンドフレームワークのコンポーネントを使用したり、既存のコンポーネントを直接見つけたりすることができます。
React を使用する場合は、
babel-standaloneが必要になるかもしれません。
Apline.jsやvue/petite-vueなどのソリューションは、HTML のサイズが大きくなると、base64 文字列が URL の長さを超える可能性があるため、機能が複雑な場合は、CDN を介して npm パッケージを公開することをお勧めします。
より高度なコンテンツインタラクション#
しかし、結局のところ、iframe を使用するという欠点があり、さらに base64 に変換する必要がありますので、少し手間がかかります。
したがって、将来的には xLog が web コンポーネントのインポートを許可できると、非常に良い解決策になるでしょう。なぜなら、web コンポーネントも標準化されているため、必ずサポートされるからです。
ただし、任意または指定されたプレフィックスのタグをサポートするために、rehype-sanitizeを再作成する必要があるかもしれないことに注意してください。