借鉴友情链接 | Leonus的头像背景

借鉴友人帐 | Fomalhaut🥝彩色随机标签

修改文件

修改 /blog/themes/butterfly/layout/includes/page/flink.pug 

1
2
3
4
5
6
7
8
// 30行左右
// 下面添加
<div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div>
+ <div class="flink-item-bg"><img class="no-lightbox" src="${j.avatar}"></div>
// 60行左右
// 下面添加
<div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
+ <div class="flink-item-bg"><img class="no-lightbox" src="${j.avatar}"></div>

添加css方式一

新建css文件 /blog/themes/butterfly/source/css/linkbj.css 在

1
2
3
4
inject:
  head:
      # 友情链接美化
      - <link rel="preload" href="/css/linkbj.css">

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#article-container .flink .flink-list > .flink-list-item:nth-child(4n+2) {background-color: rgba(0,185,199,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(1n+1) {background-color: rgba(143,165,199,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(2n+1) {background-color: rgba(14,165,99,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(3n+1) {background-color: rgba(114,15,119,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(5n+2) {background-color: rgba(4,215,159,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(6n+2) {background-color: rgba(164,0,229,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(6n+2) {background-color: rgba(16,0,129,0.18);}
.flink-list-item .flink-item-bg{
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translate(35%,35%);
      transition: .5s;
      width: 100px;
      height: 100px;
      opacity: .2;
      border-radius: 9999px;
      overflow: hidden;}

css添加方式二

或者我是选择直接在 /blog/source/link/index.md 文件里添加以下文件，这样可以在其他页面不加载这段css这样可以提高整个网站速度0.001妙

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
#article-container .flink .flink-list > .flink-list-item:nth-child(4n+2) {background-color: rgba(0,185,199,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(1n+1) {background-color: rgba(143,165,199,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(2n+1) {background-color: rgba(14,165,99,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(3n+1) {background-color: rgba(114,15,119,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(5n+2) {background-color: rgba(4,215,159,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(6n+2) {background-color: rgba(164,0,229,0.18);}
#article-container .flink .flink-list > .flink-list-item:nth-child(6n+2) {background-color: rgba(16,0,129,0.18);}
.flink-list-item .flink-item-bg{
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translate(35%,35%);
      transition: .5s;
      width: 100px;
      height: 100px;
      opacity: .2;
      border-radius: 9999px;
      overflow: hidden;}
</style>