内置第三方库
提示
请务必先阅读如何正确使用酒馆助手
Font Awesome
Font Awesome 网站内有非常多图标可供你使用
示例: 电脑图标
html
<html>
<body>
<i class="fa-solid fa-laptop-code"></i>
</body>
</html>JQuery
用 $ 变量访问. 通过它, 你可以很方便地设置界面 DOM 元素.
示例: 向 body 末尾添加一行文本
html
<html>
<body>
<script>
const variables = {神乐光: {好感度: 5}};
$("body").append($("<p></p>").text(JSON.stringify(variables)));
</script>
</body>
</html>JQuery UI
通过 JQuery UI, 你可以很方便地设置界面 DOM 元素可以如何被交互.
示例: 向 body 末尾添加一行可以拖动的文本
html
<html>
<body>
<div id="draggable" class="ui-widget-content">
<p>随意拖动我</p>
</div>
<script>
$(document).ready(function () {
$("#draggable").draggable();
});
</script>
</body>
</html>jquery-ui-touch-punch
修复 jquery-ui 在移动端无法正常使用的问题.
Lodash
用 _ 变量访问. 通过它, 你可以很方便地对 Array、Object 等类型进行操作.
示例
html
<html>
<body>
<script>
const array = _.uniq([1, 3, 2, 3, 1, 4, 5, 4]);
// => array == [1, 3, 2, 4, 5]
$("body").append($("<p></p>").text(JSON.stringify(array)));
</script>
</body>
</html>html
<html>
<body>
<script>
const result = {a: 1, b: 2};
const source = {b: 3, c: 4};
_.merge(result, source);
// => result == {a: 1, b: 3, c: 4}
$("body").append($("<p></p>").text(JSON.stringify(result)));
</script>
</body>
</html>Pixi.JS
用 PIXI 变量访问. 通过它, 你可以很方便地创建 2D 游戏界面、live2d 立绘等.
tailwindcss
tailwindcss 提供了很多原子化的样式, 你可以很方便地设置界面样式.
html
<div class="flex flex-col items-center p-7 rounded-2xl">
</div>toastr
通过 toastr, 你可以像酒馆内置报错消息那样弹出成功、提示、警告、错误消息.
示例
html
toastr.error('内容', '标题');Vue 和 VueRouter
用 Vue 和 VueRouter 变量访问. 让界面书写变得异常简单, 具体请参考官方文档或如何正确使用酒馆助手中模板的示例.
YAML
用 YAML 变量访问. 允许你像 JavaScript 内置的 JSON 那样解析 yaml 语法.
示例
html
<html>
<body>
<script>
const variables =
{
角色变量:
{
爱城华恋: {
好感度: 10
},
神乐光: {
好感度: 5
},
}
}
$("body").append($("<p></p>").text(YAML.stringify(variables)));
</script>
</body>
</html>html
<html>
<body>
<script>
const variables = `
角色变量:
爱城华恋:
好感度: 10
神乐光:
好感度: 5
`
$("body").append($("<p></p>").text(JSON.stringify(YAML.parse(variables))));
</script>
</body>
</html>zod
用 z 变量访问. 允许你简单地解析 JSON 等数据为特定类型:
示例
ts
// 定义一个手机消息数据类型
type PhoneMessage = z.infer<typeof PhoneMessage>;
const PhoneMessage = z.object({
name: z.string() // `name` 是一个字符串
.catch('络络'), // 如果 AI 错误输出了数字之类的, 用 '络络'
content: z.string()
.default('络络'), // 如果 AI 忘了输出 `content`, 用 '你好',
reply_count: z.number().min(1), // 至少有一条回复
time: z.iso.time(),
});
const data = JSON.parse(/*假设你从 AI 回复中提取出了一条手机消息*/);
const phone_message = PhoneMessage.parse(message);
console.info(data);
// >> { name: '络络', content: '你好', reply_count: 1, time: '06:15' }
// 如果解析失败, 将会报错
// >> 无效输入: 期望 string, 实际接收 undefined