51工具盒子相信各位总会遇到自己的主题自带的友链[友人帐]可能有点不太好用的时候，但是各位butterfly的友友门估计没有这个问题，但我们这些不是btf的就有罪受了
tisp:如果这张图片侵犯了您的合法权益，请与我来联系，我会给您一个满意的答复
我没的主题没有自带的友链区，这就需要我们使用如上面那位的样子来使用表格，这样子很烦，而且非常不好看，所以就有了这个东西：
下面这段代码有一个大前提
确保你的主题支持html代码内嵌。
基于JavaScript+json的前端插入式友链区，使用html标签来进行绑定，下面是一个锚定点的示例：
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hljs 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数据表单的示例：
|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hljs 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文件的引用位置就好了，非常方便，不用每写一次就提交一次！！
