{% link 友情链接配置,安知鱼主题官方文档,https://docs.anheyu.com/page/links.html %}
{% link 给你的友链页面换个样式,东方月初,https://hexo.200038.xyz/jinx/VPS-Order/ %}
如果你已经添加友情链接配置,请直接看第二步
- 第一步
在 Hexo 博客根目录 [blog]下打开终端,输入
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文件最后,引入以上两个文件以及定义按钮元素:
<div class="addBtn"><button onclick="leonus.linkCom()"><i class="fa-solid fa-circle-plus"></i>快速申请 (默认样式)</button> <button onclick="leonus.linkCom("bf")"><i class="fa-solid fa-circle-plus"></i>快速申请 (Butterfly)</button></div>
<link rel="stylesheet" href="/css/kslink.css">
<script src="/js/kslink.js"></script>
本地三连预览
hexo clean; hexo g; hexo s