【Hexo博客|Fluid主题】实现链接卡片效果

---

前言

今天在阅读Github新闻时，发现一个链接卡片的库登上了Hello Github，看到这个效果实在是太有趣了，就跟知乎上的链接差不多，所以打算将该功能添加到我的博客中。先看看效果

如果你也有类似的需求，那么就学起来吧。

---

一、CardLink库

CardLink是今天（2024年1月26日）在Hello Github上开源自荐的项目，他的功能很简单，就是为页面上的超链接生成卡片式链接。

仓库地址：https://github.com/Lete114/CardLink.git

在学习本节内容时，首先你要

1. 有一个基于Hexo的博客。
2. 安装了Fluid主题（如果不是，可以借鉴本文）。

二、配置步骤

1. 添加静态js文件

首先打开文件blog/_config.fluid.yml，也就是你的配置文件，找到static_prefix部分，添加

cardlink: https://cdn.jsdelivr.net/npm/cardlink@1.0.2/dist/

2. 使库文件生效

打开文件blog/themes/fluid/layout/_partial/scripts.ejs，找到<% if (is_post() || is_page()) { %>，添加

<%- js_ex(theme.static_prefix.cardlink, 'cardlink.js') %>

这里的意思是，如果是文章或者是个页面的话，执行下面的操作，也就是说执行这句代码，而这句代码的意思是执行文件

static_prefix.cardlink/cardlink.js

换句话说就是把js库文件包含了进去，导入该库。

3. 编写启用CardLink

首先新建文件blog/source/js/enable_cardjs.js，

然后写入以下代码

// 注意: 只有发生跨域请求时，cardLink 才会将请求发送到代理服务器(以此可以减轻代理服务器的压力)
// 在执行 cardLink 之前预设代理服务器
cardLink.server = 'https://api.allorigins.win/raw?url='
// 为<article></article>(文章)标签下所有打开新标签窗口的a标签生成卡片链接
cardLink(document.querySelectorAll('article a[mtype|="card"]'))
// 兼容以前的文章
cardLink(document.querySelectorAll('article a[rel=noopener]'))

这段代码是在使用一个叫做 cardLink 的函数为文章中的链接生成卡片链接。这些卡片链接是在新的标签窗口中打开的。代码通过设置一个代理服务器来处理跨域请求并减轻代理服务器的压力。
第一行注释解释了什么情况下会发送请求到代理服务器。在执行 cardLink 之前，需要预设代理服务器。
第二行代码设置了代理服务器的地址，使用了 https://api.allorigins.win/raw?url=。
第三行代码使用 querySelectorAll 选择了所有 <article></article> 标签下具有 mtype 属性值为 card 的 a 标签，并为它们生成卡片链接。
第五行代码使用 querySelectorAll 选择了所有 <article></article> 标签下具有 rel 属性值为 noopener 的 a 标签，并为它们生成卡片链接。
这段代码的作用是为文章中的特定链接生成卡片链接，并在新的标签窗口中打开这些链接。同时，使用代理服务器处理跨域请求以减轻代理服务器的压力。

在这段代码下，你只要在文章中按照这个格式写了

<a mtype="card" href="#链接地址">文字</a>

就能生成卡片链接。
然后打开文件blog/_config.fluid.yml，找到custom_js，添加/js/enable_cardjs.js，如下

custom_js: 
  - /js/enable_cardjs.js

这样就启用了。

4. 查看效果

效果与前面一致。

总结

1. 对于该功能，应该整合相关代码片段，这样使用体验会更好，后面有空写一个。
2. 该库还存在一些跨于问题，一些还经过服务器才能得到数据，甚至以后可能变收费。