AB-Admin：给 Typecho 后台换上 Material Design 3 新装

前言

Typecho 的默认后台界面，怎么说呢——功能齐全，但长相确实停留在上个时代的审美。白底蓝链接、紧凑的表格、没有圆角没有过渡动画，每次写文章都像在填 Excel 表格。

如果你也有同感，那 AB-Admin（Admin Beautify） 可能正是你在找的东西。这是一款基于 Material Design 3 设计体系的 Typecho 后台美化增强插件，号称"可能是史上颜值最高的 Typecho 后台美化插件"。

本文结合我博客上实际安装使用的 v2.1.43 版本，从功能介绍、安装配置到实际体验，完整聊聊这个插件。

插件概览

项目	信息
插件名	AB-Admin（原名 Admin Beautify）
作者	LHL
当前版本	v2.1.43
设计体系	Material Design 3（MD3）
Typecho 版本	基于 1.3.0 开发，兼容 1.2.1
GitHub	github.com/lhl77/Typecho-Plugin-AdminBeautify
配套插件	AB Store（AdminBeautifyStore）插件仓库

核心功能

1. MD3 主题色系统

AB-Admin 不是简单换个 CSS 皮，而是注入了一套完整的 Material Design 3 设计 Token 变量。打开插件代码可以看到，它定义了几十组 CSS 自定义属性：

:root {
    --md-primary: #6750A4;
    --md-on-primary: #FFFFFF;
    --md-surface: #FFFBFF;
    --md-on-surface: #1C1B1F;
    --md-outline: #79747E;
    /* ... 几十个变量 */
}

暗色模式也有一套对应变量（--md-dark-primary、--md-dark-surface 等），切换时自动生效。这意味着插件不仅仅改了配色，而是建立了一套可被其他插件引用的设计系统。

插件内置了多种预设配色方案（紫色、红色、蓝色等），也可以自定义主题色。颜色值会根据亮/暗模式自动生成对应的明暗变体。

2. 亮暗模式切换

通过 <html> 标签的 data-theme="light" 或 data-theme="dark" 属性手动切换，不依赖系统偏好。这比 @media (prefers-color-scheme: dark) 更灵活——你可以白天用亮色、晚上切暗色，不管系统设置是什么。

对于插件开发者来说，暗色样式建议用 [data-theme="dark"] 选择器覆盖，而不是依赖媒体查询：

