文章内容中植入一些自定义拡張コンポーネントは、一部の人にとっては必需品かもしれません（例えば私）。
xfm(xLog 風味の 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動画プレーヤー" 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 で適当に書かれたもので、安定性はありません。
もちろん、こうすることで、いくつかのシンプルなフロントエンドフレームワークのコンポーネントや web-component を使用することができます。既存のコンポーネントはこちらで探すことができます。
React を使用する場合は、
babel-standaloneが必要かもしれません。
Apline.jsやvue/petite-vueのような解決策は、HTML の規模が大きくなると base64 文字列が URL の長さを超える可能性があるため、機能が複雑な場合は npm パッケージを公開して CDN からインポートすることをお勧めします。
より充実したコンテンツインタラクション#
しかし、結局のところ、iframe を使用することには欠点があり、base64 に変換する手間もあるため、非常に面倒です。
したがって、将来的に xLog が web-components の導入を許可することができれば、非常に良い解決策になるでしょう。結局、web component も標準であり、必ずサポートされるはずです。
ただし、任意または指定されたプレフィックスのタグをサポートするためにrehype-sanitizeを再実装する必要があるかもしれません。