当前位置:首页 > 技术 > 代码 > CardLink 让自己的网站URL统一样式

CardLink 让自己的网站URL统一样式

懋和道人6天前代码970

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

效果如下

image.png

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

扫描二维码推送至手机访问。

版权声明:本文由 懋和道人 发布,如需转载请注明出处。

本文链接:https://www.lizhichen.cn/new/20221124137.shtml

分享给朋友:
返回列表

上一篇:CSS 中鼠标悬停,图片旋转

没有最新的文章了...

“CardLink 让自己的网站URL统一样式” 的相关文章

云搜道前端编译

云搜道前端编译

后台api地址:/src/utils/request/index.tsconst instance = axios.create({   baseU...

所谓违禁词

所谓违禁词

需要全局替换某个违禁词,在/www/server/nginx/conf/nginx.conf 文件的include proxy.conf;下方添加如下:sub_filter &qu...

简单添加个“本站已经安全运行XX年XX天XX秒”教程

简单添加个“本站已经安全运行XX年XX天XX秒”教程

第一种第一步:在需要展示“本网站运行了XX年XX天XX秒”的地方,插进去:<span id="sitetime"></span>第二步:在插进去的...

何谓“人生倒计时”

何谓“人生倒计时”

css部分body {background:linear-gradient(to right,#9796f0,#fbc7d4);color:#333;display:flex;fl...

CSS 中鼠标悬停,图片旋转

CSS 中鼠标悬停,图片旋转

当鼠标放到图片上之后 图片旋转, 这里的图片给的是背景图transform: rotate(angle) 指定元素的 2D 旋转 transition:&nb...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。