我想要什么:
我正在努力做到这一点,以便当在我的不和谐中添加或从员工中删除成员时,它会在我的网站上更新它。我尝试过使用 node.js 执行此操作,但随后我无法使用文档属性等。基本上我想知道这是否可能。
JS代码:
const headBoardOfDirectors = document.querySelector('#hbod-role');
const boardOfDirectors = document.querySelector('#bod-role');
const headAdmin = document.querySelector('#ha-role');
const seniorAdmin = document.querySelector('#sa-role');
const admin = document.querySelector('#a-role');
const headModerator = document.querySelector('#hm-role');
const moderator = document.querySelector('#m-role');
const trialModerator = document.querySelector('#tm-role');
// Below is just an example of what I am talking about.
staff = [
bunch of staff roles here
]
if (some member role add or remove event) {
if (role added or removed is staff) {
if (role name is Head Board of Directors) {
headBoardOfDirectors.innerHTML = `${headBoardOfDirectors.innerHTML}\n${member name}`
}
}
}
HTML 代码:
<div id="staff">
<table>
<tr>
<th class="main"></th>
<th class="main">Staff</th>
<th class="main"></th>
</tr>
<tr>
<th></th>
<th>Founder</th>
<th></th>
</tr>
<tr>
<td></td>
<td>killrebeest#1001</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Owner</th>
<th></th>
</tr>
<tr>
<td></td>
<td>fluffy#9459</td>
<td></td>
</tr>
<tr>
<th></th>
<th>Head of Board of Directors</th>
<th></th>
</tr>
<tr>
<td></td>
<td id="hbod-role"></td>
<td></td>
</tr>
<tr>
<th></th>
<th>Board of Directors</th>
<th></th>
</tr>
<tr id="bod-role">
</tr>
<tr>
<th></th>
<th>Head Administration</th>
<th></th>
</tr>
<tr id="ha-role">
</tr>
<tr>
<th></th>
<th>Senior Administration</th>
<th></th>
</tr>
<tr id="sa-role">
</tr>
<tr>
<tr>
<th></th>
<th>Administration</th>
<th></th>
</tr>
<tr id="a-role">
</tr>
<tr>
<th></th>
<th>Head Moderation</th>
<th></th>
</tr>
<tr id="hm-role">
</tr>
<tr>
<th></th>
<th>Moderation</th>
<th></th>
</tr>
<tr id="m-role">
</tr>
<tr>
<th></th>
<th>Trial Moderation</th>
<th></th>
</tr>
<tr id="tm-role">
</tr>
</table>
</div>
摘要:
基本上我主要想知道这是否可能,我认为这绝对应该是。如果可以的话,该怎么做,或者有什么引用资料可以帮助我解决这个问题。
谢谢,
杀死猛兽
最佳答案
您只需将您的node.js 与您的客户端连接即可。我建议使用 EJS。首先,通过执行 npm iexpress ejsdiscord.js
安装express、ejs 和discord.js。然后,您可以设置您的 ejs。
index.js
:
const express = require("express");
const app = express(); // setting up express
let staff = [ "john doe#1234", "jane doe#4321", "some other name#0001" ]; // example staff members
app.set("view engine", "ejs"); // using ejs
app.get("/", (req, res) => { res.render("index", { staff }); }); // rendering the ejs file
app.listen(80); // listening at port 80 (http://localhost)
views/index.ejs
:
<h1>Our staff</h1>
<ul>
<% staff.forEach(user => { %> <!-- for each staff member, list it -->
<li><%= user %></li>
<% }); %>
</ul>
您需要注册一个 Discord 机器人。只需前往 https://discord.com/developers/applications ,创建一个应用程序,为该应用程序创建一个机器人,启用 GUILD_MEMBERS 意图并复制 token 。然后您可以邀请机器人访问您的服务器。从那里,您可以使用discord.js 对该部分进行编码。
index.js
const express = require("express");
const app = express(); // setting up express
const { Client, Intents } = require("discord.js");
const client = new Client({
intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MEMBERS],
}); // intents stuff
const token = "replace with your own bot token";
const serverId = "replace with the id of your server"; // you can get the ids by enabling developer mode (user settings > advanced) and then right clicking on the server or the role
const staffRoleId = "replace with id of the staff role";
app.set("view engine", "ejs"); // using ejs
app.get("/", async (req, res) => {
const server = await (
await client.guilds.fetch()
) // get all servers
.find((v) => v.id == serverId) // find your server
.fetch(); // get the server object
const staff = (await server.members.fetch()) // get all members
.filter((v) => v.roles.cache.filter((r) => r.id == staffRoleId).size > 0) // filter out the ones without admin role
.map((v) => {
return [v.displayAvatarURL({ format: "png", size: 128 }), v.user.tag];
}); // avatars and names instead of objects
res.render("index", { staff });
}); // rendering the ejs file
app.listen(80); // listening at port 80 (http://localhost)
client.login(token); // login
您还需要稍微更改一下 ejs(我决定添加一些样式,这样它看起来就不那么可怕了)。
views/index.ejs
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our staff</title>
</head>
<body
style="
margin: 0;
font-size: 200%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
"
>
<h1 style="margin: 0; padding: 10px; padding-bottom: 0">Our staff</h1>
<ul>
<% staff.forEach(user => { %>
<!-- for each staff member, list it -->
<li>
<img
src="<%= user[0] %>"
alt="<%= user[1] %>"
style="border-radius: 50%; width: 32px; height: 32px"
/>
<%= user[1] %>
</li>
<% }); %>
</ul>
</body>
</html>
这样,你就差不多完成了。
关于javascript - HTML5 + discord.js 事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71043684/