友链头像轮播图教程
原作者链接
经过不懈努力终于找到了这篇文章，然后就开始抄了，但是抄完发现有一个函数没有效果emmm
于是给大佬发了一下反馈
然后想起来王九弦SZ·Ninty用的也是anzhiyu主题，应该有这个js。但是我面临开学，九弦不在家所有我暂时弄不了，最后帮我找到了类似的js。最后我还是没有时间搞，所以开学了。
回家以后发现shineyu给我回复了，好好好。这下又省事了~
抄完以后发现有一个跳转函数：shine.scrollTo("#post-comment"); 又又又没有效果emmm
没事，简单改了一下就可以食用啦（仅可跳转twikoo评论，并且请关闭评论懒加载）
修改友链页代码
找到友链页面的代码文件 themes\butterfly\layout\includes\page\flink.pug ，然后找到对应位置添加如下代码：
#article-container
.flink
+ if site.data.link
+ .flink-card
+ .flink-card-title
+ .flink-card-title-small 友情链接
+ .flink-card-title-big 与各类技术博主共同进步
+ .flink-card-container
+ .flink-card-wrapper
+ if site.data.link
+ - let linkList = []
+ - site.data.link.map(function (list) { if (list.class_name != "友链认领检查") list.link_list.map(function (item) { linkList.push(item) }) })
+ - if (linkList.length % 2 !== 0) linkList.shift()
+ - let evenList = linkList.filter((x, index) => index % 2 === 0)
+ - let oddList = linkList.filter((x, index) => index % 2 === 1)
+ each item, index in evenList
+ .flink-icon-pair
+ .flink-icon
+ a(href=url_for(evenList[index].link) target='_blank' title=evenList[index].name)
+ img.no-lightbox(src=url_for(evenList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+ .flink-icon
+ a(href=url_for(oddList[index].link) target='_blank' title=oddList[index].name)
+ img.no-lightbox(src=url_for(oddList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+ each item, index in evenList
+ .flink-icon-pair
+ .flink-icon
+ a(href=url_for(evenList[index].link) target='_blank' title=evenList[index].name)
+ img.no-lightbox(src=url_for(evenList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+ .flink-icon
+ a(href=url_for(oddList[index].link) target='_blank' title=oddList[index].name)
+ img.no-lightbox(src=url_for(oddList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+ .flink-card-btn-group
+ .flink-card-btn.secondary
+ a(href="javascript:toRandomFlink();" title='随机访问')
+ i.fas.fa-random
+ span= _p('随机访问')
+ .flink-card-btn
+ a(href="javascript:shangskr.applyFlink();" title='申请友链')
+ i.fas.fa-plus-circle
+ span= _p('申请友链')
- let pageContent = page.content
if site.data.link
each i in site.data.link
上述代码只要删掉 + 加号，就是正常的缩进格式了.
添加随机访问功能
在上述的 themes\butterfly\layout\includes\page\flink.pug 友链页代码文件末尾添加如下代码，即可实现随机访问：
//- 省略上面所有代码...
//- 在末尾添加如下代码
script.
var flinks = [
"https://www.qcqx.cn/",
"https://blog.sinzmise.top/",
"https://blog.opeach.cn/",
"https://hexo.dreamerhe.online/",
"https://ffbf.top/",
"https://www.anxkj.top/",
"https://www.crowhsu.top"
];
function toRandomFlink() {
window.open(flinks[Math.floor(Math.random() * flinks.length)])
}
需要自行修改 flinks 数组中的url，随机访问就是从该数组中随机获取一个元素进行跳转访问。
添加申请友链功能
新建source\js\shangskr.js文件，在文件中添加如下功能函数，即可实现申请友链的功能：
var shangskr = {
applyFlink: function() {
var input = document.getElementsByClassName('el-textarea__inner')[0];
let evt = document.createEvent('HTMLEvents');
evt.initEvent('input', true, true);
input.value = '昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n';
input.dispatchEvent(evt);
var targetElement = document.getElementById("post-comment");
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
}
input.focus();
input.setSelectionRange(-1, -1);
},
};
添加css样式
自行创建css文件或者引入已有的css文件
@keyframes rowup {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.flink-card {
position: relative;
margin-bottom: 20px;
border-radius: 12px;
border: var(--style-border);
/* background-image: url(/img/flink_page.webp); */
background-color: var(--heo-card-bg);;
background-size: cover;
-webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
box-shadow: 0 8px 16px -4px #2c2d300c;
}
.flink-card-title {
margin-top: 2rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
}
.flink-card-title .flink-card-title-small {
font-size: 12px;
line-height: 1;
color: var(--heo-secondtext);
margin-top: 8px;
margin-bottom: 0.5rem;
}
.flink-card-title .flink-card-title-big {
font-size: 36px;
line-height: 1;
font-weight: bold;
margin-bottom: 8px;
}
.flink-card-btn-group a:hover {
text-decoration: unset !important;
}
.flink-card-desc {
font-size: 80%;
opacity: .8
}
.flink-card-btn-group {
position: absolute;
top: 2.5rem;
right: 2rem;
display: flex
}
.flink-card-btn {
height: 3em;
padding: .5em .8em;
margin-left: 1.5rem;
border-radius: 12px;
background: var(--font-color);
/* background: rgba(125,125,125,.2); */
backdrop-filter: var(--backdrop-filter);
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.flink-card-btn * {
color: #F2F6FC;
margin: .2em
}
.flink-card-btn:hover {
background: #425AEF;
-webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05)
}
.flink-card-btn:hover * {
color: #fff
}
.flink-card-container {
overflow: hidden;
display: flex;
padding-bottom: 2rem;
}
.flink-card-wrapper {
display: flex;
margin-top: 1.5rem;
flex-wrap: nowrap;
animation: rowup 120s linear infinite;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.flink-icon-pair {
margin-left: 1rem
}
.flink-icon-pair .flink-icon:nth-child(even) {
-webkit-transform: translate(-60px);
-moz-transform: translate(-60px);
-ms-transform: translate(-60px);
-o-transform: translate(-60px);
transform: translate(-60px);
margin-top: 1rem;
}
.flink-icon {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
margin: .5rem 0;
-webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
-o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05)
}
.flink-icon img {
width: 120px;
height: 120px;
border-radius: 50%!important;
margin: auto!important
}
#article-container .flink-list .flink-item-circle {
color: #57bd6a;
opacity: .8;
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5rem;
z-index: 1;
cursor: url(https://npm.elemecdn.com/eurkon-cdn/hexo/images/user/pointer.cur),pointer!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease
}
#article-container .flink-list .flink-item-circle:hover {
color: #397d45;
}
@media screen and (max-width: 768px) {
#article-container > div.flink > div.flink-card > div.flink-card-btn-group {
margin-top: 20px;
right: 2rem;
top: unset !important;
bottom: 20px;
}
.flink-card {
padding: 0px 0px 80px 0px;
}
}
animation: rowup 120s linear infinite;属性可以调整头像轮播的速度，只需要将 120s 调成自己想要的速度即可，时间越小越快
引入css样式和js脚本
css自行引入
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 自定义css
+ - <link rel="stylesheet" href="/css/css文件名称"> #添加的自定义css文件
bottom:
# 自定义js
+ - <script async data-pjax src="/js/shangskr.js"></script> #添加的自定义js文件
Hexo三连
hexo clean && hexo g && hexo s