chat.js
· 2.8 KiB · JavaScript
Orginalformat
/**
* 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) {
const title = args[0] ? args[0].trim() : "群聊的聊天记录"; // 获取标题
const titleHtml = title ? `<div class="chatBoxTitle"><i class="fa-solid fa-angle-left"></i><span class="chatTitleText">${title}</span><div class="chatBoxIcons"><i class="fa-solid fa-user"></i><i class="fa-solid fa-bars"></i></div></div>` : ""; // 生成标题 HTML
const contentHtml = `<div class="chatBox">${content}</div>`
return `<div class="chatContainer">${titleHtml}${contentHtml}</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 = "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 | const title = args[0] ? args[0].trim() : "群聊的聊天记录"; // 获取标题 |
| 25 | const titleHtml = title ? `<div class="chatBoxTitle"><i class="fa-solid fa-angle-left"></i><span class="chatTitleText">${title}</span><div class="chatBoxIcons"><i class="fa-solid fa-user"></i><i class="fa-solid fa-bars"></i></div></div>` : ""; // 生成标题 HTML |
| 26 | const contentHtml = `<div class="chatBox">${content}</div>` |
| 27 | return `<div class="chatContainer">${titleHtml}${contentHtml}</div>`; |
| 28 | } |
| 29 | |
| 30 | // 生成单条聊天内容 |
| 31 | function postChat(args) { |
| 32 | if (!args || args.length === 0) { |
| 33 | return ""; // 如果参数为空，返回空字符串 |
| 34 | } |
| 35 | |
| 36 | // 合并并拆分参数 |
| 37 | args = args.join(" ").split(","); |
| 38 | |
| 39 | // 确保 args[0] 存在 |
| 40 | let name = args[0] ? args[0].trim() : "未知"; |
| 41 | let content = args[1] ? args[1].trim() : "无内容"; |
| 42 | |
| 43 | // 判断名字是否包含 QQ 号 (例如 June@3526514925) |
| 44 | let qqNumber = null; |
| 45 | if (name.includes("@")) { |
| 46 | [name, qqNumber] = name.split("@"); // 分割名字和 QQ 号 |
| 47 | } |
| 48 | |
| 49 | // 判断是否是我的消息 |
| 50 | const isMe = name.toLowerCase() === "me"; |
| 51 | const chatName = isMe ? hexo.config.author : name; |
| 52 | const chatClass = isMe ? "me" : ""; |
| 53 | |
| 54 | // 固定的头像链接 |
| 55 | const myAvatar = "https://cdn.qyliu.top/i/2024/03/29/66061417537af.png"; |
| 56 | let avatarUrl; |
| 57 | |
| 58 | if (isMe) { |
| 59 | avatarUrl = myAvatar; |
| 60 | } else if (qqNumber) { |
| 61 | // 如果有 QQ 号，拼接头像 URL |
| 62 | avatarUrl = `https://q1.qlogo.cn/g?b=qq&nk=${qqNumber}&s=100`; |
| 63 | } else { |
| 64 | // 如果没有 QQ 号，从预定义的头像数组中分配 |
| 65 | if (!userAvatarMap.has(name)) { |
| 66 | userAvatarMap.set(name, avatars[avatarIndex % avatars.length]); |
| 67 | avatarIndex++; |
| 68 | } |
| 69 | avatarUrl = userAvatarMap.get(name); |
| 70 | } |
| 71 | |
| 72 | // 生成 HTML 布局 |
| 73 | let result = ""; |
| 74 | result += `<div class="chatItem ${chatClass}">`; |
| 75 | result += `<img class="chatAvatar no-lightbox" src="${avatarUrl}">`; // 添加头像 |
| 76 | result += `<div class="chatContentWrapper">`; |
| 77 | result += `<b class="chatName">${chatName}</b>`; |
| 78 | result += `<div class="chatContent">${content}</div>`; |
| 79 | result += `</div>`; |
| 80 | result += `</div>`; |
| 81 | |
| 82 | return result; |
| 83 | } |
| 84 | |
| 85 | // 注册自定义标签 |
| 86 | hexo.extend.tag.register("chat", postChat); |
| 87 | hexo.extend.tag.register("chatBox", postChatBox, { ends: true }); |
chat.styl
· 1.7 KiB · Stylus
Orginalformat
.chatContainer
@extend .cardHover
overflow: hidden
width: 100%
.chatBoxTitle
display: flex
justify-content: flex-start
background: var(--default-bg-color)
padding: 10px 10px
color: var(--white)
display: flex
align-items: center
justify-content: space-between
i
font-size: 16px
margin: 0 10px
.chatTitleText
flex: 1
font-size: 16px
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
.chatBox
padding: 20px 30px
box-sizing: border-box
+maxWidth768()
padding: 20px 10px
.chatItem
display: flex
flex-direction: row
justify-content: flex-start
margin: 20px 0
.chatAvatar
width: 40px
height: 40px
border-radius: 50% !important
margin: 5px 10px 0 0 !important
.chatContentWrapper
display: flex
flex-direction: column
width: calc(100% - 110px)
.chatContent
background: var(--liushen-card-secondbg)
border: 1px solid var(--liushen-card-border)
padding: 10px
border-radius: 0 10px 10px 10px
width: fit-content
max-width: 100%
word-wrap: break-word
&.me
flex-direction: row-reverse
.chatAvatar
margin: 5px 0 0 10px !important
.chatContentWrapper
align-items: flex-end
.chatContent
background: var(--liushen-card-bg)
border-radius: 10px 0 10px 10px
| 1 | .chatContainer |
| 2 | @extend .cardHover |
| 3 | overflow: hidden |
| 4 | width: 100% |
| 5 | |
| 6 | .chatBoxTitle |
| 7 | display: flex |
| 8 | justify-content: flex-start |
| 9 | background: var(--default-bg-color) |
| 10 | padding: 10px 10px |
| 11 | color: var(--white) |
| 12 | display: flex |
| 13 | align-items: center |
| 14 | justify-content: space-between |
| 15 | |
| 16 | i |
| 17 | font-size: 16px |
| 18 | margin: 0 10px |
| 19 | |
| 20 | .chatTitleText |
| 21 | flex: 1 |
| 22 | font-size: 16px |
| 23 | white-space: nowrap; /* 不换行 */ |
| 24 | overflow: hidden; /* 超出部分隐藏 */ |
| 25 | text-overflow: ellipsis; /* 显示省略号 */ |
| 26 | |
| 27 | .chatBox |
| 28 | padding: 20px 30px |
| 29 | box-sizing: border-box |
| 30 | |
| 31 | +maxWidth768() |
| 32 | padding: 20px 10px |
| 33 | |
| 34 | .chatItem |
| 35 | display: flex |
| 36 | flex-direction: row |
| 37 | justify-content: flex-start |
| 38 | margin: 20px 0 |
| 39 | |
| 40 | .chatAvatar |
| 41 | width: 40px |
| 42 | height: 40px |
| 43 | border-radius: 50% !important |
| 44 | margin: 5px 10px 0 0 !important |
| 45 | |
| 46 | .chatContentWrapper |
| 47 | display: flex |
| 48 | flex-direction: column |
| 49 | width: calc(100% - 110px) |
| 50 | |
| 51 | .chatContent |
| 52 | background: var(--liushen-card-secondbg) |
| 53 | border: 1px solid var(--liushen-card-border) |
| 54 | padding: 10px |
| 55 | border-radius: 0 10px 10px 10px |
| 56 | width: fit-content |
| 57 | max-width: 100% |
| 58 | word-wrap: break-word |
| 59 | |
| 60 | &.me |
| 61 | flex-direction: row-reverse |
| 62 | |
| 63 | .chatAvatar |
| 64 | margin: 5px 0 0 10px !important |
| 65 | |
| 66 | .chatContentWrapper |
| 67 | align-items: flex-end |
| 68 | |
| 69 | .chatContent |
| 70 | background: var(--liushen-card-bg) |
| 71 | border-radius: 10px 0 10px 10px |