bytemd插件开发–将链接渲染为卡片模式
💡
原文中文，约11500字，阅读约需28分钟。
📝
内容提要
本文介绍了如何使用语雀这一在线文档编辑网站将超链接渲染为卡片样式。通过请求目标网页的index.html，获取关键信息后渲染为卡片样式。使用puppeteer获取目标网站信息，通过express搭配puppeteer实现。在渲染卡片链接时，先将链接渲染为骨架屏的卡片样式，增强交互体验。通过IntersectionObserver实现链接的懒渲染。最后，介绍了插件的打包和发布过程。
🎯
关键要点
- 本文介绍了如何使用语雀将超链接渲染为卡片样式。
- 通过请求目标网页的index.html获取关键信息后渲染为卡片样式。
- 使用puppeteer获取目标网站信息，并通过express搭配puppeteer实现。
- 渲染卡片链接时，先将链接渲染为骨架屏的卡片样式，增强用户体验。
- 使用IntersectionObserver实现链接的懒渲染，减少服务器压力。
- 介绍了插件的打包和发布过程，使用rollup进行打包并发布到npm。
- 在请求超时或获取不到信息时，使用默认值进行渲染。
- 插件支持用户自定义配置，包括请求接口、超时设置和样式类名等。
🏷️
标签
➡️
