跳转至

定制主题

定制对话框

Echo-Live 的演出主体（即 live.html 中的 #echo-live 元素）DOM 结构如下：

#echo-live
.top
.top-left
.top-center
.top-right
.center
.center-left
.center-center
.name
.content.echo-output
.center-right
.bottom
.bottom-left
.bottom-center
.bottom-right
源代码示例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="echo-live">
    <div class="top">
        <div class="top-left"></div>
        <div class="top-center"></div>
        <div class="top-right"></div>
    </div>

    <div class="center">
        <div class="center-left"></div>
        <div class="center-center">
            <div class="name"><!-- 说话人名称 --></div>
            <div class="content echo-output"><!-- 消息内容 --></div>
        </div>
        <div class="center-right"></div>
    </div>

    <div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-center">
            <!-- 源文件中这里默认预制了一列 span 元素以模拟工具栏 -->
        </div>
        <div class="bottom-right"></div>
    </div>
</div>

其中，高亮的 ID 和类名是重要元素，不可删除，除非您不想看见这些元素。除此之外，您可以删改任意元素。

  • .name 是对话框中显示说话人的元素，内容会被替换为说话人名称。
  • .content.echo-output 是对话框中输出消息内容的元素，内容会被替换为消息内容。
  • .bottom-center 默认放置了模拟视觉小说的对话框工具栏元素，仅作装饰之用，不与脚本逻辑绑定。

另外，Echo-Live 预制了一些主题可供您参考：

定制文本样式

Echo-Live 的文本样式与主题样式分离，需要由 res/script/live.js 中的格式解析函数 msgStyleGenerator() 配合。

文本样式目前仍未做好客制化准备，如有需要请您自行阅读相关文件：