前言
前几个星期看见 纸鹿 佬的聊天记录标签很好看,故有了自己写一个的念头。奈何事情有点多,拖到昨天才有时间来搞这个外挂标签
演示
换了个博客,没有预览了
源码安装
其实实现起来和 纸鹿 佬说的一样,很简单,仅需添加两个文件即可
在 [themes]\butterfly\scripts\tag
目录下新建 chat.js
,写入:
"use strict"; // 生成聊天框的整体结构 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] 存在并进行 trim let name = args[0] ? args[0].trim() : "未知"; let content = args[1] ? args[1].trim() : "无内容"; // 判断是否是“我”的消息 const isMe = name.toLowerCase() === "me"; // 根据传入的名字判断 const chatName = isMe ? "我" : name; // 显示“我”或对方名字 const chatClass = isMe ? "me" : ""; // 自己的消息加上 'me' 类 // 生成 HTML 布局 let result = ""; result += `<div class="chatItem ${chatClass}">`; result += `<b class="chatName">${chatName}</b>`; result += `<div class="chatContent">${content}</div>`; result += `</div>`; return result; } // 注册自定义标签 hexo.extend.tag.register("chat", postChat); hexo.extend.tag.register("chatBox", postChatBox, { ends: true });
在 [themes]\butterfly\source\css\_tags
目录下新建 chat.styl
,写入:
.chatBox padding: 10px width: 100% box-sizing: border-box .chatItem display: flex flex-direction: column justify-content: center align-items: flex-start margin: 10px 0 .chatContent background: #e5e5e5 padding: 10px border-radius: 0 10px 10px 10px max-width: 50% margin: 5px 0 0 5px word-wrap: break-word &.me align-items: flex-end .chatContent border-radius: 10px 0 10px 10px margin: 5px 5px 0 0
执行三件套重启即可
评论区
评论加载中...