前言
前几个星期看见 纸鹿 佬的聊天记录标签很好看,故有了自己写一个的念头。奈何事情有点多,拖到昨天才有时间来搞这个外挂标签
演示
换了个博客,没有预览了
源码安装
其实实现起来和 纸鹿 佬说的一样,很简单,仅需添加两个文件即可
在 [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
执行三件套重启即可

评论区
评论加载中...