互动版MomoTalk测试页

Koistone Team2024-10-072024-10-11

网页版MomoTalk的测试页面，功能仍在制作中

测试页不保证可读性，如果需要学习请到【笔记】如何在网页实现类似MMTK的效果

项目简介

在网页上实现聊天气泡，并且可以仿照游戏中momotalk的样式制作可以互动的版本。

使用Tailwind CSS 和 daisyUi实现。

按照官网流程安装完之后，就可以实现网页聊天气泡的效果了（也可以用其他的样式）。

daisyUi有以下几个样式可供参考：

与图像聊天：

<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://bu.dusays.com/2024/10/04/66ffaa05a654c.jpg" />
    </div>
  </div>
  <div class="chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
</div>
<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://bu.dusays.com/2024/10/04/66ffaa05a654c.jpg" />
    </div>
  </div>
  <div class="chat-bubble">It was you who would bring balance to the Force</div>
</div>
<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://bu.dusays.com/2024/10/04/66ffaa05a654c.jpg" />
    </div>
  </div>
  <div class="chat-bubble">Not leave it in Darkness</div>
</div>

It was said that you would, destroy the Sith, not join them.

It was you who would bring balance to the Force

Not leave it in Darkness

聊天开始和聊天结束：

<div class="chat chat-start">
  <div class="chat-bubble">
    It's over Anakin,
    <br />
    I have the high ground.
  </div>
</div>
<div class="chat chat-end">
  <div class="chat-bubble">You underestimate my power!</div>
</div>

It's over Anakin,
I have the high ground.

You underestimate my power!

使用页眉和页脚：

<div class="chat chat-start">
  <div class="chat-header">
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hours ago</time>
  </div>
  <div class="chat-bubble">You were the Chosen One!</div>
  <div class="chat-footer opacity-50">Seen</div>
</div>
<div class="chat chat-start">
  <div class="chat-header">
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">2 hour ago</time>
  </div>
  <div class="chat-bubble">I loved you.</div>
  <div class="chat-footer opacity-50">Delivered</div>
</div>

带时间和发送效果（排版错误）

Obi-Wan Kenobi 2 hours ago

You were the Chosen One!

Obi-Wan Kenobi 2 hour ago

I loved you.

与图像、页眉和页脚聊天:

<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://bu.dusays.com/2024/10/04/66ffaa05a654c.jpg" />
    </div>
  </div>
  <div class="chat-header">
    Obi-Wan Kenobi
    <time class="text-xs opacity-50">12:45</time>
  </div>
  <div class="chat-bubble">You were the Chosen One!</div>
  <div class="chat-footer opacity-50">Delivered</div>
</div>
<div class="chat chat-end">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full">
      <img
        alt="Tailwind CSS chat bubble component"
        src="https://bu.dusays.com/2024/10/04/66ffaa05a654c.jpg" />
    </div>
  </div>
  <div class="chat-header">
    Anakin
    <time class="text-xs opacity-50">12:46</time>
  </div>
  <div class="chat-bubble">I hate you!</div>
  <div class="chat-footer opacity-50">Seen at 12:46</div>
</div>

出于一些未知的原因，时间和昵称并没有很好的放在一起

Obi-Wan Kenobi 12:45

You were the Chosen One!

Anakin 12:46

I hate you!

换一种方法，使用chat-container把文本包起来居中

shrimp

You were the Chosen One! It's your destiny.

I hate you!
You were supposed to destroy the Sith, not join them!

HTML 结构：

在 Hexo 文章中使用以下结构来显示聊天气泡：

<div class="chat-container">
    <div class="chat chat-start">
        <div class="chat-header">shrimp</div>
        <div class="chat-image">
            <img src="left-avatar-url.jpg" alt="头像">
        </div>
        <div class="chat-bubble">
            你的消息内容在这里！
        </div>
    </div>

  <div class="chat chat-end">
        <div class="chat-bubble">
            你的消息内容在这里！
        </div>
        <div class="chat-image">
            <img src="right-avatar-url.jpg" alt="头像">
        </div>
    </div>
</div>

CSS 代码：
以下是用于样式化聊天气泡的 CSS 代码：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* 背景颜色 */
}

.chat-container {
    max-width: 700px; /* 限制最大宽度 */
    margin: 0 auto; /* 居中 */
}

.chat {
    display: flex; /* 使用 flexbox 布局 */
    align-items: flex-start; /* 让头像与气泡顶部对齐 */
    margin-bottom: 15px; /* 添加底部间距 */
}

.chat-start {
    justify-content: flex-start; /* 左对齐 */
}

.chat-end {
    justify-content: flex-end; /* 右对齐 */
}

.chat-image {
    margin-right: 10px; /* 头像和气泡之间的间距 */
}

.chat-bubble {
    color: white; /* 字体颜色 */
    border-radius: 15px; /* 圆角 */
    padding: 10px 15px; /* 内边距 */
    max-width: 100%; /* 气泡最大宽度 */
    word-wrap: break-word; /* 自动换行 */
}

.chat-start .chat-bubble {
    background-color: #4c5b70; /* 左侧气泡颜色 */
}

.chat-end .chat-bubble {
    background-color: #4a8aca; /* 右侧气泡颜色 */
}

.chat-image img {
    width: 60px; /* 头像宽度 */
    height: 60px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
}

.chat-header {
    font-weight: bold; /* 粗体昵称 */
    color: black; /* 字体颜色 */
    margin-bottom: 3px; /* 与气泡的间距 */
    align-self: flex-start; /* 左对齐昵称 */
}

重要提示：

    左边（发送者）的消息： 在气泡上方添加 chat-header 用于显示发送者的昵称（如 "shrimp"），并与气泡对齐。
    头像大小： 头像宽高为 60px，在左侧显示，同时右侧（自己）的头像也在气泡旁边。
    颜色区别： 左边气泡颜色为 #4c5b70，右边气泡颜色为 #4a8aca，气泡内文字颜色为白色。
    对齐： 左边的聊天气泡（chat-start）左对齐，右边的气泡（chat-end）右对齐。
    最大宽度： 聊天气泡有最大宽度 100%，可以容纳较长的消息内容，并支持自动换行。

这回我们使用文本气泡包住图片和文本，会发现文本是往上走的

shrimp

这是第一句话。
这是第二句话，它会自动换行，且不包含头像。
这是第三句话，继续自动换行。

这是右侧消息的内容。它也可以换行，继续展示内容。

shrimp

这是左侧消息的内容。