🎨 Login Beautify

Typecho 登录界面美化插件

[github repo="lhl77/Typecho-Plugin-LoginBeautify" /]

✨ 功能特性

• 🎨 13 种预设配色
  紫、蓝、粉、绿、橙、红、青、靛蓝等多种颜色方案
• 🌓 深色 / 亮色主题
  支持自动跟随系统、手动切换、默认模式
• 🖼️ 自定义背景
  支持图片背景 + 虚化效果（filter / backdrop）
• 👀 实时预览
  设置页面实时预览效果，所见即所得
• 🎯 Material Design
  遵循 Material Design 3 设计规范
• 💻 响应式布局
  完美适配桌面端和移动端
• ⚡ 轻量高效
  纯前端实现，无数据库操作
• 🔧 高度自定义
  支持自定义 CSS / JavaScript
• 🔄 自动更新检测
  自动检测 GitHub 最新版本

📦 安装方法

1. 前往 GitHub Releases 下载最新版本
2. 解压后将 LoginBeautify 文件夹上传至

/usr/plugins/

3. 后台进入
   控制台 → 插件 → 启用 LoginBeautify

🎯 使用说明

1️⃣ 配色方案

• 内置 13 种预设配色
• 支持主色 + 辅色渐变
• 也可自定义颜色值

2️⃣ 背景设置（可选）

• 填写背景图片 URL 或本地路径

• 虚化方式：

  • 不虚化
  • filter 模糊
  • backdrop-filter 磨砂
• 模糊强度：0 ~ 50px

3️⃣ 主题模式

• 自动跟随系统（推荐）
• 强制亮色 / 暗色
• 可显示或隐藏主题切换按钮

4️⃣ 其他功能

• 显示 / 隐藏站点名称
• 自定义 CSS
• 自定义 JavaScript

📸 界面预览

登录页面

亮色模式	暗色模式

背景效果

图片背景	图片背景+虚化

设置页面

插件配置页	实时预览功能

❓ 常见问题

插件启用后没有效果？

1. 确认插件已启用
2. 清空浏览器缓存
3. Typecho 版本 ≥ 1.2
4. 检查浏览器控制台是否有 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 项目
• 🐛 反馈问题
• 💡 提出建议
  [github repo="lhl77/Typecho-Plugin-LoginBeautify" /]