/* 正确写法 */
.my-card {
    background: var(--md-surface-container-low, #f7f2fa);
}
[data-theme="dark"] .my-card {
    background: var(--md-surface-container-low, #1d1b20);
}

3. 响应式设计

内置移动端适配，在手机上自动切换为顶部折叠菜单模式。后台管理不再只能坐在电脑前操作——手机上也能舒舒服服地审阅评论、管理文章。

4. 自定义登录页背景

支持设置登录页背景图片 URL，并可调整虚化方式和虚化大小。告别千篇一律的默认登录页，给博客一个有辨识度的后台入口。

5. 双布局模式

支持侧边栏布局和顶部导航布局两种后台布局，根据个人习惯自由切换。侧边栏模式更传统，顶部导航模式则更接近现代 Web 应用的风格。

6. AJAX 页面导航

后台页面切换采用 AJAX 方式，不完整重载页面。每次导航后会派发 ab:pageload 事件，让兼容脚本知道页面变了、该重新执行修复了。

// 监听 AB-Admin 的 AJAX 导航事件
document.addEventListener('ab:pageload', function(e) {
    var url = e.detail.url;
    console.log('页面已切换到:', url);
    // 在这里重新绑定 DOM 事件、注入样式等
});

这个设计直接影响了兼容脚本的工作方式——稍后详细说。

开发者 API

AB-Admin 不只是"好看"，它还提供了一套面向插件开发者的 API。

横幅通知：showNotice()

if (typeof AdminBeautify !== 'undefined') {
    AdminBeautify.showNotice('操作成功！', { type: 'success' });
}

调用前记得判断 AdminBeautify 是否存在，避免插件未启用时报错。

对话框 API：alert / confirm / prompt

AB-Admin 覆写了原生的 alert、confirm、prompt，将它们替换为 MD3 风格的异步弹窗。同时也提供了 Promise 化的 API：

// 异步确认框
const result = await AdminBeautify.confirm('确定删除这篇文章？');
if (result) {
    // 用户点了确认
}

// 异步输入框
const name = await AdminBeautify.prompt('请输入分类名称：');

踩坑提醒：覆写后，原生 confirm() 和 prompt() 不再阻塞——它们会立即返回 false / null。如果你的老代码依赖同步返回值，逻辑会被打断，需要改用 Promise API。

兼容性脚本系统

这是 AB-Admin 最有特色的设计之一。插件目录下有个 assets/compat/ 文件夹，专门存放用于修复其他插件排版问题的 JS 脚本：

assets/compat/
├── FuckAdComment.js      # 反广告评论增强
├── Links.js              # Links Plus 友链插件兼容
├── Mirages.js            # Mirages 主题兼容
├── Notice.js             # Notice 通知插件兼容
├── TelegramNotice.js     # Telegram 推送插件兼容
├── TeStore.js            # TeStore 插件仓库兼容
├── Typecho121.js         # Typecho 1.2.1 版本兼容
└── README.md             # 开发文档

工作原理

AB-Admin 自动扫描 compat/ 目录下所有 .js 文件
每个脚本的元数据（名称、简介、适用插件）展示在设置页面
用户可单独启用/禁用每个脚本
支持一键从 GitHub 同步最新兼容脚本
支持添加外部 JS 链接加载额外兼容脚本

脚本开发规范

每个兼容脚本需要在头部注释中声明元数据：

/**
 * @name        MyPlugin 兼容
 * @description 修复 MyPlugin 在 AB-Admin 下的排版问题
 * @plugins     MyPlugin
 * @version     1.0.0
 * @author      YourName
 */

关键注意事项：

必须判断页面：通过 URL 或 DOM 确认是否为目标页面，不要影响其他页面
监听 ab:pageload：由于 AJAX 导航，脚本只在首次加载执行一次，不监听此事件则跳转后修复不生效
保持幂等：修复函数可能被多次调用，避免重复注入；离开目标页面时需清理已注入的样式
兼容暗色模式：同时处理 [data-theme="dark"] 下的显示效果

AB Store：配套插件仓库

AB-Admin 还有一个配套插件 AdminBeautifyStore（AB Store），它是一个 Typecho 插件仓库，可以在后台直接搜索、安装、管理其他插件，不需要再手动下载上传。

AB Store 的主要功能：

在后台浏览插件市场
一键安装/更新插件
支持开发者投稿
与 AB-Admin 深度集成，安装的插件自动适配兼容脚本

两个插件配合使用，Typecho 的插件管理体验直接拉满，从"手动 FTP 时代"进入了"应用商店时代"。

安装方法

方法一：手动安装

前往 GitHub Releases 下载最新版本
解压后将 AdminBeautify 文件夹上传至 /usr/plugins/
进入后台 → 控制台 → 插件 → 启用 AdminBeautify
清除浏览器缓存（重要！）

方法二：通过 AB Store 安装

如果你已经装了 AB Store，可以直接在插件市场搜索安装。

安装后配置

启用插件后进入设置页面，可以配置：

主题色：选择预设方案或自定义颜色
布局模式：侧边栏 / 顶部导航
登录页背景：填入图片 URL，调整虚化参数
兼容脚本：逐个启用/禁用
字体：可选加载 Noto Sans SC
外部 JS：添加额外兼容脚本链接

实际体验

我博客上实际安装的就是 v2.1.43 版本。几个直观感受：

界面：MD3 风格确实好看很多，圆角卡片、层次分明的阴影、流畅的过渡动画，写文章时心情都好了。暗色模式在夜间使用非常舒适，不是简单的黑白反转，而是有一套完整的暗色色板。

性能：主 JS 文件约 200KB，CSS 约 197KB，体积不算小但可以接受。AJAX 导航让后台切换页面几乎无感，比原生整页刷新快不少。

兼容性：内置的兼容脚本覆盖了常见的 Typecho 插件（Notice、Links Plus、TelegramNotice 等），基本开箱即用。如果你用的是不太常见的插件，可能需要自己写兼容脚本，但文档写得很清楚，门槛不高。

稳定性：从 2.1.4x 版本起完全不再加密 JS 代码，透明度很高。作者更新也比较勤快，GitHub 上的 issue 响应及时。

注意事项

清除缓存：启用后如果样式异常，先清浏览器缓存
异步弹窗陷阱：confirm() / prompt() 不再阻塞，老代码需要适配
1.2.1 兼容性：Typecho 1.2.1 下导航栏可能有 CSS 问题，需在设置中开启 1.2.1 兼容脚本
CSS 冲突：如果之前装过其他后台美化插件（如 SimpleAdmin），可能存在样式冲突
弹窗 z-index：第三方插件的全局弹窗建议 z-index 设为 9999 以上（AB 侧边栏约 1000）
字体继承：自定义组件建议用 font-family: inherit 跟随页面字体

总结

AB-Admin 是目前 Typecho 生态里完成度最高的后台美化插件，没有之一。它不只是换了一套皮肤，而是建立了一套完整的设计系统——从 MD3 色彩变量到开发者 API，从兼容脚本机制到 AJAX 导航，每个环节都考虑到了。

如果你还在用 Typecho 默认后台，强烈建议试试。装完之后你会觉得：原来 Typecho 后台也可以这么好看。

GitHub：github.com/lhl77/Typecho-Plugin-AdminBeautify
AB Store：github.com/lhl77/Typecho-Plugin-AdminBeautifyStore
作者博客：blog.lhl.one