Hexo的Butterfly魔改教程：网址卡片外置标签

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

外置标签的编写方式从Akilar中学得：

引用站外地址，不保证站点的可用性和安全性

DIY外置标签的简单写法与应用

Akilar

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

效果预览

引用站外地址，不保证站点的可用性和安全性

获取网站的Favicon图标并显示在你的网页上

owen0o0

1	{% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %}

添加外置标签

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

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
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">