使用 CardLink 库生产卡片式链接

有时候经常看到知乎的文章,或者问题中的链接是卡片式的

将卡片式链接与普通的链接相比,卡片式链接不仅美观,还展示更多信息,如:标题、图片、网址等

效果如下 CardLink

一些使用方法请见 https://github.com/Lete114/CardLink

通过 CDN 的方式引入 CardLink

COPY
1
2
3
4
5
6
7
8
<!-- 建议放在head标签里 -->
<script src="https://cdn.jsdelivr.net/npm/cardlink"></script>

<!-- 建议放在 </body> 之前 -->
<script>
// 为<article></article>(文章)标签下所有打开新标签窗口的a标签生成卡片链接
cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>

当你想让特定的链接变成卡片式链接时你可以为它添加上 cardlink 属性

COPY
1
2
3
4
5
<!-- 建议放在 </body> 之前 -->
<script>
// CardLink 默认会对页面上所有a[cardlink]生成卡片链接
cardLink()
</script>

或者如果你使用 markdown 写内容的时候,可以直接在内容中写 HTML

COPY
1
2
3
4
5
6
7
8
9
10
11
12
13
## 标题 1

其它内容...

正常 markdown 语法
[https://Lete114.github.io/CardLink](https://Lete114.github.io/CardLink)

html 语法
<a href="https://Lete114.github.io/CardLink/" target="_blank"></a>

## 标题 2

其它内容...
COPY
1
2
3
4
5
<!-- 建议放在 </body> 之前 -->
<script>
// CardLink 默认会对页面上所有a[cardlink]生成卡片链接
cardLink()
</script>

跨域请求

  1. 搭建代理服务器,将目标链接传给代理服务器,让代理服务器去请求 HTML 文本并返回
    CardLink-Server
  2. 使用在线免费的跨域代理
    (前者是博主自己搭建的跨域请求服务,后者是网上找的免费跨域请求服务)
    https://api.allorigins.win/raw?url=
Authorship: Lete乐特
Article Link: https://blog.imlete.cn/article/CardLink.html
Copyright: All posts on this blog are licensed under the CC BY-NC-SA 4.0 license unless otherwise stated. Please cite Lete乐特 's Blog !