LiuShen revised this gist 1 year ago. Go to revision
2 files changed, 40 insertions, 8 deletions
chat.js
| @@ -21,7 +21,10 @@ let avatarIndex = 0; | |||
| 21 | 21 | ||
| 22 | 22 | // 生成聊天框的整体结构 | |
| 23 | 23 | function postChatBox(args, content) { | |
| 24 | - | return `<div class="chatBox">${content}</div>`; | |
| 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>`; | |
| 25 | 28 | } | |
| 26 | 29 | ||
| 27 | 30 | // 生成单条聊天内容 | |
| @@ -49,7 +52,7 @@ function postChat(args) { | |||
| 49 | 52 | const chatClass = isMe ? "me" : ""; | |
| 50 | 53 | ||
| 51 | 54 | // 固定的头像链接 | |
| 52 | - | const myAvatar = hexo.theme.config.avatar.img || "https://cdn.qyliu.top/i/2024/03/29/66061417537af.png"; | |
| 55 | + | const myAvatar = "https://cdn.qyliu.top/i/2024/03/29/66061417537af.png"; | |
| 53 | 56 | let avatarUrl; | |
| 54 | 57 | ||
| 55 | 58 | if (isMe) { | |
| @@ -81,4 +84,4 @@ function postChat(args) { | |||
| 81 | 84 | ||
| 82 | 85 | // 注册自定义标签 | |
| 83 | 86 | hexo.extend.tag.register("chat", postChat); | |
| 84 | - | hexo.extend.tag.register("chatBox", postChatBox, { ends: true }); | |
| 87 | + | hexo.extend.tag.register("chatBox", postChatBox, { ends: true }); | |
chat.styl
| @@ -1,8 +1,36 @@ | |||
| 1 | - | .chatBox | |
| 2 | - | padding: 30px | |
| 1 | + | .chatContainer | |
| 2 | + | @extend .cardHover | |
| 3 | + | overflow: hidden | |
| 3 | 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 | |
| 4 | 29 | box-sizing: border-box | |
| 5 | 30 | ||
| 31 | + | +maxWidth768() | |
| 32 | + | padding: 20px 10px | |
| 33 | + | ||
| 6 | 34 | .chatItem | |
| 7 | 35 | display: flex | |
| 8 | 36 | flex-direction: row | |
| @@ -21,12 +49,12 @@ | |||
| 21 | 49 | width: calc(100% - 110px) | |
| 22 | 50 | ||
| 23 | 51 | .chatContent | |
| 24 | - | background: var(--liushen-card-bg) // 这个变量得自己改改 | |
| 52 | + | background: var(--liushen-card-secondbg) | |
| 53 | + | border: 1px solid var(--liushen-card-border) | |
| 25 | 54 | padding: 10px | |
| 26 | 55 | border-radius: 0 10px 10px 10px | |
| 27 | 56 | width: fit-content | |
| 28 | 57 | max-width: 100% | |
| 29 | - | margin: 5px 0 0 5px | |
| 30 | 58 | word-wrap: break-word | |
| 31 | 59 | ||
| 32 | 60 | &.me | |
| @@ -39,4 +67,5 @@ | |||
| 39 | 67 | align-items: flex-end | |
| 40 | 68 | ||
| 41 | 69 | .chatContent | |
| 42 | - | border-radius: 10px 0 10px 10px | |
| 70 | + | background: var(--liushen-card-bg) | |
| 71 | + | border-radius: 10px 0 10px 10px | |
LiuShen revised this gist 1 year ago. Go to revision
2 files changed, 126 insertions
chat.js(file created)
| @@ -0,0 +1,84 @@ | |||
| 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 }); | |
chat.styl(file created)
| @@ -0,0 +1,42 @@ | |||
| 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 | |
Newer
Older