友链区JavaScript组件-重做版

—648 字4 min read 次

ฅ^•ﻌ•^ฅ

相信各位总会遇到自己的主题自带的友链[友人帐]可能有点不太好用的时候，但是各位butterfly的友友门估计没有这个问题，但我们这些不是btf的就有罪受了

tisp
，请与我来联系，我会给您一个满意的答复

我没的主题没有自带的友链区，这就需要我们使用如上面那位的样子来使用表格，这样子很烦，而且非常不好看，所以就有了这个东西：

下面这段代码有一个大前提

确保你的主题支持html代码内嵌。

基于JavaScript+json的前端插入式友链区，使用html标签来进行绑定，下面是一个锚定点的示例：

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数据表单的示例：

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：网站的URL
    - avatar: 显示的头像
    - info：展示的网站介绍

非常简单吧？

你可以在这个链接获取到本文的全部文件：

文轩夜话-cloud

文轩夜话-cloud，快速获取文件，方便的分享服务-【友链区-js】

你可以将json文件上传到任何地方，而后在文件的开头简单修改一下json文件的引用位置就好了，非常方便，不用每写一次就提交一次！！

ฅ^•ﻌ•^ฅ

<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>

{ "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": "诶，什么都没有诶！" } ] }