将文章内的超链接改成卡片式链接展示


当文章内引入内联或外联后,网页显示出来,会和普通文字混在一起,看起来也不是很方便。
目前知乎或者其他网站上,都采用了【卡片式链接】的展示方式,与普通链接相比,卡片式链接不仅美观,还可以展示更多信息,如:标题、图片、网址等。

超链接效果图

卡片式效果图

CardLink

CardLink

引入JS

博客的话,采用CDN JS的方式。放在head标签的位置。
npm相关的方式,请参见GitHub。

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

调用JS

放在<body></body>之间。
标准方式:为<article></article>标签下所有打开新标签窗口的a标签生成卡片链接。

<script>
    cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>

当前主题方式:即为divid=post-content内的超链接,采用卡片式。

<script>
    cardLink(document.querySelectorAll('#post-content a[target=_blank]'))
</script>

原理

1.请求目标链接的 HTML
2.得到结果,使用 new DOMParser() 解析请求结果的 HTML 内容,并使用 dom API 解析获取信息 (如果你厉害你可以使用正则表达式匹配)
3.编辑卡片式链接的 HTML 以及 CSS 样式
4.将解析到的信息插入之前编辑好的 HTML 模板中,并渲染到当前页面

问题

由于这是前端发送请求获取 HTML,可能部分网站会存在跨域 (CORS) 问题,所以 cardLink 允许你使用代理服务器去请求目标网站的 HTML

解决

1.cardLink.server => 在执行cardLink 之前预设代理服务器
2.只有发生跨域请求时,cardLink 才会将请求发送到代理服务器

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

大功告成

其他使用方式

<script>
  // 为指定的a标签设置cardlink属性,最后调用cardLink()
  document.querySelectorAll('article a[target=_blank]').forEach((el) => {
    el.setAttribute('cardlink', '')
  })

  // 或
  document.querySelector('a#example').setAttribute('cardlink', '')

  // 默认会对页面上所有a[cardlink]生成卡片链接
  cardLink()
</script>

声明:目的地-Destination|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 将文章内的超链接改成卡片式链接展示


前程似锦、未来可期、寻得良人、共赴白头,祝你也祝我。