酒馆登录页美化分享 | 酒馆

要美化登录页，首先要有登录页。只有多用户模式才有登录页，默认模式和单用户模式是没有的。

相关文章：酒馆开启多用户模式

如何稳定进入登录页？在多用户模式下，浏览器可能会记住登录状态从而跳过登录页。你可以在酒馆网址后面加上/login来强制进入登录页，以便测试美化效果。

美化登录页的风险可能带来更新相关的风险，如果官方更新了登录页本身或相关接口代码，可能导致无法自动更新或更新后的登录页功能出现问题，届时需手动解决。如果你了解，并且认为自己有一定解决问题的能力，那么请继续。

美化效果对比

美化前

美化后

账号密码版
美化后账号密码版登录页
用户列表版
美化后用户列表版登录页

准备工作

下载美化文件：
- 海外下载：点击下载美化文件压缩包
- 大陆下载：复制下面地址到浏览器打开
```
https://gitee.com/canaan723/st-tools/raw/main/%E9%85%92%E9%A6%86%E7%99%BB%E5%BD%95%E9%A1%B5%E7%BE%8E%E5%8C%96.zip
```

解压文件： 解压后，你会得到一个名为custom的文件夹，其结构如下：

└── 📁 custom 
    ├── 📁 images 
    │   └── 📄 background.webp
    └── 📄 login.html

操作步骤

场景一：Docker 部署的多用户模式

如果你是跟着我的教程部署的云酒馆并且选择了多用户模式，那么就看这里无误。

在1Panel中进入容器 - 编排页面，点击编排目录列的文件夹图标打开酒馆根目录。
点击上传按钮，将解压得到的custom文件夹整个拖入上传列表（或点击按钮手动选择），然后确认。
1Panel上传文件夹
回到容器 - 编排页面，点击编辑。

找到volumes部分，将下面这两行内容添加进去。

- "./custom/login.html:/home/node/app/public/login.html"
- "./custom/images:/home/node/app/public/images"

添加位置无所谓，只要在volumes内部并且和其他原有项的缩进对齐即可。例如，加在最后：

# ...
volumes:
  - "./:/home/node/app/config:Z"
  - "./data:/home/node/app/data:Z"
  - "./plugins:/home/node/app/plugins:Z"
  - "./public/scripts/extensions/third-party:/home/node/app/public/scripts/extensions/third-party:Z"
  - "./custom/login.html:/home/node/app/public/login.html"
  - "./custom/images:/home/node/app/public/images"
restart: unless-stopped
# ...

点击确定保存。打开登录页即可看到效果，一般无须重启，如果看不见那就重启一下试试。

场景二：Git 部署的多用户模式

适用于 Linux 云服务器、安卓 Termux、Windows 等环境通过 Git 部署的情况。

进入 SillyTavern 根目录下的public目录中。
将原有的login.html文件替换成美化包中的同名login.html文件。
将美化包中的images文件夹放入public目录。
完成。打开登录页即可看到效果，一般无须重启，如果看不见那就重启一下试试。