先看看效果
新建页面添加
<ul id="flinks">
<li>资深网民孙先生</li>
<li>https://www.sunpeiwen.com</li>
<li>https://www.sunpeiwen.com/source/img/logo.jpg</li>
<li>另一个我</li>
<li>资深网民孙先生</li>
<li>https://www.sunpeiwen.com</li>
<li>https://www.sunpeiwen.com/source/img/logo.jpg</li>
<li>另一个我</li>
<link rel="stylesheet" href="https://blogcdn.loliko.cn/friendlinks/link.css" />
<script src="https://blogcdn.loliko.cn/friendlinks/link.js?1111"></script>
!!!
链接的格式如下
<li>名称</li>
<li>网址</li>
<li>头像</li>
<li>简介</li>
效果2
https://www.sunpeiwen.com/links.html
新建页面-文本模式下填写
<link rel="stylesheet" href="https://blogcdn.loliko.cn/Home-main/source/css/links.css" />
<h3 style="color:cyan;font-size:25px;"><i class="iconfont iconjinghao"></i> 友情链接</h3>
<div class="notes_card">
<a target="_blank" href="https://www.imsun.org/">
<div class="card-img" style="background-image: url(https://image.thum.io/get/width/1024/crop/768/https://www.imsun.org/);"></div>
<div class="card-u">
<div class="card-u-a">
<img class="card-u-avatar" src="https://www.imsun.org/favicon.ico" onerror="this.onerror=null; this.src=this.srcset='https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/link/8f277b4ee0ecd.svg'">
</div>
<div class="card-u-t">
<p class="card-u-t-text">
<b class="card-u-t-title">老孙博客</b><br>
<a class="card-u-t-text">资深网民</a>
</p>
</div>
</div>
</a>
</div>
自行更改其中的https://www.imsun.org/为自己的链接即可
<div class="notes_card">
<a target="_blank" href="https://www.imsun.org/">
<div class="card-img" style="background-image: url(https://image.thum.io/get/width/1024/crop/768/https://www.imsun.org/);">
</div>
<div class="card-u"> <div class="card-u-a"> <img class="card-u-avatar" src="https://www.imsun.org/favicon.ico" onerror="this.onerror=null; this.src=this.srcset='https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/link/8f277b4ee0ecd.svg'"> </div>
<div class="card-u-t">
<p class="card-u-t-text">
<b class="card-u-t-title">老孙博客</b>
<br>
<a class="card-u-t-text">资深网民</a> </p>
</div> </div> </a> </div>
重复