逛知乎的时候，常看到卡片式的链接。卡片式链接不仅直观显示出网址、标题、网站的头像等等信息。

这个方案是看到目的地 的文章，我这里也测试了一下。

引入JS

GitHub：Lete114/CardLink

给网站引入JS，放置在head标签、body标签之前

<script src="https://cdn.jsdelivr.net/npm/cardlink"></script>

使用方法

链接格式为<a href="网址" target="_blank"></a>

1. 使用方法1

<script>
  // 为<article></article>(文章)标签下所有打开新标签窗口的a标签生成卡片链接
  cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>

2. 使用方法2

<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>

3. 使用方法3

<script>
// 使用div的ID来标注超链接

cardLink(document.querySelectorAll('#contents>.article-content a[target=_blank]'))

或
  document.querySelectorAll('#contents>.article-content a[target=_blank]').forEach((el) => {
    el.setAttribute('cardlink', '')
  })
</script>

跨域请求

由于这是前端发送请求获取 HTML，可能部分网站会存在跨域 (CORS) 问题，所以 cardLink 允许你使用代理服务器去请求目标网站的 HTML

<script>
  // 注意: 只有发生跨域请求时，cardLink 才会将请求发送到代理服务器(以此可以减轻代理服务器的压力)
  // 在执行 cardLink 之前预设代理服务器
  cardLink.server = 'https://api.allorigins.win/raw?url='
  // cardLink.server = 'https://cardlink-server.deta.dev/?url='

  // 为<article></article>(文章)标签下所有打开新标签窗口的a标签生成卡片链接
  cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>

作者也提供自建的代理服务器方案，将目标的链接传递给代理服务器，让代理服务器去请求目标链接然后返回html文本.

GitHub: Lete114/CardLink at server

或者使用第三方的免费的跨域代理服务

成果演示

但是经过测试发现,这个js会在控制台留下一堆bebug,一堆请求信息,都是跨域请求的信息.