Microlink SDK 完全指南如何把任意 URL 变成精美链接预览卡片新手入门教程【免费下载链接】sdkMake any URL embeddable. Turn any URL into a beautiful link preview.项目地址: https://gitcode.com/gh_mirrors/sdk/sdkMicrolink SDK是一款「把任意 URL 变成精美链接预览」的前端工具粘贴一个网址它就能自动抓取页面的标题、描述、图片、视频和音频渲染成一张带标题、描述、封面图的漂亮卡片。项目基于 README.md 中描述的能力提供React 组件和**原生 JavaScriptVanilla JS**两种版本另外还有两个「悬停预览」包让用户鼠标移过链接就能看到预览。一句话看懂它到底能做什么想象这样一个场景你的博客里有一堆外部链接读者必须点进去才知道链接背后是什么内容。Microlink SDK 可以让这些链接直接显示为「预览卡片」——标题 描述 封面图甚至可播放的视频和音频不用离开当前页面就能了解链接内容。核心特性一览特性说明 富媒体支持图片、视频、音频、页面截图、嵌入式 iframe 多种尺寸small / normal / large 三种卡片布局⚡ 懒加载基于 IntersectionObserver卡片进入视口才请求数据 媒体控制视频/音频完整播放控件 键盘快捷键 主题定制CSS 变量 对比色模式自动适配 RTL 支持支持从右到左的文字方向️ 悬停预览独立的 hover 包悬停即显示预览 框架无关React 与原生 JS 版本任选项目结构4 个包怎么选这是一个 monorepo多包仓库由 lerna.json 管理版本统一为 5.5.24所有代码位于 packages/ 目录下包名用途适合谁microlink/reactReact 链接预览组件React 开发者microlink/vanilla原生 JS一行函数搞定无框架项目microlink/hover-reactReact 悬停预览想在链接上悬停出卡片的 React 用户microlink/hover-vanilla原生 JS 悬停预览想在链接上悬停出卡片的原生用户核心实现分别在 packages/react/src/index.js卡片主逻辑、packages/vanilla/src/index.js 和 packages/hover-vanilla/src/index.js。新手建议React 项目直接用microlink/react没有框架就选microlink/vanilla只需几行 HTML 即可接入。快速上手三步装好并运行第一步安装React 项目npm install microlink/react styled-components --save原生 JS 项目npm install microlink/vanilla --save也可以不用构建工具直接用 CDN 引入microlink/vanilla的dist/microlink.min.js文件。第二步使用React 只需要一个组件唯一的必填属性是urlimport Microlink from microlink/react export default function App() { return Microlink urlhttps://github.com / }Vanilla 版则把页面上的a标签变成预览卡片a hrefhttps://github.comGitHub/a script microlink(a) /script第三步看效果卡片会自动请求 Microlink API 获取元数据然后显示标题、描述和封面图。源码中卡片的核心渲染逻辑见 packages/react/src/components/Card/媒体、内容、加载态都有独立子组件如 CardMedia/index.js、CardContent.js。 想直接看实际效果项目自带演示页原生版见 packages/vanilla/index.html还附有 hover-vanilla 的多场景演示 packages/hover-vanilla/docs/index.html里面有视频、音频、截图、大卡片等完整示例。常用属性速查按需微调卡片所有 Props 都会传给 Microlink 组件最常用的几个如下属性默认值作用url必填要预览的地址sizenormal卡片尺寸small/normal/largemedia[iframe,video,audio,image,logo]媒体类型优先级第一个可用的生效contrastfalse自动根据图片调色板适配卡片颜色lazytrue懒加载可传对象配置阈值setDataundefined覆盖或转换 API 返回的数据directionltr设为rtl可镜像布局适配阿拉伯语等autoPlay/controls/loop/mutedtrue视频/音频播放行为控制几个新手最常用的小技巧控制显示哪种媒体mediaimage只显示封面图mediavideo优先显示视频也可以传数组[video, image, logo]表示按优先级降级。让卡片与图片配色融合加上contrast属性卡片会自动从图片调色板中提取颜色。静态模式设置fetchData{false}setData{{...}}可完全禁用 API 请求、使用自己准备好的数据非常适合服务端渲染。懒加载调优lazy{{ threshold: 0.5 }}表示卡片进入视口 50% 时才请求数据长列表页面性能更好lazy{false}可关闭。悬停预览鼠标移过链接就出现卡片除了内嵌卡片项目还有两个 hover 包实现「鼠标悬停链接 → 弹出预览卡片」的效果非常适合评论区、引用链接等场景。React 用法import MicrolinkHover from microlink/hover-react const Link (props) a {...props} / const HoverLink MicrolinkHover(Link) export default function App() { return HoverLink hrefhttps://github.comHover over me!/HoverLink }Vanilla 版只需引入脚本后执行microlink(a)页面上的链接就全部支持悬停预览。实现细节可以看 packages/hover-react/src/index.js——它用了一个带阴影和渐显动画的 PopOver 容器包裹卡片。⚠️ 小提示hover-vanilla 只会处理http:协议的外部链接本地地址会自动被过滤这是源码里内置的行为避免把内页链接也变成预览卡片。键盘快捷键与无障碍当视频/音频卡片获得焦点时支持这些快捷键控制播放按键功能Space播放 / 暂停←左方向键后退 5 秒→右方向键前进 5 秒M静音 / 取消静音播放控件的实现位于 packages/react/src/components/Card/CardMedia/Controls/包含进度条、播放按钮、静音按钮等可以按需参考或定制。自定义样式用 CSS 变量改配色卡片内置了一批 CSS 变量全局或单卡片覆盖即可换肤例如.microlink_card { --microlink-max-width: 500px; --microlink-background-color: #fff; --microlink-border-color: #e1e8ed; --microlink-color: #181919; }也支持通过style属性传入内联样式圆角、阴影、字体等。样式主题的变量定义在 packages/react/src/theme.js可对照着覆盖。浏览器支持与常见问题✅ 支持所有现代浏览器Chrome / Firefox / Safari / Edge 最新版✅ 懒加载依赖 IntersectionObserver现代浏览器均内置✅ React 包要求react 17、styled-components 5❓请求失败时会怎样组件会优雅降级为普通链接a并在控制台输出带错误码和请求 ID 的格式化报错方便排查逻辑见 packages/react/src/index.js 的toFetchData。总结Microlink SDK 的核心卖点就是「让任意 URL 可嵌入」。React 项目一个组件搞定原生项目一行microlink(a)搞定配合 hover 包、CSS 变量和懒加载几乎可以零成本提升任何页面的链接体验。项目采用 MIT 协议见 LICENSE.md可自由用于商业项目。版本更新记录可参考根目录 CHANGELOG.md 及各包目录下的 CHANGELOG。【免费下载链接】sdkMake any URL embeddable. Turn any URL into a beautiful link preview.项目地址: https://gitcode.com/gh_mirrors/sdk/sdk创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考