Typecho 独立后台开发文档

Typecho Admin 是一套基于 PHP Bridge + React SPA 架构的现代化独立管理面板。它旨在为 Typecho 提供一个快速、安全且易于扩展的移动端友好后台。

特性亮点： 毫秒级响应、单文件部署、内置 SMTP 邮件服务、支持 Iframe 应用扩展、自动识别 IP 归属地、动态时间问候。

📥 获取源码

本项目完全开源，包含后端 API 网关与前端管理面板。您可以直接下载使用或进行二次开发。

Typecho Admin 完整源码包 (v3.0)

内含：bridge.php (API核心) + admin.html (React控制台)

立即下载

🚀 部署流程

  1. 上传文件：将 bridge.php 和 admin.html 上传至您的 Typecho 网站根目录（必须与 config.inc.php 同级）。
  2. 配置后端：编辑 bridge.php，修改顶部的 API_SECRET 为您的私有密钥。
  3. 访问系统：浏览器访问 https://您的域名/admin.html。
  4. 初始化连接：首次登录输入 API 地址（例如 /bridge.php）和刚才设置的密钥。

⚙️ 后端配置 (bridge.php)

请务必在 bridge.php 文件顶部修改以下关键常量，以确保邮件通知和安全功能正常工作：

// ================= 🔴 用户配置区域 (必填) 🔴 =================

// 1. 安全密钥 (API Key)
// 前端登录凭证，建议设置为 16 位以上随机字符串
define('API_SECRET',    'CHANGE_THIS_TO_YOUR_SECRET_KEY'); 

// 2. SMTP 邮件配置 (用于回复评论通知)
define('SMTP_HOST',     'smtp.qq.com');       // 例如 QQ 邮箱
define('SMTP_PORT',     465);                 // SSL 端口
define('SMTP_USER',     '123456@qq.com');    // 发件人邮箱
define('SMTP_PASS',     '123456');    // 邮箱授权码
define('SMTP_SECURE',   'ssl');               
define('BLOG_NAME',     '我的博客');           // 邮件显示的发件人名称

// 3. 邮件素材 (可选)
define('TPL_LOGO',      'https://.../logo.png'); // 邮件内显示的Logo URL

🧩 扩展应用开发 (重点)

系统内置了强大的 Iframe 扩展机制。您无需修改 React 核心代码，只需在 admin.html 的配置数组中添加链接，即可将第三方工具（如图床、统计、探针）集成到侧边栏。

操作步骤

1. 使用文本编辑器打开 admin.html。

2. 搜索关键字 const APPS = [，找到配置区域。

3. 按照以下格式添加对象：

// ================= 扩展应用配置区 =================
const APPS = [
    { 
        name: '图床管理',                // 侧边栏显示的名称
        url: 'https://你的图床.com', // 目标 URL (必须支持 HTTPS)
        icon: 'fa-solid fa-images'      // 图标 (FontAwesome 类名)
    },
    { 
        name: '流量统计', 
        url: 'https://你的流量统计.com', 
        icon: 'fa-solid fa-chart-line' 
    },
    // 在此处添加更多应用...
];
提示： 修改保存后，刷新浏览器页面即可在侧边栏底部的“扩展应用”分组中看到新入口。点击后将在右侧主区域以无边框 Iframe 形式打开。

🎨 UI 定制指南

admin.html 是一个标准的单页应用，您可以直接修改其中的 CSS 变量和逻辑来适配您的品牌。

1. 修改配色主题

找到 :root 样式定义块，修改 CSS 变量：

:root {
    --primary: #4f46e5;       /* 修改主色调 (Hex颜色) */
    --primary-hover: #4338ca; /* 按钮悬停颜色 */
    --bg-dark: #0f172a;       /* 侧边栏深色背景 */
    /* ...其他变量 */
}

2. 动态问候语逻辑

系统根据当前时间段显示“早上好/晚上好”。如需修改，请搜索函数 getGreeting：

const getGreeting = () => {
    const hour = new Date().getHours();
    if (hour < 6) return '夜深了'; // 0点-6点
    if (hour < 11) return '早上好';
    // ... 自定义您的问候逻辑
};

🔌 API 协议

后端接口路径统一为 bridge.php，通过 GET 参数 action 区分功能。所有请求必须携带 Header 验证。

Headers 要求

  • Content-Type: application/json
  • X-API-KEY: 您的API密钥

常用 Action 对照

  • get_ip_info: 获取 Dashboard 首页的 IP 和地理位置信息。
  • get_pending_count: 获取待审核评论数量。
  • save_content: 新增或更新文章（POST JSON Body）。
  • reply_comment: 回复评论并触发邮件发送。

🛡️ 安全建议

  1. 重命名入口：建议将 admin.html 重命名为生僻文件名（如 console_x86.html），隐藏管理入口。
  2. HTTPS：必须在 HTTPS 环境下使用，防止 API Key 被中间人截获。
  3. 定期轮换 Key：定期修改 bridge.php 中的 API_SECRET。