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

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

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


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

一些使用方法请见

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

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







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


Invitation
QQ Group
1095632335

created:04/01/2020

Welcome to the Group

Use this card to join us and participate in a pleasant discussion together .

Welcome to JISHUSONGSHU Group,wish you a nice day .