卡片式链接

原文: https://blog.imlete.cn/article/CardLink.html

有时候经常看到知乎的文章，或者问题中的链接是卡片式的

将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等

开源地址: https://github.com/Lete114/CardLink

效果如下

实现原理

1. 请求目标链接的 HTML
2. 得到结果，使用 new DOMParser() 解析请求结果的 HTML 内容，并使用 dom API 解析获取信息 (如果你厉害你可以使用正则表达式匹配)
3. 编辑卡片式链接的 HTML 以及 CSS 样式
4. 将解析到的信息插入之前编辑好的 HTML 模板中，并渲染到当前页面

潜在的问题

1. 如何解决前端请求跨域问题
2. 如何获取网站的图标(icon 或 cover)
3. 如果获取到的 (img 或 link) 标签的 (src 或 href) 为相对路径该如何解决
   如: (/img/xxx.png) (…/img/xxx.png) (./img/xxx.png)
4. 如果获取到的 img 标签的 src 为 Loading 的 base64 图片&#x