bytemd插件开发–将链接渲染为卡片模式
💡
原文中文，约11500字，阅读约需28分钟。
📝
内容提要
本文介绍了如何使用语雀这一在线文档编辑网站将超链接渲染为卡片样式。通过请求目标网页的index.html，获取关键信息后渲染为卡片样式。使用puppeteer获取目标网站信息，通过express搭配puppeteer实现。在渲染卡片链接时，先将链接渲染为骨架屏的卡片样式，增强交互体验。通过IntersectionObserver实现链接的懒渲染。最后，介绍了插件的打包和发布过程。
🎯
关键要点
- 本文介绍了如何使用语雀将超链接渲染为卡片样式。
- 通过请求目标网页的index.html获取关键信息后渲染为卡片样式。
- 使用puppeteer获取目标网站信息，并通过express搭配puppeteer实现。
- 渲染卡片链接时，先将链接渲染为骨架屏的卡片样式，增强用户体验。
- 使用IntersectionObserver实现链接的懒渲染，减少服务器压力。
- 介绍了插件的打包和发布过程，使用rollup进行打包并发布到npm。
- 在请求超时或获取不到信息时，使用默认值进行渲染。
- 插件支持用户自定义配置，包括请求接口、超时设置和样式类名等。
❓
延伸问答
如何使用语雀将超链接渲染为卡片样式？
通过请求目标网页的index.html获取关键信息，然后使用puppeteer和express实现渲染。
puppeteer在获取网页信息时有什么优势？
puppeteer可以在后端环境中以chrome浏览器的形式加载网页，能够处理跨域问题。
如何处理请求超时或获取不到信息的情况？
可以使用默认值进行渲染，并设置请求超时，超过时间直接使用默认值。
如何实现链接的懒渲染？
使用IntersectionObserver API监听链接元素的可见性，只有在可视区域内才触发渲染。
插件的打包和发布过程是怎样的？
使用rollup进行打包，配置相关插件后执行npm publish发布到npm。
用户可以自定义哪些插件配置？
用户可以自定义请求接口、超时设置、默认icon链接等多个配置项。
🏷️
标签
➡️
