文章内容中植入一些自定义扩展组件可能是一部分人的刚需 (比如我)
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 があります。
<!-- 実際には通常の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 を使用して書かれた非常に単純なサービスを使用していますが、安定性はありません
これにより、いくつかのシンプルなフロントエンドフレームワークのコンポーネントを使用することができます。または、既存のコンポーネントを直接見つけることもできます（https://www.webcomponents.org/）
React を使用する場合は、
babel-standaloneが必要かもしれません。
Apline.jsまたはvue/petite-vueのようなソリューションは、HTML のサイズが大きすぎると、base64 文字列が URL の長さを超える可能性があるため、機能が複雑な場合は、npm パッケージを公開して CDN で使用することをお勧めします。
より高度なコンテンツインタラクション#
しかし、結局のところ、iframe を使用するという欠点があり、さらに base64 に変換する必要があり、少し手間がかかります。
したがって、将来的には xLog が web-components のインポートを許可できれば、非常に良い解決策になるでしょう。なぜなら、web component も標準であり、必ずサポートされるからです。
ただし、任意または指定されたプレフィックスのタグをサポートするために、rehype-sanitizeを再書き込む必要があるかもしれないという問題があります。