前言

前几个星期看见 纸鹿 佬的聊天记录标签很好看，故有了自己写一个的念头。奈何事情有点多，拖到昨天才有时间来搞这个外挂标签

演示

示例源码
1
2
3
4
5
6
{% chatBox %}

{% chat test,content %}
{% chat me,content %}

{% endchatBox %}
渲染效果
test
content
我
content

源码安装

其实实现起来和 纸鹿 佬说的一样，很简单，仅需添加两个文件即可

在 [themes]\butterfly\scripts\tag 目录下新建 chat.js ，写入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
"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 ，写入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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

执行三件套重启即可