摘要：作为一名电气工程专业的大学生，最尴尬的事情莫过于——玩游戏正嗨，宿舍突然断电了。为了不再体验这种“黑暗时刻”，我决定把查电费的功能集成到我的个人博客里。本以为只是写个简单的 HTML，结果在伪静态、Caddy 配置和 Typecho 模板机制上足足折腾了一整天。好在，最终效果完美！
🚀 最终效果展示
先别急着看代码，看看这“颜值升级”后的成果：
- 界面：采用 iOS 风格的渐变紫卡片，电量数字超大显示，一目了然。
- 智能：第一次输入楼栋房间后，系统会自动记住。第二次进来，无需点击，直接自动查询并显示结果。
- 极速：去掉了花里胡哨的加载动画，数据秒开。
- 警告：如果电量低于 10 度，卡片会自动变红预警，提醒我该交费了。
🛠️ 技术栈与思路
- 博客程序：Typecho
- 主题：Pure (极简风格)
- 服务器环境：Docker + Caddy (反向代理)
- 核心逻辑：通过 PHP
curl转发学校电费接口（解决跨域问题），前端使用 Fetch API + LocalStorage 实现无刷新查询和本地存储。
💣 踩坑实录（重点来了）
这次开发过程并不是一帆风顺，可以说是一步一个坑，坑坑不一样。
1. 伪静态的“死循环”之谜 🌀
为了让链接好看点（变成 domain.com/dianfei 而不是 domain.com/index.php/dianfei），我开启了 Typecho 的地址重写功能。
结果因为我用的是 Caddy 做反向代理，Typecho 和 Caddy 打架了：
- Caddy 说：“你访问
/dianfei，我帮你偷偷改成/index.php/dianfei发给后台。” - Typecho 说：“你怎么带着
index.php来了？这不符合规范！给我重定向回/dianfei！” - 结果：浏览器就在这两个地址之间无限疯狂跳转，直接报
Too many redirects。
✅ 解决方法：
在 Caddy 里配置 rewrite 规则，同时在 Typecho 后台关闭地址重写（或者让 Caddy 负责重写，Typecho 负责处理），最终实现了完美的短链接访问。
2. “关于我”的幽灵 👻
这是最让我怀疑人生的一个坑。我明明创建了 page-dianfei.php，也把缩略名改成了 dianfei，但每次点进去，显示的都是“关于我”的通用页面内容。
一开始以为是缓存，后来才发现是 Typecho 的模板识别机制问题：
如果不告诉 Typecho 这是一个“自定义模板”，它有时候会因为找不到标识而默认加载通用的 page.php。
✅ 解决方法：
必须在 PHP 文件最开头加上标准的注释声明，格式必须是 @package custom，少一个字符都不行！
<?php
/**
* 查电费专用模板
*
* @package custom
*/
加上这几行后，Typecho 后台的“自定义模板”选项里立马就出现了它！
3. 终端粘贴代码的惨案 💥
最离谱的一个错误。我图省事，直接在 SSH 终端里用 cat > file.php <<EOF 的方式粘贴代码。
结果 Linux 终端把 PHP 代码里的 // 当成了注释，把 $ 当成了变量，直接把代码吞了一半，生成了一个全是乱码的残废文件。怪不得 Typecho 死活认不出来！
✅ 教训：
修改代码还是得用编辑器（比如 FinalShell 自带的图形化编辑功能），千万别迷信命令行直接粘贴复杂代码！
💻 核心代码分享
对于想抄作业的同学，其实原理很简单。利用 Typecho 的独立页面机制 (page-{slug}.php)，我们可以让某个页面完全脱离博客原本的布局，变身成一个 Web App。
前端自动查询逻辑 (JavaScript)：
// 读取本地存储，如果有记录，直接自动查询
function loadMem() {
try{
let l = JSON.parse(localStorage.getItem('df_last'));
if(l && tree[l.b]){
// 自动填充下拉框...
document.getElementById('sel-b').value = l.b;
chgB();
// ...省略部分代码...
// 自动触发点击查询
query();
}
} catch(e){}
}
📝 总结
虽然折腾了一天，但看到手机上那个紫色的卡片亮起电量数字时，成就感是爆棚的。
这就是折腾的乐趣吧——为了省去以后的一点点麻烦，愿意现在通过技术解决所有的大麻烦。
现在，我要去给宿舍充电费了 👋。
什么鬼