🎨 Login Beautify
Typecho 登录界面美化插件
✨ 功能特性
- 🎨 13 种预设配色
紫、蓝、粉、绿、橙、红、青、靛蓝等多种颜色方案 - 🌓 深色 / 亮色主题
支持自动跟随系统、手动切换、默认模式 - 🖼️ 自定义背景
支持图片背景 + 虚化效果（filter / backdrop） - 👀 实时预览
设置页面实时预览效果，所见即所得 - 🎯 Material Design
遵循 Material Design 3 设计规范 - 💻 响应式布局
完美适配桌面端和移动端 - ⚡ 轻量高效
纯前端实现，无数据库操作 - 🔧 高度自定义
支持自定义 CSS / JavaScript - 🔄 自动更新检测
自动检测 GitHub 最新版本
📦 安装方法
- 前往 GitHub Releases 下载最新版本
- 解压后将
LoginBeautify文件夹上传至
/usr/plugins/- 后台进入
控制台 → 插件 → 启用 LoginBeautify
🎯 使用说明
1️⃣ 配色方案
- 内置 13 种预设配色
- 支持主色 + 辅色渐变
- 也可自定义颜色值
2️⃣ 背景设置（可选）
- 填写背景图片 URL 或本地路径
虚化方式：
- 不虚化
- filter 模糊
- backdrop-filter 磨砂
- 模糊强度：0 ~ 50px
3️⃣ 主题模式
- 自动跟随系统（推荐）
- 强制亮色 / 暗色
- 可显示或隐藏主题切换按钮
4️⃣ 其他功能
- 显示 / 隐藏站点名称
- 自定义 CSS
- 自定义 JavaScript
📸 界面预览
登录页面
| 亮色模式 | 暗色模式 |
|---|---|
|  |
背景效果
| 图片背景 | 图片背景+虚化 |
|---|---|
 |  |
设置页面
| 插件配置页 | 实时预览功能 |
|---|---|
 |  |
❓ 常见问题
插件启用后没有效果？
- 确认插件已启用
- 清空浏览器缓存
- Typecho 版本 ≥ 1.2
- 检查浏览器控制台是否有 JS 报错
自定义 CSS 不生效？
请提高优先级：
.lb-card {
border-radius: 30px !important;
}修改登录按钮文字
在 自定义 JavaScript 中添加：
document.addEventListener('DOMContentLoaded', function () {
var btn = document.querySelector('.lb-submit input[type="submit"]');
if (btn) {
btn.value = '立即登录';
}
});背景虚化方式说明
- filter: blur
性能好，兼容性强 - backdrop-filter
磨砂玻璃效果，部分浏览器不支持 - 不虚化
图片保持清晰
使用本地图片作为背景
/usr/uploads/bg.jpg或完整地址：
https://your-domain.com/images/bg.jpg🛠 技术信息
- 后端：PHP 7.0+
- 前端：原生 JavaScript
- 样式：CSS3（CSS Variables + Flexbox）
- 设计规范：Material Design 3
📝 更新日志
v1.0.0（2026-02-07）
- 🎉 首次发布
- ✨ 13 种配色方案
- 🌓 深色 / 亮色主题
- 🖼️ 自定义背景
- 👀 实时预览
- 📱 移动端适配
💖 支持作者
- ⭐ Star 项目
- 🐛 反馈问题
- 💡 提出建议
采用 CC BY-NC-SA 4.0 协议授权，转载请注明来源。
