首页> 软件> SillyTavern酒馆自定义UI样式基础教程

SillyTavern酒馆自定义UI样式基础教程

时间:2025-11-27 21:24:01

SillyTavern酒馆是当下最受欢迎的AI聊天工具之一,不仅聊天互动性和自由性强,用户还能灵活编辑聊天界面样式,从而自定义出不同风格的聊天UI。下面用举例子的方式教大家自定义样式编辑的基础操作。

一、预设的导出与导入

如图两个按钮为导出和导入预设的按钮。

二、CVS及正则简介

1、CVS是以“,”作为分隔符的一种文本格式,适用的场合较多,在这里也首先将CVS格式作为编辑自定义样式的首选。

2、捕获内容的正则,如果不了解正则的用户可以去酒馆看看教程或者问问AI。这里简单说一下就是利用某种规则来将整个文本的部分内容进行捕获然后用一个符号来表示,常见的正则用“( )”包裹的语句就说明这一部分内容是被捕获的然后放于类似$1、$2...的符号里面,$1就表示从第一个捕获组,也就是第一个内容,示例如下:

张三,25,北京,程序员,爱好篮球

李四,30,上海,设计师,喜欢旅游和摄影

王五,28,广州,教师,"喜欢阅读,音乐"

赵六,22,深圳,学生,"擅长编程,篮球"

正则表达式及捕获组演示:

正则表达式及捕获组演示:

正则:(.+?),(d+),(.+?),([^,]+),(.+)

匹配第一行时:

$1 → "张三"

$2 → "25"

$3 → "北京"

$4 → "程序员"

$5 → "爱好篮球"

三、记忆插件的CVS自定样式的使用

例如在这里的示例聊天里面就是这样:

我门可以直接用“,”作为分隔符来进行捕获,这里的正则是这样的:

/,([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*),([^,]*)/g

([^,]*)就是我们要捕获单元格的正则表达式,“,”是用来进行分割匹配的。看上去一大串但是这个是最好理解,也是最简单的编写方式,有多少列就写多少个“,([^,]*)”,注意是“,”和“([^,]*)”。

然后对应的捕获组就是$1、$2、$3...$21,因为我这里有21列,所以就有21个捕获组。接着就可以尝试一下直接在替换框里面输入捕获组的代号,就能在预览中显示了,如图:

这里直接输入捕获组代号就会自动显示出对应的内容,$1对应姓名,$3对应年龄,$7对应爱好。

然而如果想要制作更漂亮和功能更强的样式,就需要编写html和CSS代码了。这里如果没有相关基础的宝宝可以使用其他人的来进行使用或者修改,觉得麻烦的可以将源代码丢给AI,然后告诉它要怎么修改就行,也可以直接让AI帮你写代码。

这里给大家演示一下deepseek怎么帮我制作状态栏的:

1、写出要求,和键名,也就是表头对应在状态栏里面显示的名称,以及捕获组代号,一定要注意提醒AI不影响其他模块的格式,否则加入到自定义样式后可能会造成酒馆页面其他内容出错

2、接着AI就会生成相应的代码

3、点击运行就能看到状态栏的预览,这样就获得了一个初始的状态栏代码了,然后大家可以进一步修改

4、接着将修改好的代码或者其他人的代码放进替换框内

5、可以在样式预览里面看到显示对不对,需要注意样式如果加了一些较为复杂的元素的话,例如自动适应界面宽度、血条等预览界面的布局间隔可能显示的不准确,所以预览查看里面的基本元素是否是对的,然后去聊天界面看看

相关文章: