文章摘要
本文详细介绍了博主对友人帐界面进行的调整和优化，包括通过获取评论区的评论来生成友链，解决评论重复获取的问题，修复了之前版本中存在的bug，如重复删除友链和程序崩溃。同时，文章还介绍了添加友链黑名单、全局屏蔽github.io域名、自定义替换友链内容等功能。此外，博主重构了一部分代码，修改了文章结构，优化了访问过慢网页的点击问题，并添加了通过API修改自定义友链的功能。教程适用于Butterfly主题，并提供了安装Autolink、添加Js文件、修改样式代码和添加友链样式的详细步骤。需要注意的是，该教程未经过大量测试，可能存在一些问题，且仅适用于Butterfly主题。
今天把友人帐的界面进行了一些调整，原先呢添加友链是要先在评论里评论，然后博主呢去添加到自己的友链里，然后呢我就偷了个懒，我就不想自己手动添加到link.yml里，所以就整了个这么一个教程。
更新日志
通过获取评论区的评论来生成友链，遂由于评论区单次加载八条评论惨遭流产
通过两种方式来获取评论，一种是通过反代来吧twikoo的数据库变成可下载的，一种是和twikoo搭在一起，暂时解决了（可能）评论重复获取
昨天的更新有一个bug，会导致重复的友链全部删除，已经把那个更新删除了
修改了一些代码，使js不会在主页加载
修复了在友链页输入非添加友链文字导致的程序崩溃
添加了友链黑名单
添加了可以全局屏蔽github.io域名，暂不支持精准的*.github.io域名
重构了一部分代码,添加了无法访问的博客和访问慢的博客
可以自己自定义替换别人添加友链的内容和自己手动添加友链
修改了文章结构，将安装过程移入Autolink文档
修改了访问过慢网页的不能点击问题，重构了一部分代码逻辑
添加了通过api修改自定义友链，没有页面
可以通过前端页面修改配置，黑名单，缓慢友链
该教程未经过大量的测试，可能存在一些问题。
该教程只适用于Butterfly主题，其他主题请谨慎修改。
博主使用的Twikoo评论是安装在Server上的，其他的评论或者安装方式请自行摸索。
安装Autolink
首先我们需要在服务器上安装Autolink
Autolink文档, 点我前往！
添加Js文件
首先我们需要创建{% p cyan, autolink.js %}，位置为\js\custom，代码如下:
js
function autoLink(){
fetch('https://autolink.byer.top/autolink')
.then(response => response.json())
.then(json => {
//console.log(json)
if(json['partners'].length!=0)
document.getElementById("telescopic-site-card-group-autolink-h2").innerHTML =
"<h2>"+ "海内存知己，天涯若比邻"+"(" +json['partners'].length+")"+"</h2>";
for(let item of json['partners']){
if (!('siteshot' in item))
siteshot = 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/'+item.link
else siteshot = item.siteshot
document.getElementById("telescopic-site-card-group-autolink").innerHTML +=
'<div class="site-card">'
+'<a class="img no-text-decoration" target="_blank" title="'+item.name+'" href="'+item.link+'" rel="external nofollow" draggable="false">'
+'<img class="flink-avatar entered loaded" data-lazy-src="'+siteshot
+'" onerror="this.onerror=null;this.src='+"'undefined'"+'" alt="'+item.name
+'" style="pointer-events: none;" src="'+siteshot+'" draggable="false" data-ll-status="loaded"></a>'+
'<div class="info cf-friends-link no-text-decoration" target="_blank" title="'+item.name+'" href="'+item.link+'" rel="external nofollow" draggable="false">'
+'<div class="site-card-avatar">'
+'<a href="'+item.avatar+'" data-fancybox="gallery" data-caption="'+item.name+'" data-thumb="'+item.avatar
+'"><img class="flink-avatar cf-friends-avatar no-fancybox entered loaded" data-lazy-src="'+item.avatar
+'" onerror="this.onerror=null;this.src='+"'undefined'" +'" alt="'+item.name+'" src="'+item.avatar
+'" draggable="false" data-ll-status="loaded"></a></div>'+'<div class="site-card-text"><span class="title cf-friends-name">'
+item.name+'</span><span class="desc" title="'+item.descr+'">'+item.descr+'</span></div></div></div>'
}
if(json['dangerous'].length!=0)
document.getElementById("anzhiyu-flink-list-autolink_dangerous-h2").innerHTML =
"<h2>"+ "人闲流更慢，鱼戏波难定"+"(" +json['dangerous'].length+")"+"</h2>";
for(let item of json['dangerous']){
document.getElementById("anzhiyu-flink-list-group-autolink_dangerous").innerHTML +=
'<div class="flink-list-item">'+
'<div class="cf-friends-link" href="'+ item.link +'" rel="external nofollow noreferrer" title="'+
item.name+'" target="_blank" draggable="false"><img class="cf-friends-avatar no-lightbox entered loaded" data-lazy-src="'+
item.avatar+'" onerror="this.onerror=null;this.src='+"/img/friend_404.gif'"+'" alt="'+item.name+'" draggable="false" data-ll-status="loaded" src="'+
item.avatar+'"><div class="flink-item-info"><div class="flink-item-name cf-friends-name">'+item.name+
'</div><div class="flink-item-desc" title="'+item.descr+'">'+item.descr+'</div></div></div></div>'
}
if(json['failed'].length!=0)
document.getElementById("anzhiyu-flink-list-autolink_dangerous-h2").innerHTML =
"<h2>"+ "去年花里逢君别，今日花开已一年"+"(" +json['failed'].length+")"+"</h2>";
for(let item of json['failed']){
document.getElementById("anzhiyu-flink-list-group-autolink_dangerous").innerHTML +=
'<div class="flink-list-item">'+
'<div class="cf-friends-link" href="'+ item.link +'" rel="external nofollow noreferrer" title="'+
item.name+'" target="_blank" draggable="false"><img class="cf-friends-avatar no-lightbox entered loaded" data-lazy-src="'+
item.avatar+'" onerror="this.onerror=null;this.src='+"/img/friend_404.gif'"+'" alt="'+item.name+'" draggable="false" data-ll-status="loaded" src="'+
item.avatar+'"><div class="flink-item-info"><div class="flink-item-name cf-friends-name">'+item.name+
'</div><div class="flink-item-desc" title="'+item.descr+'">'+item.descr+'</div></div></div></div>'
}
}).catch(err => console.log('Request Failed', err));
}
autoLink()修改样式代码
然后我们要修改{% p cyan, flink.pug %}文件，修改\layout\includes\page\flink.pug文件，大约在125行左右，你可以将文件内.flink的if site.data.link的位置折叠，添加 #telescopic-site-card-group-autolink-h2和#telescopic-site-card-group-autolink
代码如下:
pug
.flink
if site.data.link
.......
#telescopic-site-card-group-autolink-h2
#telescopic-site-card-group-autolink
#anzhiyu-flink-list-autolink_dangerous-h2
#anzhiyu-flink-list-group-autolink_dangerous
#anzhiyu-flink-list-group-autolink_failed-h2
#anzhiyu-flink-list-group-autolink_failed
script(defer data-pjax src=url_for('/js/custom/autolink.js'))添加友链样式
然后呢我们需要修改{% p cyan, flink.styl %}文件，修改\source\css\_page\flink.styl，在最后添加：
css
#article-container
.telescopic-site-card-group
......
#telescopic-site-card-group-autolink
padding: 20px 0;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: start;
justify-content: flex-start;
margin: -8px;
-webkit-box-align: stretch;
align-items: stretch;
.site-card
border: var(--style-border);
border-radius: 12px;
transition: 0.3s;
transition-timing-function: ease-in-out;
overflow: hidden;
height: 200px;
position: relative;
width: calc(100% / 7 - 16px);
background: var(--anzhiyu-card-bg);
box-shadow: var(--anzhiyu-shadow-border);
.img-alt
display: none
+maxWidth1200()
width: calc(20% - 16px) !important;
+maxWidth900()
width: calc(25% - 16px) !important;
+maxWidth768()
width: calc(33.3333% - 16px) !important;
+maxWidth600()
width: calc(50% - 16px) !important;
&:hover
border: var(--style-border-hover);
box-shadow: var(--anzhiyu-shadow-main);
.info
background: var(--anzhiyu-theme);
height: 120px;
.site-card-text
.title
color: var(--anzhiyu-white);
.desc
transition: 0.3s;
color: var(--anzhiyu-white);
width: 100%;
+minWidth768()
.desc
-webkit-line-clamp: 4;
.site-card-tag
left: -50px;
.img
height: 80px;
img
transform: scale(1.1);
filter: brightness(0.3);
.info
display: flex;
border: none;
padding: 0.7rem;
width: 100%;
height: 90px;
margin: 0;
border-radius: 0 0 12px 12px;
.site-card-text
display: flex;
flex-direction: column;
align-items: flex-start;
.title
color: var(--anzhiyu-fontcolor);
text-align: left;
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 1;
transition: all 0.3s ease 0s;
.desc
font-size: 0.9rem;
color: var(--anzhiyu-fontcolor);
opacity: 0.7;
transition: 0.3s;
text-align: left;
overflow-wrap: break-word;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
.img-alt
display: none;
img
border-radius: 32px;
transition: 0.3s !important;
margin: 2px 8px 0 0;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
background: var(--anzhiyu-secondbg);
.img
-webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0));
border-radius: 0;
height: 120px;
width: 100%;
display: flex;
border: none;
padding: 0 !important;
transition: all 0.3s ease 0s;
img
border-radius: 0;
transform: scale(1.03);
transition: 0.3s;
margin: 0;
max-width: 100%;
#anzhiyu-flink-list-group-autolink_dangerous
overflow: auto
margin: -6px
text-align: center
.img-alt
display: none
&.cf-friends-lost-contact
.flink-list-item
height 60px
&:hover
.cf-friends-link img
width: 0;
height: 0;
opacity: 0;
margin: 0.5rem;
min-width: 0px;
min-height: 0px;
.cf-friends-link img
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
.flink-list-item
margin: 6px 6px;
transition: 0.3s;
border-radius: 12px;
transition-timing-function: ease-in-out;
position: relative;
width: calc(20% - 12px);
border: var(--style-border);
box-shadow: var(--anzhiyu-shadow-border);
background: var(--anzhiyu-card-bg);
display: flex;
float: left;
overflow: hidden;
height: 90px;
line-height: 17px;
transform: translateZ(0px);
.cf-friends-link
display: flex;
border: none;
width: 100%;
height: 100%;
align-items: center;
color: var(--anzhiyu-fontcolor);
text-decoration: none;
font-weight: bold;
padding: 0 4px;
border-radius: 4px 4px 0 0;
img
border-radius: 32px;
margin: 15px 20px 15px 15px;
transition: 0.3s;
background: var(--anzhiyu-background);
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
float: left;
object-fit: cover;
+maxWidth1200()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
.flink-item-info
display: flex;
flex-direction: column;
justify-content: center;
width: calc(100% - 90px);
height: fit-content;
.flink-item-name
@extend .limit-one-line
text-align: left;
line-height: 20px;
color: var(--anzhiyu-fontcolor);
display: block;
padding: 0px 10px 0px 0px;
font-weight: 700;
font-size: 19px;
max-width: calc(100% - 12px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.flink-item-desc
@extend .limit-one-line
white-space: normal;
padding: 5px 10px 16px 0;
color: var(--anzhiyu-fontcolor);
text-align: left;
font-size: 0.93em;
height: 40px;
text-overflow: ellipsis;
opacity: 0.7;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
&:hover
transform: scale(1);
background: var(--anzhiyu-theme);
border: var(--style-border-hover);
box-shadow: var(--anzhiyu-shadow-main);
.site-card-tag
left: -70px;
a
img
transition: 0.6s;
width: 0;
height: 0;
opacity: 0;
margin: 0.5rem;
min-width: 0px;
min-height: 0px;
.flink-item-info
min-width: calc(100% - 20px);
.flink-item-name
color: var(--anzhiyu-white);
.flink-item-desc
overflow: hidden;
width: 100%;
color: var(--anzhiyu-white);
#anzhiyu-flink-list-group-autolink_failed
overflow: auto
margin: -6px
text-align: center
.img-alt
display: none
&.cf-friends-lost-contact
.flink-list-item
height 60px
&:hover
.cf-friends-link img
width: 0;
height: 0;
opacity: 0;
margin: 0.5rem;
min-width: 0px;
min-height: 0px;
.cf-friends-link img
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
.flink-list-item
margin: 6px 6px;
transition: 0.3s;
border-radius: 12px;
transition-timing-function: ease-in-out;
position: relative;
width: calc(20% - 12px);
border: var(--style-border);
box-shadow: var(--anzhiyu-shadow-border);
background: var(--anzhiyu-card-bg);
display: flex;
float: left;
overflow: hidden;
height: 90px;
line-height: 17px;
transform: translateZ(0px);
.cf-friends-link
display: flex;
border: none;
width: 100%;
height: 100%;
align-items: center;
color: var(--anzhiyu-fontcolor);
text-decoration: none;
font-weight: bold;
padding: 0 4px;
border-radius: 4px 4px 0 0;
img
border-radius: 32px;
margin: 15px 20px 15px 15px;
transition: 0.3s;
background: var(--anzhiyu-background);
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
float: left;
object-fit: cover;
+maxWidth1200()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
.flink-item-info
display: flex;
flex-direction: column;
justify-content: center;
width: calc(100% - 90px);
height: fit-content;
.flink-item-name
@extend .limit-one-line
text-align: left;
line-height: 20px;
color: var(--anzhiyu-fontcolor);
display: block;
padding: 0px 10px 0px 0px;
font-weight: 700;
font-size: 19px;
max-width: calc(100% - 12px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.flink-item-desc
@extend .limit-one-line
white-space: normal;
padding: 5px 10px 16px 0;
color: var(--anzhiyu-fontcolor);
text-align: left;
font-size: 0.93em;
height: 40px;
text-overflow: ellipsis;
opacity: 0.7;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
&:hover
transform: scale(1);
background: var(--anzhiyu-theme);
border: var(--style-border-hover);
box-shadow: var(--anzhiyu-shadow-main);
.site-card-tag
left: -70px;
a
img
transition: 0.6s;
width: 0;
height: 0;
opacity: 0;
margin: 0.5rem;
min-width: 0px;
min-height: 0px;
.flink-item-info
min-width: calc(100% - 20px);
.flink-item-name
color: var(--anzhiyu-white);
.flink-item-desc
overflow: hidden;
width: 100%;
color: var(--anzhiyu-white);
这一步做完，我们的友链就能自动获取啦。
喜欢这篇文章的人也看了
评论
隐私政策
0/500
滚动到此处加载评论...