使用 Discord API 重新创建 Discord 小部件

Question

使用 Discord API 重新创建 Discord 小部件

到目前为止，我正在使用 JSON 创建自己的样式小部件https://discordapp.com/api/servers/GUILD-ID/widget.json，到目前为止工作正常。但是，此 JSON 仅限于 99 个用户，这对我来说是个问题。

所以我想，我可以使用官方的 Discord API 重新创建它。但是，有一些信息，我在 API 中找不到，或者我只是瞎了眼。

我缺少信息，哪个用户当前在哪个语音频道
我缺少用户的在线状态
我缺少头像网址
字段mute和是否deaf存在于用户对象中，它们为空/空，而widget.json 显示正确的信息

因此 widget.json 中的用户对象如下所示：

{
    id: "0",
    username: "xxxx",
    discriminator: "0000",
    avatar: null,
    status: "online",
    deaf: false,
    mute: false,
    self_deaf: true,
    self_mute: true,
    suppress: false,
    channel_id: "555555555555555555",
    avatar_url: "https://cdn.discordapp.com/widget-avatars/XXXXXXXXXXXXXXX"
}

Run Code Online (Sandbox Code Playgroud)

而 API 返回这个：

{
    user: {
    id: "999999999999999999",
    username: "xxxx",
    avatar: "257281f9b2aa93be7c12f5c49e122ca3",
    discriminator: "1234",
    public_flags: 576
    },
    roles: [
        "123456789123456789",
        "987654321987654321"
    ],
    nick: "yyyy",
    premium_since: null,
    joined_at: "1970-01-01T00:00:00.000000+00:00",
    is_pending: false,
    mute: false,
    deaf: false
}

Run Code Online (Sandbox Code Playgroud)

这对我的情况几乎无法使用。

Answer 1

Ton*_*man 0

我今天早些时候只是在搞乱这个，如果你从来没有弄清楚的话，这就是我到目前为止想到的

CSS

        * {
            box-sizing: border-box;
        }
        
        html,
        body {
            font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #eeeeef;
            background-color: #36393f;
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
            align-content: flex-start;
            flex-wrap: wrap;
            flex-direction: row;
        }
        
        p {
            margin: 3;
        }
        
        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            float: left;
        }
        
        a {
            background-color: #5865F2;
            box-shadow: inset 0 -0.6em 0 -0.35em rgb(0 0 0 / 17%);
            color: #eeeeef;
            padding: 1em 1.5em;
            position: relative;
            text-decoration: none;
            text-transform: uppercase;
            z-index: 5;
            border-radius: 0.5rem;
            font-weight: bold;
            font-size: 1.5rem;
            float: right;
        }
        
        a:hover {
            transition: all 1.5s;
            box-shadow: inset 0 0 100px 100px rgb(255 255 255 / 30%);
        }
        
        a:active {
            box-shadow: none;
            top: 5px;
        }
        
        header {
            margin: 50px;
        }
        
        h1 {
            font-size: 4rem;
            z-index: 3;
            text-shadow: 3px 3px 4px #000000a6;
        }
        
        .member {
            padding: 8px;
            font-size: 1.3rem;
            margin: 5;
            text-shadow: 1.5px 1.5px 16px #00000025;
        }
        
        img {
            border-radius: 5px;
        }
        
        .memberText {
            position: absolute;
            margin-top: 5.8px;
            margin-left: 25px;
            font-weight: bold;
        }
        
        br {
            display: block;
            margin: 10px 0;
            line-height: 22px;
            content: " ";
        }
        
        #users {
            box-shadow: 20px 3em 20px 1em rgb(0 0 0 / 5%);
        }
        
        @media only screen and (max-width: 600px) {
            #wrap {
                width: 300px;
                background-image: linear-gradient(to left, transparent, #1d1e2280);
            }
        }

Run Code Online (Sandbox Code Playgroud)

元和脚本标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6c4ec84abe.js" crossorigin="anonymous"></script>

Run Code Online (Sandbox Code Playgroud)

正文 HTML


<body>

    <header class="sticky"></header>

    <div id="users">
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

JS（我通常在 body 标签的底部加载，或者在处理 DOM 元素时将其与标签一起加载）

要获取小部件的正确 JSON，请参见下图

$.getJSON('https://discord.com/api/guilds/633515516207693864/widget.json', function(data) {

        var members = data.members;

        var title = `<h1>${data.name}</h1>
            <p><a href="${data.instant_invite}"" target="_blank"><i class="fa-brands fa-discord"></i> Join Now</a></p>`;

        for (var member in members) {

            var deaf = (members[member].deaf) ? "<font color='red'><i class='fa-solid fa-headphones'></i></font>" : "";
            var mute = (members[member].mute) ? "<font color='red'><i class='fa-solid fa-microphone-slash'></i></font>" : "";

            var gameCheck = (!members[member].game) ? `<span style="font-weight:100;font-style:italic;"></span>` : `<span style="font-weight:100;font-style:italic;">Playing ${members[member].game.name}</span>`;

            if (members[member].status === "online") {
                status = `<i class='fa-solid fa-circle' style='color:#00ff00ba;font-size:1rem;'></i>`;
            } else if (members[member].status === "idle") {
                status = `<i class="fa-solid fa-moon" style='color:#d9d93be6;font-size:1rem;'></i>`;
            }

            let memberItem = `<img src="${members[member].avatar_url}" style="height:100px; width:auto;margin-right:8px;"><span class="memberText">${status} ${members[member].username}<br><i style='font-size:1rem;font-weight:100 !important;margin-top:5px;'>${gameCheck}<br>${mute} ${deaf}</i></span>`;
            var onlineUsers = (members[member].username == "Hide Bot/User 1" || members[member].username == "Hide Bot/User 2") ? `` : `<div class='member'>${memberItem}</div>`;

            $("#users").append(`${onlineUsers}`);
        }

        $("header").html(title);

    });

Run Code Online (Sandbox Code Playgroud)

这里还有一个获取 JSON Api url 的屏幕截图

归档时间：	5 年，3 月前
查看次数：	520 次
最近记录：	5 年，2 月前