使用 CardLink 库生产卡片式链接

有时候经常看到知乎的文章，或者问题中的链接是卡片式的，将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等。其实笔者之前推荐过另一钟WordPress引用本网站文章链接的美化方法，有所局限，效果及配置如下。

给文章添加卡片式内链 WordPress自带文章链接以嵌入式卡片展现功能，不过样式比较单一。那么我们给wordpress添加一个短代码调用功能，使用短代码添加卡片式内链并适度美化。一、效果对比 WordPress自带的卡... 时间:2020/11/14 分类:WP建站 阅读:30

我们可以在网站上调用CardLink，实现任意外链产生此效果。

https://www.jishusongshu.com/wordpress-site/short-code-article-links/

CardLink

一些使用方法请见

通过 CDN 的方式引入 CardLink

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

使用代理服务器为<article></article>(文章)标签下所有打开新标签窗口的a标签生成卡片链接

<script>
  cardLink.server = 'https://api.allorigins.win/raw?url=' 
  cardLink(document.querySelectorAll('article a[target=_blank]')) 
</script>

为防止cdn.jsdelivr.net抽风，建议下载到自己的服务器CDN上面，文件已经打包好了，需要dist和src两个文件夹内容，调用dist/cardlink.js即可。

有时候跨域请求无法获取链接信息，则需要将目标链接传给代理服务器，让代理服务器去请求 HTML 文本并返回，可以自己搭建，需要node.js环境。

Github链接则来自有趣的Github/Gitee/Gitlab卡片

网站插入Github/Gitee/Gitlab卡片之前用的WP Reposidget插件失效了，于是找到这么一个插件gitCards代替。感谢戴兜大佬的开发，效果如下： [gitcard type="1" url="https://github.c... 时间:2022/3/13 分类:WP建站 阅读:28

参考资料：https://blog.imlete.cn/article/CardLink.html

附
件
下
载

文件名称：CardLink-main
适用版本：HTML
更新日期：2024-04-11
文件大小：115 K

提示：遇问题或链接失效请联系站长，本站欢迎捐赠！