6/2/2024648 字4 min read 次
相信各位总会遇到自己的主题自带的友链[友人帐]可能有点不太好用的时候，但是各位butterfly的友友门估计没有这个问题，但我们这些不是btf的就有罪受了
tisp:如果这张图片侵犯了您的合法权益，请与我来联系，我会给您一个满意的答复
我没的主题没有自带的友链区，这就需要我们使用如上面那位的样子来使用表格，这样子很烦，而且非常不好看，所以就有了这个东西：
下面这段代码有一个大前提
确保你的主题支持html代码内嵌。
基于JavaScript+json的前端插入式友链区，使用html标签来进行绑定，下面是一个锚定点的示例：
<script src="./friend-links.js"></script>
<link rel="stylesheet" type="text/css"href="./card.css">
<div class="post-body">
<div id="links">
<div class="link-navigation">
<div id="tage-0"></div>
</div>
</div>
</div>
你导入我们的JavaScript+css代码后就可以使用这个锚定点插入到你的友链页面里面。
数据表是json格式，你可以非常轻松的进行修改操作，下面是一个json数据表单的示例：
{
"links-1": {
"Selector": "id",
"tag": "tage-0",
"website": [
{
"name": "文轩夜话",
"link": "/",
"avatar": "https://blog.awaae001.top/ico.webp",
"info": "诶，什么都没有诶！"
}
],
},
"links-2": {
"Selector": "id",
"tag": "tage-2",
"website": [
{
"name": "文轩夜话",
"link": "/",
"avatar": "https://blog.awaae001.top/ico.webp",
"info": "诶，什么都没有诶！"
}
]
}
下面是一些介绍：
-
links-2是数据组，这些数据组必须独立且唯一。-
Selector是选择器，你可以在这里输入id或者class，用来绑定<div id="tage-0"></div>中的id或者class，你不能在这里填写其他的内容，否则将无法绑定正确的绑定元素！！！ -
tag是元素的标签选择器，你可以在这里输入任何满足标签命名的内容，同上面的Selector一起使用，如示例文件所示，绑定的元素是：<div id="tage-0"></div>和<div id="tage-1"></div>website显而易见，网站数据表name：网站的名字link：网站的URLavatar: 显示的头像info： 展示的网站介绍
-
非常简单吧？
你可以在这个链接获取到本文的全部文件：
文轩夜话-cloud:文件分享
文轩夜话-cloud:基于Alist的云盘服务，快速获取文件，方便的分享服务-【友链区-js】
你可以将json文件上传到任何地方，而后在文件的开头简单修改一下json文件的引用位置就好了，非常方便，不用每写一次就提交一次！！