友人帐换个样式

微尘2024-10-282024-11-04

主题默认：友人帐
如果你已经添加友情链接配置，请直接看第二步

第一步

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

1	hexo new page link

第二步

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

第三步

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

- 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，并写入如下代码：

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，并写入如下代码，颜色可以换成你自己喜欢的：

/* 添加友链按钮 */
/* 快速填写格式 */
.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>