友链头像轮播图教程

原作者链接 shineyu的博客

经过不懈努力终于找到了这篇文章，然后就开始抄了，但是抄完发现有一个函数没有效果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