Chrison 
匿名 
Chrison
当文章内引入内联或外联后，网页显示出来，会和普通文字混在一起，看起来也不是很方便。
目前知乎或者其他网站上，都采用了【卡片式链接】的展示方式，与普通链接相比，卡片式链接不仅美观，还可以展示更多信息，如：标题、图片、网址等。
超链接效果图
卡片式效果图
CardLink
引入JS
博客的话，采用CDN JS的方式。放在head标签的位置。
npm相关的方式，请参见GitHub。
<script src="https://cdn.jsdelivr.net/npm/cardlink"></script>调用JS
放在<body></body>之间。标准方式：为<article></article>标签下所有打开新标签窗口的a标签生成卡片链接。
<script>
cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>当前主题方式：即为div的id=post-content内的超链接，采用卡片式。
<script>
cardLink(document.querySelectorAll('#post-content a[target=_blank]'))
</script>原理
1.请求目标链接的 HTML
2.得到结果，使用 new DOMParser() 解析请求结果的 HTML 内容，并使用 dom API 解析获取信息 (如果你厉害你可以使用正则表达式匹配)
3.编辑卡片式链接的 HTML 以及 CSS 样式
4.将解析到的信息插入之前编辑好的 HTML 模板中，并渲染到当前页面
问题
由于这是前端发送请求获取 HTML，可能部分网站会存在跨域 (CORS) 问题，所以 cardLink 允许你使用代理服务器去请求目标网站的 HTML
解决
1.cardLink.server => 在执行cardLink 之前预设代理服务器
2.只有发生跨域请求时，cardLink 才会将请求发送到代理服务器
<script>
cardLink.server = 'https://api.allorigins.win/raw?url='
cardLink(document.querySelectorAll('#post-content a[target=_blank]'))
</script>大功告成
其他使用方式
♾️ text 代码:<script>
// 为指定的a标签设置cardlink属性，最后调用cardLink()
document.querySelectorAll('article a[target=_blank]').forEach((el) => {
el.setAttribute('cardlink', '')
})
// 或
document.querySelector('a#example').setAttribute('cardlink', '')
// 默认会对页面上所有a[cardlink]生成卡片链接
cardLink()
</script>