为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来支持任意或者指定前缀的标签。