引言 {#引言}

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

外挂标签的编写方式从Akilar中学得：DIY外挂标签的简单写法与应用(Akilar)

效果预览 {#效果预览}

添加外挂标签 {#添加外挂标签}

新建文件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 {#添加css}

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