摘要

给你的友情链接页面添加一个快速填写链接格式的按钮

[{"url":"https://cdn.hlcssc.com/img/wenzhang/202303111356422.webp","alt":""}]

这篇文章是给友情链接页面添加一个按钮

给hexo butterfly主题友联页面添加一个快速格式按钮，来有效的添加友情链接。

创建js文件

创建/blog/themes/butterfly/source /source/js/kslink.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var leonus = {    
    linkCom: e => {
        var t = document.querySelector(".el-textarea__inner");
        "bf" == e ? (t.value = "```yml\n", t.value += "- name: \n  link: \n  avatar: \n  descr: \n  rss: ", t.value += "\n```", t.setSelectionRange(15, 15)) : (t.value = "站点名称：\n站点地址：\n头像链接：\n站点描述：\nRSS地址：", t.setSelectionRange(5, 5)), t.focus()
    },
    owoBig: () => {
        if (!document.getElementById("post-comment") || document.body.clientWidth < 768) return;
        let e = 1,
            t = "",
            o = document.createElement("div"),
            n = document.querySelector("body");
        o.id = "owo-big", n.appendChild(o), new MutationObserver((l => {
            for (let a = 0; a < l.length; a++) {
                let i = l[a].addedNodes,
                    s = "";
                if (2 == i.length && "OwO-body" == i[1].className) s = i[1];
                else {
                    if (1 != i.length || "tk-comment" != i[0].className) continue;
                    s = i[0]
                }
                s.onmouseover = l => {
                    e && ("OwO-body" == s.className && "IMG" == l.target.tagName || "tk-owo-emotion" == l.target.className) && (e = 0, t = setTimeout((() => {
                        let e = 3 * l.path[0].clientHeight,
                            t = 3 * l.path[0].clientWidth,
                            a = l.x - l.offsetX - (t - l.path[0].clientWidth) / 2,
                            i = l.y - l.offsetY;
                        a + t > n.clientWidth && (a -= a + t - n.clientWidth + 10), a < 0 && (a = 10), o.style.cssText = `display:flex; height:${e}px; width:${t}px; left:${a}px; top:${i}px;`, o.innerHTML = `<img src="${l.target.src}">`
                    }), 300))
                }, s.onmouseout = () => {
                    o.style.display = "none", e = 1, clearTimeout(t)
                }
            }
        })).observe(document.getElementById("post-comment"), {
            subtree: !0,
            childList: !0
        })
    },
};

创建css文件

创建/blog/themes/butterfly/source /source/css/kslink.css 写入下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 快速填写格式 */
.addBtn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.addBtn button {
    transtion: .2s;
    display: flex;
    margin: 5px auto;
    color: var(--global-bg);
    padding: 15px;
    border-radius: 12px;
    background: var(--search-result-title);
    align-items: center;
}

button {
    padding: 0;
    outline: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    touch-action: manipulation;
}
.fa-solid, .fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.addBtn i {
    font-size: 1.3rem;
    margin-right: 10px;
}
.addBtn button:hover {
    background: #4b7aff;
    color: #fff;
}

配置引入css和js

\source\link\index.md 相应位置插入以下代码

为了避免其他页面加载css和js文件可以直接插入文章md文件内避免印象加载速度。

1
2
3
4
<div class="addBtn"><button onclick="leonus.linkCom()"><i class="fa-solid fa-circle-plus"></i>快速申请 (默认样式)</button> <button onclick="leonus.linkCom(&quot;bf&quot;)"><i class="fa-solid fa-circle-plus"></i>快速申请 (Butterfly)</button></div>
<link rel="stylesheet" href="/css/kslink.css">
<script src="/js/kslink.js"></script>

预览

1
hexo cl && hexo s