ChatRoom.js-在文章流中分享你的聊天记录

<div id="chat"></div>
<script>
    chatroom.init ({
        jsonFilePath: "https://cdata.neosora.cc/chatRoom/chatRoom/test-1.json", 
        chatroomName: "chat",
        MyAvatar: "https://image.neosora.cc/?/images/2024/10/01/8tB9C0gYz5/eb0c7477f97f6d64f86c3cd3b4a1e7a5.jpg",
        title: "Chatroom.js", 
    })
</script>

<div>
    <script src="https://cdn.smartcis.cn/gh/awaae001/htmls@main/ChatRoom/main.js"></script>
    <link rel="stylesheet" href="https://cdn.smartcis.cn/gh/awaae001/htmls@main/ChatRoom/main.css">

    <!--foo图标库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" integrity="sha512-ZfKn7az0YmtPUojZnRXO4CUdt3pn+ogBAyGbqGplrCIR5B/tQwPGtF2q29t+zQj6mC/20w4sSl0cF5F3r0HKSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</div>

<div id="chat"></div>
<script>
    chatroom.init ({
        jsonFilePath: "https://cdata.neosora.cc/chatRoom/chatRoom/test-1.json",  
        chatroomName: "chat",
        MyAvatar: "https://image.neosora.cc/?/images/2024/10/01/8tB9C0gYz5/eb0c7477f97f6d64f86c3cd3b4a1e7a5.jpg",  
        title: "Chatroom.js", 
        hideAvatar: false, 
    })
</script>

[
  {
    "name": "花露水|liushen.top",
    "content": "这是一个 聊天记录分享器，它可以解析聊天记录并生成HTML部分插入文章流",
    "avatar": "3162475700"    
  },
  {
    "name": "me",
    "content": "是的，它还有许多原版没有的功能",
    "avatar": "me"
  },
  {
    "name": "Me",
    "content": "比如：我要提醒某人的@功能： [:call::@花露水::]",
    "avatar": 3271436144
  },
  {
    "name": "花露水|liushen.top",
    "content": "用外挂标签版本修改而来，移除了外挂标签的前置组件，目前只需要你的浏览器可以运行js代码就可以使用<br>改版前在这里：[:a::https://gist.liushen.fun/LiuShen/Hexo-butterfly-tag-chat::]",
    "avatar": "3162475700"
  },
  {
    "name": "me",
    "content": "还支持比如：嵌套的聊天记录",
    "avatar": "123456"
  },
  {
    "name": "me",
    "content": "[:chat:(聊天记录)::https://cdata.neosora.cc/chatRoom/howToAsk/chatroom.json::]",
    "avatar": null
  },
  {
    "name": "Sci_qud",
    "content": "[:image::https://pic.awaae001.top/bg.webp::]",
    "avatar": "3341659982"
  },
  {
      "name": "Sci_qud",
      "content": "还支持分享你喜欢的图片",
      "avatar": "3341659982"
    },
  {
    "name": "me",
    "content": "还有选中的回复功能，虽然这引用的框有点太丑了[:rep:[我]:比如：我要提醒某人的@功能： @花露水::]",
    "avatar": null
  },
  {
    "name": "Bob",
    "content": "[:chat:(聊天记录)::https://cdata.neosora.cc/chatRoom/howToAsk/chatroom.json::]",
    "avatar": "123456"
  },
  {
    "name": "sys",
    "content": "BOb 因为违反社区规范被封禁",
    "avatar": null
  }
]

        content = content.replace(chatPattern, (match, title, jsonFilePath) => {
            const encodedTitle = encodeURIComponent(title);
            const encodedJsonFilePath = encodeURIComponent(jsonFilePath);
            const chatLink = `https://blog.awaae001.top/Chatroom/?jsonFilePath=${encodedJsonFilePath}&title=${encodedTitle}`;
            return `
                <div class="chatQuoteCard">
                    <div class="chatQuoteTetle">
                        <i class="fa fa-database"></i>
                        <span>转发的聊天记录</span>
                    </div>
                    <a class="chatMessage" onclick="openChatWindow('${chatLink}')">转发自：${title}</a>
                </div>
            `;
        });

init: function () {
    const urlParams = new URLSearchParams(window.location.search);

    const containerId = "chatContainer"; 
    const jsonFilePath = urlParams.get("jsonFilePath"); 
    const myAvatar = urlParams.get("myAvatar") <span class="spoiler"> "https://blog.awaae001.top/ico.webp";
    const title = decodeURIComponent(urlParams.get("title") </span> "群聊的聊天记录"); 

<div id="chatContainer"></div>
<script src="/js/page-js/ChatRoom.js"></script>
<link rel="stylesheet" href="/css/page-css/Chatroom.css">