博客有很多引用链接的方式,但是一直使用超链接的样式不是很优雅,而且无法引起注意。所以还是用外挂标签准备写一个超链接网址卡片。

外挂标签的编写方式从Akilar中学得:

你也可以看到这个全新的网址卡片样式就像上面这样。

效果预览

1
{% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %}
1
{% reprintLink 在线正则表达式测试,oschina,https://tool.oschina.net/regex/ %}

添加外挂标签

新建文件themes/butterfly/scripts/tag/link.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function link(args) {
args = args.join(' ').split(',');
let title = args[0];
let sitename = args[1];
let link = args[2];

// 获取网页favicon
let urlNoProtocol = link.replace(/^https?\:\/\//i, "");
let imgUrl = "https://api.iowen.cn/favicon/" + urlNoProtocol + ".png";

return `<a class="tag-Link" target="_blank" href="${link}">
<div class="tag-link-tips">引用站外地址</div>
<div class="tag-link-bottom">
<div class="tag-link-left" style="background-image: url(${imgUrl});"></div>
<div class="tag-link-right">
<div class="tag-link-title">${title}</div>
<div class="tag-link-sitename">${sitename}</div>
</div>
<i class="fa-solid fa-angle-right"></i>
</div>
</a>`
}

hexo.extend.tag.register('link',link, { ends: false })

添加css

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/tag-link/tag-link.css">