{
"title": "为xLog的文章内容增加扩展组件",
"tags": [
"post",
"blog"
],
"summary": "文章内容中植入一些自定义扩展组件可能是一部分人的刚需(比如我) xfm(xLog flavored markdown)基本是基于gfm的并提供了一些内置组件的扩展\n\n所以如果有一定的内容定制化需求的其实就直接使用html标签来构建就好了\n\n嵌入视频组件\n\n最常用的视频网站使用ifram…",
"sources": [
"xlog"
],
"external_urls": [
"https://enpitsulin.xlog.app/xlog-content-extend"
],
"date_published": "2023-04-21T15:10:16.392Z",
"content": "文章内容中植入一些自定义扩展组件可能是一部分人的刚需(比如我)\n\n[xfm](https://xlog.xlog.app/xfm)(xLog flavored markdown)基本是基于gfm的并提供了一些内置组件的扩展\n\n所以如果有一定的内容定制化需求的其实就直接使用html标签来构建就好了\n\n## 嵌入视频组件\n\n最常用的视频网站使用iframe嵌入视频(B站的)\n\n:::details\n\n::summary[B站视频]\n\n::style[iframe{aspect-ratio: 16/9}]\n\n::iframe{src=\"//player.bilibili.com/player.html?bvid=BV1Zh411M7P7&autoplay=0\" width=\"100%\" allowfullscreen}\n\n:::\n\n不过B站的嵌入播放器这玩意需要自定义一些样式还要用一些参数才好用点\n\n```html\n<style>iframe{ aspect-ratio: 16/9 }</style>\n<iframe src=\"//player.bilibili.com/player.html?bvid=BV1Zh411M7P7&autoplay=0\" width=\"100%\" allowfullscreen> </iframe>\n```\n\n由于xlog的内容部分使用`remark-directive`如果讨厌写html标签的也可以\n\n```plaintext\n::style[iframe{aspect-ratio: 16/9}]\n\n::iframe{src=\"//player.bilibili.com/player.html?bvid=BV1Zh411M7P7&autoplay=0\" width=\"100%\" allowfullscreen}\n```\n\n当然还有youtube的\n\n\n:::details\n\n::summary[youtube]\n\n<iframe width=\"100%\" 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>\n\n:::\n\n```html\n<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>\n```\n\n当然嵌入iframe可以说是非常简单了,但是如果你需要稍微有一定交互性的组件该怎么办呢？\n\n## 简单的内容交互扩展组件\n\n其实现代css完全能够提供一部分交互能力，但是需要比较深入css技巧的知识。\n\n但其实根据iframe的功能我们完全可以用前端框架组件来给你的文章内容做扩展组件，但是这里有一小部分前提。\n\n### 使用iframe来使用前端框架组件\n\n比如现在我有一个web-component(来自[云游君](https://github.com/YunYouJun/wc-github-corners))\n\n```html\n<!-- 实际上还有正常的html结构才对 -->\n<script\n type=\"module\"\n src=\"https://cdn.jsdelivr.net/npm/wc-github-corners@latest\"\n></script>\n\n<github-corners blank=\"true\"></github-corners>\n```\n\n对于正常的情况，我们可以将这段html转base64塞到iframe的src里，下面**本应该**是可用的，不过由于这个组件是绝对定位的原因，显示效果应该不是很好。\n\n```html\n<iframe \nsrc=\"data:text/html;base64,PGh0bWwgc3R5bGU9IiI+DQo8aGVhZD4NCjxzY3JpcHQgdHlwZT0ibW9kdWxlIiBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vd2MtZ2l0aHViLWNvcm5lcnNAbGF0ZXN0Ij48L3NjcmlwdD4NCjwvaGVhZD4NCjxib2R5IHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsiPg0KPGdpdGh1Yi1jb3JuZXJzIGJsYW5rPSJ0cnVlIj48L2dpdGh1Yi1jb3JuZXJzPg0KPC9ib2R5Pg0KPC9odG1sPg==\" style=\"color-scheme: auto;\"></iframe>\n```\n\n但是由于xLog不允许除了`http`和`https`以外的协议出现在src属性上\n\n那么如何解决这个其实很简单，~~给xlog贡献代码把这个限制去掉~~\n\n好像显然不行，那么我们可以提供一个非常简单的服务来转换一下，将参数直接解析成html返回，如此就能提供一些简单的交互组件了，url参数别忘了使用`encodeURIComponent`\n\n*下面的这个示例用到的服务是vercel function 随意写的，没有什么稳定性*\n\n<iframe style=\"color-scheme: auto;\" src=\"https://xlog-extend.vercel.app/?base64=PGh0bWwgc3R5bGU9IiI%2BDQo8aGVhZD4NCjxzY3JpcHQgdHlwZT0ibW9kdWxlIiBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vd2MtZ2l0aHViLWNvcm5lcnNAbGF0ZXN0Ij48L3NjcmlwdD4NCjwvaGVhZD4NCjxib2R5IHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsiPg0KPGdpdGh1Yi1jb3JuZXJzIGJsYW5rPSJ0cnVlIj48L2dpdGh1Yi1jb3JuZXJzPg0KPC9ib2R5Pg0KPC9odG1sPg%3D%3D\"></iframe>\n\n当然这样做完全可以使用一些简单的前端框架的组件，或者web-component可以直接找[已有的组件](https://www.webcomponents.org/)\n\n> 使用react的话可能需要`babel-standalone`\n\n`Apline.js`或者`vue/petite-vue`这样解决方案如果html规模过大必然会导致base64字符串超出url长度，所以功能复杂的话更推荐发布npm包通过CDN引入\n\n## 更完善的内容交互性\n\n但是说到底使用iframe还是有iframe的缺陷，而且还要转base64一层，就挺麻烦的。\n\n所以以后xLog会如果能允许引入web-components就是个挺好的解决方案，毕竟web component也是标准，必然会被支持的。\n\n就是可能需要重写`rehype-sanitize`来支持任意或者指定前缀的标签。\n",
"attributes": [
{
"value": "xlog-content-extend",
"trait_type": "xlog_slug"
}
]
}
