友情链接顶部轮播滑动好友列表

hexo butterfly主题友情链接页面添加滚动友情链接

# pug修改

编辑\blog\themes\butterfly\layout\includes\page\flink.pug大概第二行

#article-container
  .flink
    .author-content-item.skills.touying
      .tags-group-all
        .tags-group-wrapper
          each i in site.data.link
            - const evenNum = i.link_list.filter((x, index) => index % 2 === 0);
            - const oddNum = i.link_list.filter((x, index) => index % 2 === 1);
            each item, index in i.link_list
              if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length))
                .tags-group-icon-pair
                  a.tags-group-icon.pblink(href=`${evenNum[index].link}`)
                    img.no-lightbox(title=evenNum[index].name, src=evenNum[index].avatar)
                  a.tags-group-icon.pblink(href=`${evenNum[index].link}`)
                    img.no-lightbox(title=oddNum[index].name, src=oddNum[index].avatar)
  link(rel='stylesheet', href='/css/link.css')

css

新建css\blog\themes\butterfly\source\css\link.css

  .author-content-item.skills {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    min-height: 450px;
  }
  .author-content-item.skills .tags-group-wrapper {
    margin-top: 20px;
    display: flex;
    flex-wrap: nowrap;
    animation: rowup 60s linear infinite;
  }
  .tags-group-icon-pair {
    margin-left: 2rem;
  }
  .tags-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 66px;
    font-weight: 700;
    box-shadow: var(--recent-post-bgcolor);
    width: 160px;
    height: 160px;
    border-radius: 100px;
    border: 4px solid var(--heo-zhuti);
  }
  .tags-group-icon img {
    width: 60%;
    margin: 0 auto !important;
  }
  .tags-group-icon-pair .tags-group-icon:nth-child(even) {
    margin-top: 1rem;
    transform: translate(-60px);
  }
  
  @keyframes rowup {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

.flink .tags-group-icon>.no-lightbox{
    border-radius: 100px !important;
    width: 137px;
    height: 137px;
    border: 3px solid var(--heo-zhuti);
}
.flink .tags-group-all{
    display: flex;
}