快速添加友链

效果预览图_1

1. 新建文件 [BlogRoot]\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

var leonus = {
    linkCom: e => {
        var t = document.querySelector(".el-textarea__inner");
        if (e === "bf") {
            t.value = "```yml\n";
            t.value += "- name: \n  link: \n  avatar: \n  descr: \n  siteshot: ";
            t.value += "\n```";
            t.setSelectionRange(15, 15);
        } else if (e === "solitude") {
            t.value = "```yml\n";
            t.value += "    - name:  # 友链名称\n";
            t.value += "      link:  # 友链地址\n";
            t.value += "      avatar:  # 显示头像\n";
            t.value += "      descr:  # 友链简介\n";
            t.value += "```";
            t.setSelectionRange(15, 15);
        } else {
            t.value = "站点名称：\n站点地址：\n头像链接：\n站点描述：";
            t.setSelectionRange(5, 5);
        }
        t.focus();
    },
    // other methods...
};

2. 新建文件 [BlogRoot]\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
38
39
40
41
42
43
44
45
46
47

/* 添加友链按钮 */
/* 快速填写格式 */
.addBtn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.addBtn button {
    transition: .3s;
    display: flex;
    margin: 5px auto;
    color: #000; /* Updated text color to black */
    padding: 15px;
    border-radius: 40px;
    background: #F7F7F9; /* Updated background color */
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for a 3D effect */
}
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: rgb(66, 90, 239); /* Updated hover background color */
    color: #fff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Increases shadow on hover for more depth */
    transform: translateY(-5px); /* Lifts the button up on hover */
}
.addBtn button:active {
    transform: translateY(2px); /* Presses the button down when clicked */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Reduces shadow to simulate pressing down */
}


3. 为了节省DOM规模，仅在你的友链页如 [BlogRoot]\source\link\index.md)对应的md文件最后，引入以上两个文件以及定义按钮元素：

1
2
3
4
5
6
7
8
9
10
11
12

<div class="addBtn">
    <button onclick="leonus.linkCom()">
        <i class="fa-solid fa-circle-plus"></i>快速申请 (默认样式)
    </button> 
    <button onclick="leonus.linkCom('solitude')">
        <i class="fa-solid fa-circle-plus"></i>快速申请 (Solitude)
    </button>
</div>
<link rel="stylesheet" href="/css/kslink.css">
<script src="/js/kslink.js"></script>

4. 重启项目并进入友链页面底部看效果：

1
2
3
4

hexo cl ; hexo g ; hexo s