為xLog的文章內容增加擴展組件

文章內容中植入一些自定義擴展組件可能是一部分人的剛需 (比如我)

xfm(xLog flavored markdown) 基本是基於 gfm 的並提供了一些內置組件的擴展

所以如果有一定的內容定制化需求的其實就直接使用 html 標籤來構建就好了

嵌入視頻組件#

最常用的視頻網站使用 iframe 嵌入視頻 (B 站的)

B 站視頻

不過 B 站的嵌入播放器這玩意需要自定義一些樣式還要用一些參數才好用點

<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 不允許除了http和https以外的協議出現在 src 屬性上

那麼如何解決這個其實很簡單，~~給 xlog 貢獻代碼把這個限制去掉~~

好像顯然不行，那麼我們可以提供一個非常簡單的服務來轉換一下，將參數直接解析成 html 返回，如此就能提供一些簡單的交互組件了，url 參數別忘了使用encodeURIComponent

下面的這個示例用到的服務是 vercel function 隨意寫的，沒有什麼穩定性

當然這樣做完全可以使用一些簡單的前端框架的組件，或者 web-component 可以直接找已有的組件

使用 react 的話可能需要babel-standalone

Apline.js或者vue/petite-vue這樣解決方案如果 html 規模過大必然會導致 base64 字符串超出 url 長度，所以功能複雜的話更推薦發布 npm 包通過 CDN 引入

更完善的內容交互性#

但是說到底使用 iframe 還是有 iframe 的缺陷，而且還要轉 base64 一層，就挺麻煩的。

所以以後 xLog 會如果能允許引入 web-components 就是個挺好的解決方案，毕竟 web component 也是標準，必然會被支持的。

就是可能需要重寫rehype-sanitize來支持任意或者指定前綴的標籤。