钧言极客钧言极客

钧言极客

使用 CardLink 生成卡片式链接

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

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

引入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>
  1. 使用方法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>
  1. 使用方法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

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

成果演示

CardLink

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

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《使用 CardLink 生成卡片式链接》
文章链接:https://jinjun.top/447.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 8

  1. 我成为了范例 😃

    风记星辰 2023年03月15日    回复
  2. 看起来很完美。

    任情随缘 2023年03月08日    回复
  3. 1ro.cn 还收不,怎么联系不到人

    耀阳 2023年03月07日    回复
  4. 你的feed貌似有点问题。你看下。`validator.w3.org/feed/`

    目的地-Destination 2023年03月05日    回复
    • 已经修复该问题

      钧言 2023年03月22日    回复
    • 已经修复了feed问题,顺便升级到1.2版本

      钧言 2023年03月22日    回复
    • 不清楚,我回去看看,现在使用的是typecho的输出

      钧言 2023年03月06日    回复
  5. 哈哈哈,路过。看到了

    目的地-Destination 2023年03月05日    回复