这可能是史上颜值最高的 Typecho 后台美化插件

🎨 Admin Beautify (原Login Beautify)

Typecho 后台美化插件

✨ 功能特性

• 🎨 Material Design 3 风格 — 全面采用 MD3 设计规范
• 🌈 7 种主题色 — 紫、蓝、青、绿、橙、粉、红，一键切换
• 🌗 暗色模式 — 支持亮色 / 暗色 两种模式
• ✨ 过渡动画 — 丝滑的界面过渡动画，可开关
• 📌 导航栏位置 — 支持侧边栏（默认）和顶部导航栏两种布局

• 🔐 登录页美化 — 独立的登录页面美化，支持：

  • 12+ 配色预设方案（紫、蓝、粉、绿、橙、红、青、靛蓝、日落渐变、海洋渐变等）
  • 自定义主色 / 辅色
  • 背景图片 + 可调虚化效果
  • 站点名称显示 / 隐藏
  • 独立的暗色模式控制
  • 自定义 CSS / JS 注入
• ⚡ AJAX 导航 — 无刷新页面切换，后台操作更流畅
• 📱 PWA 响应式 APP — 安装到您的电脑/手机，流畅管理博客 (v2.1.0 加入)
• 🧩 兼容脚本设计 — 自动修复其他插件的排版和功能 (v2.1.0 加入)

📦 安装方法

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

/usr/plugins/

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

📸 截图预览

首页	插件管理	个人设置

顶部导航栏（原版）	文章编辑页面	文章管理

插件仓库	移动端导航栏

❓ 常见问题

Q: 支持哪些版本的 Typecho？

本插件基于 Typecho 1.3.0 设计开发，建议使用该版本或更高版本。

Q: Typecho 1.2.1兼容吗？

已写 Typecho 1.2.1 兼容脚本(目前不够完善)，请在 插件设置-兼容脚本 中开启，如果没有该脚本请点击同步Github按钮。

Q: 启用后后台样式异常怎么办？

请先清除浏览器缓存，确保加载最新的 CSS/JS 文件。如果仍有问题，请检查是否与其他后台美化插件冲突。

Q: 移动端显示效果如何？

插件内置了响应式设计，移动端会自动切换为顶部折叠菜单模式。

Q: 如何自定义登录页背景？

在插件设置中填入背景图片的 URL，并可调整虚化方式和虚化大小。

🧩 兼容性脚本开发文档

目录:/asset/compat,此目录存放用于兼容其他 Typecho 插件的 JS 脚本文件。

工作原理

• AdminBeautify 会自动扫描本目录下的所有 .js 文件
• 每个脚本的 元数据（名称、简介、适用插件等）将展示在 AdminBeautify 设置页面中
• 用户可在设置页面中 单独启用/禁用 每个脚本
• 每个 JS 文件应自行判断当前页面是否需要执行（通过 URL、DOM 等），避免影响其他页面
• 脚本在每次页面加载时执行一次（含 AdminBeautify AJAX 导航，见下文）
• 用户还可以在设置面板中添加 外部 JS 文件链接 来加载额外的兼容脚本

元数据格式（必须）

每个 JS 文件的 头部注释 中必须包含以下 @tag 元数据，AdminBeautify 会解析并展示：

/**
 * @name        脚本名称
 * @description 脚本简介说明
 * @plugins     Plugin1, Plugin2
 * @version     1.0.0
 * @author      作者名
 */

脚本结构

脚本模板

AdminBeautify 使用 AJAX 进行后台页面导航，不会完整重载页面。脚本只在首次页面加载时执行一次，若不处理 ab:pageload 事件，从其他页面 AJAX 跳转过来时修复将不会生效。

ab:pageload 事件说明：

注意：ab:pageload 在每次 AJAX 导航后均会触发，包括 离开 目标页面时。修复函数应通过 URL 判断当前是否处于目标页面，并在离开时清理已注入的样式（保持幂等）。

/**
 * @name        MyPlugin 兼容
 * @description 修复 MyPlugin 在 AdminBeautify 下的排版问题
 * @plugins     MyPlugin
 * @version     1.0.0
 * @author      YourName
 */
(function () {
    'use strict';

    var STYLE_ID = 'ab-compat-myplugin';

    // ── 核心修复函数（幂等，可重复调用）
    function applyFix(url) {
        var isTarget = (url || '').indexOf('panel=MyPlugin') !== -1;

        if (!isTarget) {
            // 离开目标页面时清理已注入的样式
            var old = document.getElementById(STYLE_ID);
            if (old) old.remove();
            return;
        }

        // 注入修复样式（幂等：已存在则跳过）
        if (!document.getElementById(STYLE_ID)) {
            var style = document.createElement('style');
            style.id = STYLE_ID;
            style.textContent = '/* your CSS fixes */';
            document.head.appendChild(style);
        }

        // 其他 DOM 修复操作...
    }

    // ── 初始执行（首次页面加载）
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () {
            applyFix(window.location.href);
        });
    } else {
        applyFix(window.location.href);
    }

    // ── 监听 AdminBeautify AJAX 导航事件 （必须，否则脚本不会生效）
    // e.detail.url 是导航目标 URL；此时 document.title 和 DOM 主内容区已替换完毕。
    document.addEventListener('ab:pageload', function (e) {
        var url = (e && e.detail && e.detail.url) ? e.detail.url : window.location.href;
        applyFix(url);
    });
})();

注意事项

1. 必须判断页面：每个脚本必须先检测当前 URL 或 DOM，确定是目标页面才执行
2. 支持 AJAX 导航：监听 ab:pageload 事件以响应 AdminBeautify 的 AJAX 页面切换（推荐）
3. 保持幂等：修复函数可能被多次调用（首次加载 + 每次 AJAX 导航），需避免重复注入；离开目标页面时应清理已注入的样式
4. 使用 IIFE：用 (function(){ ... })() 包裹，避免全局变量污染
5. 使用 'use strict'：启用严格模式
6. 兼容暗色模式：如有样式修复，注意处理 [data-theme="dark"]
7. 可用 CSS 变量：AdminBeautify 已定义大量 MD3 CSS 变量，如 --md-primary、--md-surface 等