使用 CardLink 生成卡片式链接

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

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

引入JS

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

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

使用方法

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

使用方法1

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

使用方法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

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