Hexo-butterfly聊天记录外挂标签 - 清羽飞扬の代码片段

Revision 34c916310075fe9f37d2f8a7fd4dbb3677e7c2ff

chat.js · 2.4 KiB · JavaScript Raw

/** * Chat */ "use strict"; // 预定义头像数组 const avatars = [ "https://i.p-i.vip/30/20240920-66ed9a608c2cf.png", "https://i.p-i.vip/30/20240920-66ed9b0655cba.png", "https://i.p-i.vip/30/20240920-66ed9b18a56ee.png", "https://i.p-i.vip/30/20240920-66ed9b2c199bf.png", "https://i.p-i.vip/30/20240920-66ed9b3350ed1.png", "https://i.p-i.vip/30/20240920-66ed9b5181630.png", // 可以继续添加更多头像 ]; // 用来记录已经分配头像的用户 const userAvatarMap = new Map(); let avatarIndex = 0; // 生成聊天框的整体结构 function postChatBox(args, content) { return `<div class="chatBox">${content}</div>`; } // 生成单条聊天内容 function postChat(args) { if (!args || args.length === 0) { return ""; // 如果参数为空，返回空字符串 } // 合并并拆分参数 args = args.join(" ").split(","); // 确保 args[0] 存在 let name = args[0] ? args[0].trim() : "未知"; let content = args[1] ? args[1].trim() : "无内容"; // 判断名字是否包含 QQ 号 (例如 June@3526514925) let qqNumber = null; if (name.includes("@")) { [name, qqNumber] = name.split("@"); // 分割名字和 QQ 号 } // 判断是否是我的消息 const isMe = name.toLowerCase() === "me"; const chatName = isMe ? hexo.config.author : name; const chatClass = isMe ? "me" : ""; // 固定的头像链接 const myAvatar = hexo.theme.config.avatar.img || "https://cdn.qyliu.top/i/2024/03/29/66061417537af.png"; let avatarUrl; if (isMe) { avatarUrl = myAvatar; } else if (qqNumber) { // 如果有 QQ 号，拼接头像 URL avatarUrl = `https://q1.qlogo.cn/g?b=qq&nk=${qqNumber}&s=100`; } else { // 如果没有 QQ 号，从预定义的头像数组中分配 if (!userAvatarMap.has(name)) { userAvatarMap.set(name, avatars[avatarIndex % avatars.length]); avatarIndex++; } avatarUrl = userAvatarMap.get(name); } // 生成 HTML 布局 let result = ""; result += `<div class="chatItem ${chatClass}">`; result += `<img class="chatAvatar no-lightbox" src="${avatarUrl}">`; // 添加头像 result += `<div class="chatContentWrapper">`; result += `<b class="chatName">${chatName}</b>`; result += `<div class="chatContent">${content}</div>`; result += `</div>`; result += `</div>`; return result; } // 注册自定义标签 hexo.extend.tag.register("chat", postChat); hexo.extend.tag.register("chatBox", postChatBox, { ends: true });

1	/**
2	* Chat
3	*/
4
5	"use strict";
6
7	// 预定义头像数组
8	const avatars = [
9	"https://i.p-i.vip/30/20240920-66ed9a608c2cf.png",
10	"https://i.p-i.vip/30/20240920-66ed9b0655cba.png",
11	"https://i.p-i.vip/30/20240920-66ed9b18a56ee.png",
12	"https://i.p-i.vip/30/20240920-66ed9b2c199bf.png",
13	"https://i.p-i.vip/30/20240920-66ed9b3350ed1.png",
14	"https://i.p-i.vip/30/20240920-66ed9b5181630.png",
15	// 可以继续添加更多头像
16	];
17
18	// 用来记录已经分配头像的用户
19	const userAvatarMap = new Map();
20	let avatarIndex = 0;
21
22	// 生成聊天框的整体结构
23	function postChatBox(args, content) {
24	return `<div class="chatBox">${content}</div>`;
25	}
26
27	// 生成单条聊天内容
28	function postChat(args) {
29	if (!args \|\| args.length === 0) {
30	return ""; // 如果参数为空，返回空字符串
31	}
32
33	// 合并并拆分参数
34	args = args.join(" ").split(",");
35
36	// 确保 args[0] 存在
37	let name = args[0] ? args[0].trim() : "未知";
38	let content = args[1] ? args[1].trim() : "无内容";
39
40	// 判断名字是否包含 QQ 号 (例如 June@3526514925)
41	let qqNumber = null;
42	if (name.includes("@")) {
43	[name, qqNumber] = name.split("@"); // 分割名字和 QQ 号
44	}
45
46	// 判断是否是我的消息
47	const isMe = name.toLowerCase() === "me";
48	const chatName = isMe ? hexo.config.author : name;
49	const chatClass = isMe ? "me" : "";
50
51	// 固定的头像链接
52	const myAvatar = hexo.theme.config.avatar.img \|\| "https://cdn.qyliu.top/i/2024/03/29/66061417537af.png";
53	let avatarUrl;
54
55	if (isMe) {
56	avatarUrl = myAvatar;
57	} else if (qqNumber) {
58	// 如果有 QQ 号，拼接头像 URL
59	avatarUrl = `https://q1.qlogo.cn/g?b=qq&nk=${qqNumber}&s=100`;
60	} else {
61	// 如果没有 QQ 号，从预定义的头像数组中分配
62	if (!userAvatarMap.has(name)) {
63	userAvatarMap.set(name, avatars[avatarIndex % avatars.length]);
64	avatarIndex++;
65	}
66	avatarUrl = userAvatarMap.get(name);
67	}
68
69	// 生成 HTML 布局
70	let result = "";
71	result += `<div class="chatItem ${chatClass}">`;
72	result += `<img class="chatAvatar no-lightbox" src="${avatarUrl}">`; // 添加头像
73	result += `<div class="chatContentWrapper">`;
74	result += `<b class="chatName">${chatName}</b>`;
75	result += `<div class="chatContent">${content}</div>`;
76	result += `</div>`;
77	result += `</div>`;
78
79	return result;
80	}
81
82	// 注册自定义标签
83	hexo.extend.tag.register("chat", postChat);
84	hexo.extend.tag.register("chatBox", postChatBox, { ends: true });
85

chat.styl · 970 B · Stylus Raw

1	.chatBox
2	padding: 30px
3	width: 100%
4	box-sizing: border-box
5
6	.chatItem
7	display: flex
8	flex-direction: row
9	justify-content: flex-start
10	margin: 20px 0
11
12	.chatAvatar
13	width: 40px
14	height: 40px
15	border-radius: 50% !important
16	margin: 5px 10px 0 0 !important
17
18	.chatContentWrapper
19	display: flex
20	flex-direction: column
21	width: calc(100% - 110px)
22
23	.chatContent
24	background: var(--liushen-card-bg) // 这个变量得自己改改
25	padding: 10px
26	border-radius: 0 10px 10px 10px
27	width: fit-content
28	max-width: 100%
29	margin: 5px 0 0 5px
30	word-wrap: break-word
31
32	&.me
33	flex-direction: row-reverse
34
35	.chatAvatar
36	margin: 5px 0 0 10px !important
37
38	.chatContentWrapper
39	align-items: flex-end
40
41	.chatContent
42	border-radius: 10px 0 10px 10px
43