CardLink 让自己的网站URL统一样式
文章摘要
DaoGPT
当我们访问知乎时，时常看到知乎的所有URL特别地美观，或者问题中的链接是卡片式的。将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等。效果如下
此内容根据文章AI生成，并经过人工审核，仅用于文章内容的解释与总结
投诉当我们访问知乎时，时常看到知乎的所有URL特别地美观，或者问题中的链接是卡片式的。将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等。
效果如下
是不是很酷炫，也就是说，我站全部的外链基本上已经全部统一样式，具体怎么实现的，在此我们要感谢 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
打赏
微信扫一扫，打赏作者吧～
微信扫一扫，打赏作者吧～
