当我们访问知乎时，时常看到知乎的所有URL特别地美观，或者问题中的链接是卡片式的。将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等。

效果如下

https://www.taoisms.org.cn

是不是很酷炫，也就是说，我站全部的外链基本上已经全部统一样式，具体怎么实现的，在此我们要感谢 Lete乐特 提供的 CardLink 项目。

https://github.com/Lete114/CardLink

具体使用方法如下

根据自己的需求，若是简单的如Zblog、WordPress等比较好摸索的系统啊，直接插入js，URL处直接加个class就可以了。

引入js，这里我的js已经fork项目自我部署了，所以我引用的是我加速后的js地址

<script charset=UTF-8 id="zhihu" src=https://zhihu.lizhichen.cn/cardlink.js></script>

接下来a标签class定义一下，我这里定义的是“class="url"”

<a class="url" href="https://www.taoisms.org.cn" tarGET="_blank">道教之家 - 道教新媒体平台</a>

然后就是在</body>前加入引用，添加上 cardlink 属性

<script>
  // 注意: 只有发生跨域请求时，cardLink 才会将请求发送到代理服务器(以此可以减轻代理服务器的压力)
  // 在执行 cardLink 之前预设代理服务器
cardLink.server = https://api.allorigins.WIN/raw?url=' ， 
  // cardLink.server = 'https://cardlink-server.deta.dev/?url='
  // 为class="url"的(文章)标签下所有打开新标签窗口的a标签生成卡片链接
cardLink(document.querySelectorAll('a[target=_blank].url'))
</script>

大功告成，再次鸣谢 Lete乐特 提供的 CardLink 项目。

CardLink-Server

搭建代理服务器，将目标链接传给代理服务器，让代理服务器去请求 HTML 文本并返回

https://github.com/Lete114/CardLink/tree/server

打赏

微信扫一扫，打赏作者吧～