友人帐换个样式

如果你已经添加友情链接配置，请直接看第二步

第一步

在 Hexo 博客根目录 [blog]下打开终端，输入

1
hexo new page link

第二步

找到 source/link/index.md 这个文件，修改成以下内容
源码放不到文章，下载解压吧，下载地址

第三步

新建文件source_data\link.yml,没有_data文件夹的话也请自己新建文件，夹带下私货

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
48
- class_name: 框架
  flink_style: flexcard
  hundredSuffix: ""
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网站框架
    - name: anzhiyu主题
      link: https://blog.anheyu.com/
      avatar: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg
      descr: 生活明朗，万物可爱
      siteshot: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg

- class_name: 推荐博客
  flink_style: telescopic
  hundredSuffix: ""
  link_list:
    - name: 一粒微尘
      link: https://blog.667408.xyz
      avatar: https://blog.667408.xyz/favicon.ico
      descr: 撷光以望，纳星于瞳
      color: speed
      tag: 博主本人
    - name: 东方月初
      link: https://hexo.200038.xyz/
      avatar: https://serv.200038.xyz/2024/09/19/040857.webp
      descr: 东方月初，涂山红红
      color: green
      tag: 微尘好友

- class_name: 小伙伴
  class_desc: 那些人，那些事
  flink_style: anzhiyu
  hundredSuffix: ""
  link_list:
    - name: 一粒微尘
      link: https://blog.667408.xyz
      avatar: https://blog.667408.xyz/favicon.ico
      descr: 撷光以望，纳星于瞳
      color: vip
      tag: 荐
    - name: 东方月初
      link: https://hexo.200038.xyz/
      avatar: https://serv.200038.xyz/2024/09/19/040857.webp
      descr: 东方月初，涂山红红
      color: vip
      tag: 荐

第四步

  • 新建文件 \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 = "- name: \n  link: \n  avatar: \n  descr: ", t.value += "\n", t.setSelectionRange(15, 15)) : (t.value = "站点名称：\n站点地址：\n头像链接：\n站点描述：", 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
            })
        },
    };

  • 新建文件 \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
    /* 添加友链按钮 */
    /* 快速填写格式 */
    .addBtn {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .addBtn button {
        transition: .2s;
        display: flex;
        margin: 5px auto;
        color: var(--global-bg);
        padding: 15px;
        border-radius: 40px;
        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: var(--theme-color);
        color: #fff;
    }

第五步（我文件里面已经加过这个了，所以不用去加了）

在你的友链页面 \source\link\index.md 对应的md文件最后，引入以上两个文件以及定义按钮元素：

1
2
3
<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 clean; hexo g; hexo s