Typecho 使用 CDN 后台无法登录且跳转错误的解决
前言博客站出现后台登录原地打转以及进行后台某些页面或操作展示登录的问题挺久了。之前根本没想到是CDN的问题，以为是雷池WAF的拦截，但是设置了白名单后仍有问题，就归咎于我是自己把博客代码或配置搞坏了...直到前两天把CDN关掉了，这些问题突然消失了，我才知道这是CDN没配置好的问题。之前也在typecho社区求助过，可能是问法有问题，只得到了一个英文回答，我按此排查后也未果..现在博客的加载速度也是优化的比以前快了很多，控制台和网络请求也没有任何错误。问题描述没有控制台截图，不想再复刻问题了。1. 登录成功后仍返回登录页（循环）登录后台后页面刷新，又回到 /admin/ 登录界面。网络面板可见登录 POST /index.php/action/login 返回 302 跳转到 /admin/。浏览器未能持久化登录所需的 Set-Cookie，后续访问仍是未登录态。2. 已登录，访问后台 plugins.php 却是登录页模板访问 GET /admin/plugins.php 得到 200，但页面内容是登录模板。响应头出现 x-cache: HIT、x-swift-cachetime: 10800、age: 2700，说明该页在边缘被缓存并被直接命中返回。3. 启用/禁用插件时被重定向回登录页原因分析回源 301/302 跟随开启CDN 在边缘节点“自行跟随”源站的 302 跳转，导致该响应中的 Set-Cookie 未返回到浏览器。浏览器拿不到登录 Cookie，自然会回到登录页，形成“登录 → 刷新 → 仍未登录”的循环。后台页面被 CDN 缓存未登录访问后台页返回的是登录模板；一旦被边缘缓存，后续即使已登录也可能命中该缓存，继续看到登录页。正确的 CDN 配置（以阿里云 CDN 为例）原则：后台与动态动作完全不缓存；只缓存静态资源与首页等可缓存页面；任何携带登录 Cookie 的请求都不要缓存。1. 关闭回源 301/302 跟随全局关闭“回源 301/302 跟随”。2. 缓存规则清单（按优先级从高到低）阿里云 CDN 为“权重数值越大优先级越高”，例如：99 > 90 > 10。[权重 99] php → 0 秒（不缓存）[权重 99] /admin/ → 0 秒（不缓存）[权重 99] /index.php/action/ → 0 秒（不缓存）[权重 99] /admin/plugins.php → 0 秒（不缓存）[权重 10] 主题/插件静态资源目录（示例）/usr/themes/handsome/static/ → 1 年/usr/themes/handsome/assets/ → 1 年/usr/plugins/**/static/ → 1 年/usr/uploads/ → 1 年[权重 90] 首页 / → 5–15 分钟确保首页 / 的权重低于后台不缓存规则，避免被覆盖。可选：如需对 archives 等列表/文章页做短期缓存（会影响评论的实时性），为相关目录单独设置几分钟的 TTL。3. Cookie 与缓存键关闭“携带 Cookie 缓存”或开启“带 Cookie 的请求不缓存”。保持“忽略源站不缓存标头”为关闭，尊重源站的 Cache-Control/Set-Cookie。4. 刷新与测试刷新以下路径缓存：/admin/*、/index.php/action/*、/、以及被误缓存的具体页面（如 /admin/plugins.php）。验证要点：登录 POST 的 302 响应能携带并落下登录相关 Set-Cookie；后台页面响应应为 x-cache: MISS 或无 age；首页命中 x-cache: HIT，age 逐步增大，符合设定的过期时间。参考链接阿里云 CDN 帮助文档：配置缓存过期时间结语本问题的本质是“302 跟随吞掉 Set-Cookie”与“未登录模板被缓存”。按上面的两步到位：关闭回源 301/302 跟随 + 后台/动作不缓存，再配合首页的有限时缓存，即可既保证登录态正确，又兼顾前台加速效果。
发现在bing中能搜索到，但没展示完整，可能是第一次发的字太少了。现在用ai重写了，首页也暂时去掉了倒计时，然后等60天的时候我再回来。给handsome主题的首页加一个精美的倒计时组件，支持多种节日倒计时，包括春节、元旦、情人节等。具有现代化的设计风格，完美适配响应式布局和夜间模式。功能特性现代化设计：采用卡片式设计，支持圆角、阴影和渐变效果响应式布局：完美适配手机、平板和桌面设备夜间模式支持：自动适配主题的暗色模式实时更新：每秒自动刷新倒计时高度可定制：支持自定义日期、标题、颜色和样式动画效果：秒数显示带有脉冲动画效果多节日支持：可轻松切换为不同节日的倒计时效果预览已支持响应式和夜间模式。效果如下：快速使用方法一：通过后台设置（推荐）登录您的Handsome主题后台进入 开发者设置 页面找到 首页列表最前方广告位 选项将下方完整代码复制粘贴到该位置保存设置即可方法二：直接编辑主题文件如果熟悉代码编辑，也可以直接编辑主题文件：文件位置：usr/themes/handsome/在首页模板文件中添加代码代码如下：[hide] 2026年 - 春节倒计时 -- 天 -- 时 -- 分 -- 秒 [/hide]
为什么需要插件监控？作为 Typecho 博客的站长，你是否遇到过以下困扰：插件过多导致性能下降：安装了太多插件，不知道哪些在拖慢网站速度数据库臃肿：插件创建的数据表越来越多，数据库变得臃肿不堪内存占用不明：不知道哪些插件占用了大量内存资源插件管理混乱：忘记哪些插件已启用，哪些插件长期闲置PluginMonitor 插件正是为解决这些问题而设计的。核心功能系统信息监控PHP 版本检测：实时显示服务器 PHP 版本信息内存使用监控：当前内存使用量、峰值内存、内存限制数据库大小统计：分别显示插件数据库占用和总数据库大小插件数量统计：已启用/已安装插件数量对比插件状态监控启用状态：清晰显示每个插件的启用/禁用状态版本信息：显示插件版本号和作者信息文件统计：统计每个插件的文件数量空间占用：精确计算每个插件占用的磁盘空间描述信息：显示插件的功能描述智能数据库分析表类型识别：自动区分系统表和插件表存储引擎：显示每个表的存储引擎类型数据行数：统计表中的数据行数表大小：精确计算每个表占用的存储空间安装与使用下载地址[hide]https://github.com/BXCQ/PluginMonitor[/hide]启用插件登录 Typecho 后台进入「控制台」->「插件」找到「插件监控工具」并启用启用后在后台管理菜单中会出现「插件监控」选项使用环境Typecho 版本：1.2.1PHP 版本：8.0 及以上数据库：MySQL配置选项自动刷新设置不自动刷新：手动刷新，节省服务器资源5秒/10秒/30秒/60秒：根据需求设置自动刷新间隔显示选项显示未启用的插件：选择是否在列表中显示未启用的插件数据库表显示范围：仅显示插件创建的表（默认）显示所有表（系统+主题+插件）实际使用效果系统概览使用插件后，可以在一个页面看到：PHP 版本：8.0.15内存使用：45.2MB / 512MB峰值内存：67.8MB插件数据库占用：2.3MB数据库总大小：15.7MB已启用/已安装数量：12 / 25插件列表每个插件都会显示详细信息：插件名称：ModernAdmin - 一个美化 Typecho 后台的插件版本：1.5.1作者：璇状态：已启用文件数：47占用空间：2.1MB数据库表分析插件表：显示插件创建的数据表系统表：Typecho 核心表（comments、contents、metas 等）表大小：精确到字节的存储空间统计界面设计特色响应式设计桌面端：完整的表格显示，信息一目了然移动端：自适应布局，关键信息优先显示深色模式：支持系统深色模式，护眼更舒适用户体验优化固定列宽：防止内容过长影响布局状态标识：用颜色区分插件启用状态悬停提示：鼠标悬停显示详细信息一键刷新：手动刷新按钮，实时更新数据总结PluginMonitor 插件为 Typecho 博客管理带来了全新的体验：全面监控：系统、插件、数据库三位一体监控 直观显示：清晰的数据展示和状态标识 智能分析：自动识别插件表和系统表 性能优化：帮助发现和解决性能问题 开源免费：MIT 协议，完全开源 如果你是 Typecho 博客的站长，强烈推荐安装这个插件。它不仅能让用户更好地了解博客的运行状态，还能帮助优化性能，提升用户体验。本文由 PluginMonitor 插件作者撰写，如有问题欢迎在评论区反馈。
前言在自定义主题的某天，AI摘要突然不显示了，前前后后改了好几次，通过重启插件无数次、移除全部自定义js和css、关闭pjax、一一恢复改过的页面代码，均未果。这次是通过本文第二个方法改好的，所以至今不知道突然不显示的原因。下面是解决AISummary插件的摘要块不显示的三种方案，前提是摘要内容已正确生成且保存。针对handsome主题，其他主题可借鉴思路。技术环境博客系统: Typecho 1.2.1主题: Handsome 10.1.0插件: AISummary v1.1.0解决方案方案一：修改插件核心逻辑直接修改 Plugin.php 中的 customContent 方法，将摘要插入到内容末尾：// 修改前 $content = $summaryString . $content; // 修改后 $content = $content . $summaryString;方案二：主题模板直接集成（推荐）在主题模板文件中直接添加摘要显示逻辑，绕过插件的 customContent 方法。实施步骤在插件设置中将"正文摘要显示样式"设置为"默认"或者"自定义"，推荐设置为自定义。在主题模板中添加摘要显示代码在 usr/themes/handsome/post.php 第74行的 下方添加：[hide] <?php // 添加AI摘要显示 $options = Typecho_Widget::widget('Widget_Options')->plugin('AISummary'); if ($options->summaryStyle !== '0') { $summaryField = $options->field ?: 'summary'; $db = Typecho_Db::get(); $row = $db->fetchRow($db->select('str_value')->from('table.fields')->where('cid = ?', $this->cid)->where('name = ?', $summaryField)); if ($row && !empty($row['str_value'])) { $pureSummary = str_replace("{{text}}", $row['str_value'], $options->prefix); // 根据插件配置选择样式 if ($options->summaryStyle === '1') { // 使用默认引用样式 $summaryString = ' ' . $pureSummary . ' '; } else if ($options->summaryStyle === '2') { // 使用自定义样式，只添加class，让CSS控制样式 $summaryString = ' ' . $pureSummary . ' '; } else { // 默认样式 $summaryString = ' ' . $pureSummary . ' '; } echo $summaryString; } } ?>[/hide]这种方式不依赖于Typecho的钩子系统，直接在主题模板中添加摘要显示代码。方案三：针对开启了前台Vditor解析方式第一种：1、打开文件：usr/themes/handsome/libs/content/PostContent.php2、找到第382行（大约在第380-385行之间）3、将$content = $obj->text;改为$content = $obj->content;4、保存文件$obj->text是vditor原始的Markdown文本，没有经过任何插件处理$obj->content是经过Typecho插件系统处理后的HTML内容，包括AISummary插件的customContent方法添加的摘要通过使用$obj->content，确保所有插件的钩子都能正常工作第二种：在handsome插件后台切换vidtor为typecho自带的即可下面是自定义模板的文章：[post cid="335" /]
概述FriendsRSS 是一款专为 Typecho 博客系统设计的智能友链 RSS/Atom 聚合插件。它能够自动检测、解析和聚合您友链博客的最新文章，通过多种展示方式（短代码、API接口、RSS输出、前台页面）让您的博客成为友圈动态的聚合中心。插件功能核心功能友链来源集成：从 Typecho links 表的指定分类读取友链，自动参与聚合。兼容性增强：当指定分类不存在时，自动获取所有友链，完美兼容只有一种友链的主题博客。排除功能：支持配置排除检测的博客网址，每行一个，支持部分匹配。RSS 自动检测：采用"三轮检测"策略（常用路径/feed和/feed/ → HTML 解析 → 其他常见路径），并对检测结果进行 10天缓存（RSS地址相对稳定）。定时检测功能：支持配置定时检测RSS地址间隔（默认240小时/10天），RSS地址缓存时间自动与定时检测间隔保持一致。定时解析功能：支持配置定时解析间隔（默认6小时），提供独立的定时任务脚本，支持命令行和HTTP调用。手动配置 RSS：后台提供"选择友链 + 输入 RSS 地址"的表单，保存到 rss_config.json 作为覆盖与纠偏。短代码功能：在任意文章或页面中使用 rss 短代码来显示友链RSS聚合内容，支持 limit 参数控制显示文章数量。多格式支持：兼容 RSS 2.0 / Atom 1.0 / RSS 1.0，解析标题、链接、作者、摘要与发布时间等字段。文章聚合与排序：为每个博客限制抓取数量，并按发布时间 倒序 排列，支持聚合总数上限。缓存与并发保护：聚合结果持久化缓存，内置 锁文件 防止并发重复任务；可读取已有缓存以快速展示。日志记录：记录检测、解析与网络状态，便于排查异常与性能问题。输出功能RSS订阅地址：/action/friends-rss?do=rss - 生成标准RSS 2.0格式的聚合订阅源API接口地址：/action/friends-rss?do=page - 返回JSON格式的聚合文章数据前台展示页面：/action/friends-rss?do=pageview - 美观的前台展示页面，支持响应式设计[collapse status="false" title="示例图片查看"][/collapse]管理界面统计卡片：显示友链数量、文章数量、最后更新时间、已配置RSS数量等统计信息操作卡片：定时检测RSS地址：显示当前检测间隔和下次执行时间，提供"立即执行"按钮定时解析RSS内容：显示当前解析间隔和下次执行时间，提供"立即执行"按钮添加RSS地址：手动配置友链RSS地址的表单界面访问地址区块：显示所有可用的访问地址和友链分类信息友链与文章列表：显示友链列表和最新聚合文章，支持RSS配置状态标识日志显示区域：实时显示操作日志，支持自动滚动到最新内容短代码功能基本用法：在任意文章或页面中使用 rss 短代码来显示友链RSS聚合内容参数支持：支持 limit 参数控制显示文章数量块状设计：使用简洁美观的块状设计，包含博客信息、文章标题、摘要等响应式布局：自动适配移动端设备，优化显示效果网络与兼容性优化请求优化：优先使用 cURL，请求超时与重定向受控内容清理：自动清理与修复常见 XML/文本问题、摘要长度截断错误处理：完善的异常处理和日志记录机制并发保护：使用锁文件防止重复任务执行缓存策略：智能缓存管理，支持缓存统计和清理定时任务功能独立脚本：提供 cron.php 独立定时任务脚本HTTP调用：支持通过HTTP请求触发定时任务状态管理：记录定时任务执行状态和下次执行时间安全验证：支持密钥验证防止未授权访问Ajax功能实时检测：支持SSE（Server-Sent Events）实时显示RSS检测进度批量操作：支持批量检测RSS地址和清除缓存进度反馈：实时显示操作进度和结果错误处理：完善的错误处理和用户反馈机制安装与配置将插件文件夹上传到 usr/plugins/ 目录。在 Typecho 后台启用插件 FriendsRSS。在插件设置页配置友链来源、每个博客抓取文章数、聚合总数上限与缓存时间等参数。Github地址：[hide]https://github.com/BXCQ/FriendsRSS[/hide]配置参数说明友链分类：指定需要聚合的友链分组。兼容性说明：Handsome主题：填写"ten"获取全站链接，填写"one"获取内页链接，填写"good"获取推荐链接其他主题：通常留空即可，插件会自动获取所有友链当指定分类不存在时，插件会自动获取所有友链，确保兼容性排除检测的博客网址：每行一个网址，支持部分匹配。例如：example.com - 排除所有包含example.com的友链https://blog.example.com - 排除特定博客留空表示不排除任何友链每个博客文章数：每个博客抓取与展示的文章数量限制。最大文章数：聚合后的文章总数上限。定时解析间隔：定时解析友链RSS的间隔时间（小时），默认6小时，设置为0表示禁用。文章缓存时间会自动与定时解析间隔保持一致。定时检测间隔：定时检测友链RSS地址的间隔时间（小时），默认240小时（10天），设置为0表示禁用。RSS地址缓存时间会自动与定时检测间隔保持一致。启用前台展示：是否开放前台聚合页与 RSS 输出。使用方法检测 RSS：在后台点击"定时检测RSS地址"卡片中的"立即执行"按钮，自动为友链站点识别 RSS/Atom 地址并保存。定时检测：在后台点击"定时检测RSS地址"，按配置的间隔时间自动检测友链RSS地址。手动添加：在"添加 RSS 地址"区域选择目标友链并填写正确的订阅地址后保存。聚合文章：点击"定时解析RSS内容"，按时间排序聚合最新文章并写入缓存。访问输出：RSS订阅地址：/action/friends-rss?do=rssAPI接口地址：/action/friends-rss?do=page（需在设置中启用）前台展示页面：/action/friends-rss?do=pageview（需在设置中启用）性能与稳定性超时控制：为单次请求与连接设置合理超时并限制重定向次数。并发保护：使用锁文件/状态标记避免重复聚合任务并减少服务器压力。分轮检测：优先常用路径，其次 HTML 解析，最后其他常见路径以提升成功率与速度。缓存策略缓存类型缓存时间说明RSS地址缓存与定时检测间隔一致RSS地址相对稳定，与定时检测间隔同步，减少重复检测文章内容缓存与定时解析间隔一致确保定时解析有意义，避免缓存过期后立即重新解析失败结果缓存1小时避免重复请求失败的RSS源，减少服务器压力定时策略配置项默认值说明定时解析间隔6小时定时解析友链RSS的间隔时间，设置为0表示禁用文章缓存时间自动同步与定时解析间隔保持一致，确保定时解析有意义定时检测间隔240小时（10天）定时检测友链RSS地址的间隔时间，设置为0表示禁用RSS地址缓存时间自动同步与定时检测间隔保持一致，减少重复检测实际效果缓存过期时重新执行定时任务执行时缓存刚好过期，获取最新内容设计思路：以"逻辑一致性"为核心，确保定时任务与缓存时间同步，提升用户体验和系统效率。RSS短代码使用基本用法在任何文章或页面中使用 rss 短代码来显示友链RSS聚合内容，使用简洁的块状设计：rss默认显示10篇最新文章，使用块状设计。或者rss limit="5"只显示5篇最新文章。显示内容每个文章块包含：博客信息头部：博客名称、作者信息、发布时间文章标题：可点击跳转到原文文章摘要：自动截取的文章概要（200字符以内）参数说明limit类型: 数字默认值: 10说明: 显示文章的数量注意不要放置多个，会重复显示。设计特点块状设计简洁美观：每篇文章独立成块，清晰区分信息完整：包含博客、作者、时间、标题、摘要视觉层次：合理的间距和颜色搭配悬停效果：鼠标悬停时显示阴影效果响应式设计移动端优化：自动适配小屏幕设备布局调整：移动端下头部信息垂直排列字体缩放：移动端下适当调整字体大小注意事项缓存机制: 短代码使用缓存机制，文章更新可能有延迟性能考虑: 建议在高流量站点限制显示数量（limit参数）样式兼容: 短代码样式已针对常见主题优化，如有冲突可自定义CSS安全性: 所有外部内容都经过HTML转义处理错误处理与兼容性超时处理：如果你的友链过多且开启了CDN，可以在CDN中设置超时时间，从默认的30s到60s或者更高。网络异常与 HTTP 错误：会被记录并跳过，继续处理其他源。XML 内容清理：在解析前进行清理，尽量兼容 RSS 2.0、Atom 1.0 与 RSS 1.0 常见格式。扩展要求：建议启用 cURL、SimpleXML 等常用扩展并确保插件对缓存目录拥有写入权限。更新日志日期版本更新类型变更内容2025/8/31v2.2.1缓存机制修复• 缓存机制修复：修复缓存机制导致RSS配置无法及时更新的问题：增加配置文件时间戳检查，当配置文件比缓存文件更新时自动强制刷新缓存，确保能读取到最新的手动配置RSS地址• 调试信息增强：增强RSS配置读取调试信息：添加详细的配置文件读取日志，特别针对特定友链配置状态的检查和记录，便于问题排查• 思路：以"缓存一致性"为核心，确保配置文件更新后能及时生效，提升手动配置RSS的可靠性2025/8/31v2.2.0配置文件修复• 配置文件修复：修复RSS配置文件和缓存目录缺失导致的配置读取失败问题：在构造函数中自动创建rss_config.json文件和缓存目录，确保系统正常运行• 错误处理完善：完善错误处理机制：增加文件读取、JSON解析和缓存操作的详细错误日志记录，改进后台RSS配置保存逻辑• 思路：以"健壮性优先"为核心，确保插件在各种环境下都能正常工作，提升系统稳定性2025/8/25v2.1.6定时检测RSS功能• 定时检测RSS功能：新增定时检测RSS功能：支持配置定时检测RSS地址间隔（默认240小时/10天），RSS地址缓存时间自动与定时检测间隔保持一致• 定时检测界面：管理界面优化：新增"定时检测RSS地址"操作卡片，显示当前检测间隔和下次执行时间• 按钮简化：移除重复的"手动检测"按钮，只保留"立即执行"按钮，避免功能重复• 缓存策略：缓存策略优化：RSS地址缓存时间从固定7天改为与定时检测间隔同步，提升系统一致性• 短代码文档：新增RSS短代码使用说明，包含基本用法、参数说明、使用示例和设计特点• 思路：以"逻辑一致性"为核心，确保定时检测与RSS地址缓存同步，提升用户体验和系统效率2025/8/25v2.1.0RSS地址检测• RSS地址检测：新增RSS地址检测功能：自动检测友链博客的RSS地址，支持多种常见RSS路径，提供手动添加功能• 管理界面重构：管理界面重构：新增RSS地址管理、检测日志显示、定时任务设置等功能模块• 缓存机制优化：缓存机制优化：RSS地址缓存24小时，RSS内容缓存可配置，提升系统性能• 思路：以"自动化检测"为核心，减少手动配置工作量，提升用户体验2025/8/25v2.1.5友链分类兼容• 友链分类兼容：友链分类兼容性增强：当指定分类不存在时，自动获取所有友链，完美兼容只有一种友链的主题博客• 排除功能：新增排除功能：支持配置排除检测的博客网址，每行一个，支持部分匹配，提供更灵活的友链管理• 分类统计界面：管理界面优化：新增"可用分类"统计卡片，在访问地址区域显示所有可用的友链分类及当前使用状态• 配置界面优化：配置界面优化：友链分类设置项默认值改为空，添加详细的兼容性说明，帮助用户正确配置不同主题的友链• 思路：以"最大兼容性"为核心，确保插件能在各种Typecho主题环境下正常工作，提升用户体验2025/8/25v2.1.4日志显示修复• 日志显示修复：修复日志显示错误：将"用时20s"等错误显示修正为实际请求用时，使用microtime()精确计算请求耗时• 日志自动滚动：管理界面体验优化：日志显示区域自动滚动到最新内容，无需手动滚动查看最新日志• 策略文档：新增缓存策略和定时解析策略表格说明，更直观地展示系统设计思路2025/8/25v2.1.3缓存策略优化• 缓存策略优化：缓存策略优化：RSS地址缓存时间从24小时延长至7天（更符合RSS地址相对稳定的特点），文章内容缓存时间自动与定时解析间隔保持一致，移除独立的缓存时间设置项• 定时解析功能：新增定时解析功能：支持配置定时解析间隔（默认6小时），提供独立的定时任务脚本，支持命令行和HTTP调用• 配置界面简化：简化配置界面：移除"缓存时间"设置项，避免用户困惑，定时解析间隔设置中说明缓存时间会自动同步• 思路：以"逻辑一致性"为核心，确保定时解析与缓存时间同步，提升用户体验和系统效率2025/8/25v2.1.2界面优化• 缓存时间优化：RSS缓存设置优化：将缓存时间单位从秒改为天，默认值从360000秒（100小时）调整为10天，更符合用户使用习惯• 移除超时设置：移除请求超时设置项：删除未使用的timeout配置项，简化插件设置界面• 界面名称优化：管理界面名称优化：将"检测友链RSS"改为"检测友链RSS地址"，"定时解析控制"改为"定时解析RSS内容"，"前台展示页面"改为"前台接口地址"，"预览页面"改为"前台展示页面"• 思路：以"用户体验优化"为核心，简化配置项，统一命名规范，提升界面友好度2025/8/25v2.1.1管理界面优化• 预览页面地址：新增预览页面地址：在访问地址区域添加 /action/friends-rss?do=pageview 预览链接• 管理界面优化：管理界面优化：将定时解析控制块替换解析RSS功能，移除定时任务设置说明，简化操作流程• 移除预览页面块：移除预览页面块：简化管理界面，减少冗余展示区域• 错误日志显示：新增错误日志显示：在管理页面中显示 error.log 日志内容，便于问题排查• 思路：以"简化操作 + 增强监控"为核心，提升管理效率和问题诊断能力2025/8/24v2.0.4UI布局优化• UI布局优化：后台"添加 RSS 地址"区域 UI 调整：输入框与选择框长度比例优化（输入 65% / 选择 30%），取消选择框固定高度，移动端响应式更佳• select对齐修复：解决 Typecho 默认 select 固定高度 28px 导致与输入框不对齐的问题• 思路：表单布局采用 flex，优先保障主要输入区可用性与可读性，减少视觉噪点2025/8/24v2.0.3管理面板重构• 管理面板重构：管理面板重构：新增统计卡片、操作卡片与访问地址区块；友链与文章列表支持状态徽标，信息呈现更直观• 最后更新修复：修复"最后更新"在无缓存时显示 1970 的问题，改为显示"暂无"• 思路：采用 模块化卡片布局，将"检测/解析/添加"动作解耦，提升可维护性与扩展空间2025/8/23v2.0.2锁文件机制• 锁文件机制：新增聚合任务 锁文件 机制；提供缓存清理与缓存统计；聚合结果持久化读取，页面可直接消费缓存• 并发解析修复：修复并发解析导致缓存文件被覆盖/损坏的偶发问题；修复缓存为空时解析流程可能抛错的情况• 思路：从"实时拉取"转为 缓存优先 的数据策略，后台按需触发解析，降低对外部源的耦合与压力2025/8/23v2.0.1三轮RSS检测• 三轮RSS检测：引入 三轮 RSS 自动检测；为检测结果设置 24 小时缓存；细化请求超时与重定向限制，并记录响应头• 链接解析修复：修复部分站点 HTML 中相对链接解析错误；修正 Content-Type 判断大小写不一致导致的识别失败• 思路：采用"快速路径优先 → HTML 解析 → 兜底常见路径"的分轮策略，先提升成功率与速度，再做细化校验2025/8/23v2.0.0解析器升级• 解析器升级：解析器升级：支持 RSS 2.0 / Atom 1.0 / RSS 1.0；清理与截断描述文本；新增 rss_config.json 用于手动配置；按发布时间倒序聚合并限制总量• XML解析修复：修复特殊字符、BOM 与控制字符导致 XML 解析失败的问题；增强 HTML 实体修复• 思路：以"可靠解析"为核心：先清理再解析，最大化容错；将必要的清洗逻辑前置，保证数据质量2025/8/23v1.5.0RSS输出功能• RSS输出功能：提供聚合 RSS 输出 与可选 前台展示页面；后台展示最近文章与来源信息• 时间排序修复：修复文章缺失时间时排序不稳定，统一回退到当前时间• 思路：以 /action/friends-rss 为统一入口，降低主题/路由差异带来的接入成本2025/8/23v1.4.0多源聚合功能• 多源聚合功能：支持多源聚合与发布时间排序；可配置"每博客文章数"与"聚合总数"• 内存优化：优化大列表处理的内存开销，改为先按需切片再渲染• 思路：将"数量限制"前移到聚合阶段，减少后续处理成本2025/8/23v1.3.0摘要截断功能• 摘要截断功能：自动 截断摘要，保证列表简洁可读• HTML清理修复：修复未清理 HTML 标签导致的样式外溢问题• 思路：以摘要优先，保证信息密度与浏览效率2025/8/23v1.2.0手动添加RSS功能• 手动添加RSS功能：后台新增"手动添加 RSS"能力，为自动检测失败站点提供纠偏• JSON读写修复：修复首次保存配置时空文件读取异常，增强 json 读写容错• 思路：自动检测与 人工纠偏 并行，提高覆盖率与准确度2025/8/23v1.1.0性能参数配置• 性能参数配置：增加缓存时间、重定向上限与超时等基础性能参数配置• 超时设置修复：修复部分环境下超时设置不生效的问题• 思路：坚持"可控超时"原则，保证失败快速返回与系统整体可用性2025/8/23v1.0.0初始版本• 初始版本：初始版本：多源 RSS/Atom 聚合、后台基础管理与展示• Bug：无• 思路：提供最小可用集合，优先打通"来源 → 解析 → 聚合 → 展示"的闭环
前言在搭建个人博客时，我们通常需要集成多个统计服务来跟踪网站访问数据，如 Google Analytics、百度统计、51.la、统计鸟、UStat、Umami 等。但面对这些统计脚本，我们经常会遇到以下困惑：应该选择同步安装还是异步安装？统计代码应该放在 还是 底部？不同的选择会如何影响页面性能和数据准确性？本文将从技术原理出发，结合各大统计服务商的官方建议，为您提供清晰的选择策略和最佳实践方案。核心概念：同步 vs 异步安装为什么选择很重要？网页加载统计脚本时面临一个根本矛盾：数据准确性 vs 页面性能。不同的安装方式直接影响：首屏渲染速度：用户看到页面内容的快慢统计数据完整性：能否准确捕获所有访问行为用户体验质量：页面是否流畅无闪烁两种安装方式对比为了帮助您做出正确选择，我们用图表直观对比两种方式：对比维度同步安装 (Synchronous)异步安装 (Asynchronous)加载方式脚本按顺序逐个加载，必须等待前一个完成多个脚本同时并行下载，互不阻塞页面表现用户看到白屏直到关键脚本加载完成页面内容边加载边显示，更快可见加载速度⚠️ 较慢，串行等待✅ 较快，并行处理页面闪烁✅ 无闪烁，内容稳定⚠️ 可能闪烁（A/B测试场景）执行顺序✅ 可控，按加载顺序执行⚠️ 不可预测，完成时间决定适用场景A/B测试、关键业务逻辑一般统计、性能优先网站可视化对比同步安装效果：异步安装效果： 闪烁现象：异步加载时，页面先显示原始内容，脚本加载完成后快速切换到最终内容，形成视觉闪烁。参考资料：SiteSpect - Sync vs Async JavaScript Tags，NotifyVisitors - Synchronous and Asynchronous Scripts技术实现方式对比三种主流加载技术加载技术代码示例执行时机适用场景async 参考：Google Analytics 官方文档百度统计推荐位置：混合部署最佳实践：在 中声明全局变量，在 底部动态加载脚本 参考：百度统计官方文档51.la 统计重要更新：51.la 现已推出 V6 版本，安装方式与 V5 版本有重要不同。V6 版本（最新推荐）推荐位置： 部分（ 标签前）安装方式：同步安装，支持多种安装选项根据官方指南，V6 版本提供以下安装选择：同步安装（推荐）：确保统计准确性，避免页面闪烁异步安装：提升页面加载性能旧式安装：兼容旧版本的安装方式JS文件用：适用于特定技术架构本地化集成：支持本地部署需求 V5 版本（传统方式）推荐位置： 底部官方建议：将统计代码放在接近 的位置 注意：请以 51.la 官方提供的最新安装代码为准，不同版本和不同站点的代码可能有所差异。参考：51.la 官网，51.la V6 使用指南UStat 统计推荐位置： 部分建议做法：使用 async 属性，放在 前 Umami Analytics推荐位置： 部分特点：开源、隐私友好，支持 async defer 统计鸟等其他统计工具推荐位置：根据脚本特性选择原则：异步脚本优先放 ，同步脚本放 底部 使用插件或自定义功能如果主题不支持直接修改，可以：使用统计插件：如 Google Analytics 插件后台自定义代码：在 Typecho 后台的"自定义代码"选项中添加functions.php 注入：通过主题的 functions.php 文件注入脚本缓存和静态化的考虑缓存环境下的脚本加载HTML缓存：不影响脚本的加载和执行顺序CDN缓存：可能影响脚本文件的加载速度，但不改变执行逻辑浏览器缓存：有助于提高脚本加载速度静态化网站的统计脚本对于使用静态化插件的 Typecho 站点：确保统计代码包含在静态化的模板中动态统计功能不受影响，因为执行发生在浏览器端注意更新统计配置后需要重新生成静态文件性能优化建议脚本加载优先级关键统计脚本（如 GA）： + async辅助统计脚本： 底部或延迟加载可选统计脚本：条件加载或懒加载资源合并与优化// 统一的统计脚本管理器 (function() { 'use strict'; // 延迟加载非关键统计脚本 window.addEventListener('load', function() { // 加载 51.la var script51 = document.createElement('script'); script51.src = '//js.users.51.la/YOUR_51LA_ID.js'; document.head.appendChild(script51); // 加载其他统计脚本 // ... }); })();错误处理和回退方案// UStat脚本错误处理加载，由于之前使用这个出现过问题导致页面某些资源被卡10s，所以就用这个做示例 最终建议总结推荐的统计脚本部署策略统计服务推荐位置加载方式特点说明Google Analytics async官方推荐，数据准确性优先百度统计混合部署动态插入head声明变量 + body动态加载51.la V6 同步安装新版本，支持多种安装方式UStat async早期触发，数据完整性Umami async defer轻量级，隐私友好统计鸟 底部动态异步国产统计，性能优先通用原则异步优先：尽量使用 async 或 defer 属性按需选择：根据服务商建议和业务需求选择位置性能监控：定期检查页面加载性能指标数据验证：确保统计数据的准确性和完整性同步与异步安装的选择策略选择同步安装的情况：A/B测试脚本：避免页面闪烁，确保用户看到正确的页面版本关键业务逻辑：需要确保脚本执行顺序的核心功能小型轻量脚本：对页面性能影响较小的统计代码选择异步安装的情况：性能优先网站：首屏加载速度是关键指标大型统计脚本：文件较大或加载时间较长的脚本辅助功能脚本：不影响页面核心功能的统计工具最佳实践建议：核心统计脚本：采用异步加载，放在 部分辅助统计工具：采用异步加载，放在 底部A/B测试工具：根据具体需求选择，平衡性能和用户体验定期评估：监控页面性能指标，适时调整加载策略针对不同场景的建议性能敏感站点：优先将统计脚本放在 底部数据敏感站点：关键统计脚本放在 部分平衡方案：核心统计放 ，辅助统计放底部结语统计脚本的放置位置选择并没有标准答案，需要根据具体的业务需求、性能要求和统计服务商的建议来综合判断。现代浏览器的异步加载能力已经大大减少了脚本位置对性能的影响，关键在于：正确理解同步与异步：明确两种加载方式的优劣势，根据实际需求选择关注服务商更新：如51.la V6等新版本可能提供更优化的安装方式平衡性能与准确性：在统计数据完整性和页面加载性能之间找到最佳平衡点持续优化调整：随着网站发展和技术演进，适时调整统计脚本部署策略对于 Typecho 用户，建议根据本文的分析结合自己的实际情况，选择合适的部署策略，并定期监控网站性能和统计数据的准确性。特别需要注意各统计服务的版本更新，及时采用最新的最佳实践。参考资料MDN Web Docs - Script elementJavaScript.info - Scripts: async, deferSiteSpect - Sync vs Async JavaScript TagsNotifyVisitors - Synchronous and Asynchronous ScriptsGoogle Analytics 官方文档Analytics Mania - GA 脚本位置分析百度统计开发者文档51.la 官网51.la V6 使用指南Umami Analytics 文档Stack Overflow - 脚本加载位置讨论Typecho 主题开发文档本文基于当前主流浏览器和统计服务的最新文档整理而成，如有更新请以官方文档为准。
ModernAdmin 是一款 Typecho 后台管理美化插件，基于 Microsoft Fluent Design 设计理念，提供数据可视化和系统监控功能。后台美化 | 数据统计 | 多主题支持 | 响应式设计 | 系统监控[tabs][tab name="产品概述" active="true"]插件特点界面优化基于 Fluent Design 设计语言，提供现代化的后台界面视觉体验。主要功能简单易用：安装启用即可使用，无需复杂配置数据统计：提供图表形式的网站数据统计多主题色：支持5种主题色和深浅模式切换响应式：适配桌面、平板、手机等设备系统监控：实时显示服务器状态信息功能对比功能特性系统默认普通美化插件ModernAdmin界面设计传统样式基础美化Fluent Design数据可视化基础数字简单图表ECharts图表服务器监控无无实时系统状态主题定制无1-2种5种主题+深浅模式移动端适配基础响应部分适配响应式设计更新维护官方更新不定期持续更新技术支持社区有限QQ技术支持[/tab][tab name="功能特色"]主要功能模块1. 主题系统5种主题色：蓝色、绿色、紫色、橙色、红色 深浅模式：支持自动切换和手动切换 实时切换：主题更改后页面元素同步更新 统一适配：菜单、图表、按钮等元素保持一致2. 数据统计网站概要：文章、评论、分类、标签等基础统计 日历热力图：按日期显示文章发布活跃度 标签统计：显示TOP15热门标签分布 图表类型：折线图、饼图、雷达图、柱状图 时间范围：支持全部、半年、3个月、1个月、7天3. 服务器监控资源监控：CPU、内存、磁盘使用率显示 系统信息：PHP版本、数据库、操作系统 自动刷新：每3秒更新一次数据 配置信息：文件上传限制、最大执行时间等4. 界面优化操作便捷：文章标题点击查看，快速编辑功能 动画效果：悬停和点击时的视觉反馈 响应式设计：适配桌面、平板、手机设备 菜单优化：移动端菜单响应问题修复5. 配置选项页面排除：可指定特定页面不受插件影响 菜单定制：支持置顶常用菜单项 统计设置：自定义网站开始日期 动画控制：可调节界面动画效果6. 移动端适配触摸优化：针对触摸设备的操作优化 菜单修复：解决移动端菜单点击无反应问题 布局适配：小屏幕设备的界面适配 性能优化：移动端加载和运行优化[/tab][tab name="效果预览"]🖼️ 界面展示🎨 主题色效果界面效果展示[collapse status="false" title="蓝色主题效果图（默认）"]保持原有功能不变，仅对界面进行美化[/collapse][collapse status="false" title="绿色主题效果图"][/collapse][collapse status="false" title="紫色主题效果图"][/collapse][collapse status="false" title="橙色主题效果图"][/collapse][collapse status="false" title="红色主题效果图"][/collapse]🌙 深浅模式对比日间模式参考上面的几种颜色主题夜间模式📊 统计面板展示网站概要面板现代化卡片式布局核心数据统计一目了然最新文章和评论快速访问网站统计面板发布趋势图表和日历热力图服务器状态面板实时系统资源监控圆形进度条直观显示详细的系统环境信息3秒间隔自动刷新移动端适配手机端使用说明手机端菜单响应问题已修复触摸操作针对性优化图表在小屏幕设备上正常显示支持横竖屏切换交互优化界面交互改进操作响应速度优化悬停动画效果页面跳转逻辑优化支持键盘快捷操作使用说明界面展示：截图为实际使用效果，安装后界面与展示一致。主题切换：可在后台设置中切换5种主题色，支持深浅模式。移动端支持：手机端菜单响应问题已在v1.2.6版本修复，移动设备可正常使用。[/tab][tab name="安装配置"]📦 安装部署系统要求Typecho 版本：推荐 1.2.1PHP 版本：推荐 7.4 或 8.0服务器环境：Apache/Nginx安装步骤获取插件：购买并下载 ModernAdmin 插件压缩包上传文件：解压后将 ModernAdmin 文件夹上传至 /usr/plugins/ 目录启用插件：在 Typecho 后台 → 插件管理 → 启用 ModernAdmin基础配置：进入"美化设置"完成初始化配置🔧 配置指南基础设置主题外观主题色选择：在"美化设置"中选择符合品牌调性的主题颜色深浅模式：设置默认模式或跟随系统偏好统计时间范围：选择数据统计的时间跨度（全部/半年/3个月/1个月/7天）网站信息开始日期设置：配置网站运营开始时间，格式支持 YYYY-MM-DD 或 YYYY/M/D统计范围说明：系统会根据设置自动调整统计说明文字高级配置页面管理排除页面路径配置（如主题后台设置）： /admin/options-theme.php菜单定制置顶二级菜单配置（格式：菜单名称|链接路径 或 菜单名称）： 撰写新文章|write-post.php 插件管理|plugins.php 网站概要 服务器状态🔄 更新维护版本更新备份当前插件配置和自定义设置下载最新版本覆盖原文件清理浏览器缓存（Ctrl+F5 或 Cmd+Shift+R）检查配置项是否需要重新设置故障排除检查文件权限是否正确（建议 755/644）确认是否与其他插件存在冲突查看浏览器控制台错误信息尝试禁用其他插件后重新测试📱 新增管理面板1. 网站概要面板访问路径：Typecho 后台 → 控制台 → 网站概要主要功能：核心数据统计卡片（文章、评论、分类、标签）最新文章列表（含独立查看和编辑按钮）最新评论列表（支持跳转到具体评论位置）访客总数统计（基于文章浏览量智能计算）发布趋势图表和日历热力图2. 服务器状态面板访问路径：Typecho 后台 → 控制台 → 服务器状态主要功能：实时系统资源监控（CPU、内存、磁盘）服务器运行时长和当前时间PHP 环境详细信息数据库版本和配置信息文件上传限制和执行时间限制3秒间隔自动刷新[/tab][tab name="技术规格"]🛠️ 技术架构前端技术栈设计语言：Microsoft Fluent Design SystemCSS 框架：现代化 CSS3 + CSS VariablesJavaScript：原生 ES6+ + AJAX图表库：ECharts 5.x（本地化部署，无需外部 CDN）动画引擎：CSS Transitions + Transforms图标系统：Fluent/MDL2 图标库后端集成数据接口：RESTful API 设计缓存机制：智能缓存策略，提升加载速度安全防护：XSS 防护 + CSRF 令牌验证错误处理：完善的异常捕获和日志记录数据库优化：高效的 SQL 查询和数据聚合性能优化加载优化资源文件版本控制，避免缓存问题CSS/JS 文件压缩，减少传输体积图片资源 SVG 矢量化，支持高分辨率显示懒加载机制，按需加载图表组件本地化资源部署，减少外部依赖运行优化AJAX 异步更新，避免页面刷新防抖节流机制，优化交互响应内存管理优化，防止内存泄漏兼容性检测，确保跨浏览器稳定运行🔒 安全特性权限验证：严格的用户权限检查数据过滤：输入数据的安全过滤和验证SQL 注入防护：使用预处理语句防止 SQL 注入文件安全：上传文件类型和大小限制代码审计：定期安全代码审计📱 响应式设计断点设计桌面端：≥1200px - 多列网格布局，充分利用屏幕空间平板端：768px-1199px - 自适应调整，保持最佳显示效果手机端：≤767px - 单列布局，优化触摸操作适配特性弹性网格系统，自动适应不同屏幕尺寸触摸友好的交互设计高分辨率屏幕优化横竖屏切换适配移动端导航栏优化🎨 设计系统色彩系统5种主题色：蓝色、绿色、紫色、橙色、红色深浅模式自动适配CSS 变量统一管理实时主题切换支持动画系统分层动画时长：全局 0.3s，交互 0.2s，快速响应 0.15s流畅的动画曲线：cubic-bezier(0.25, 0.46, 0.45, 0.94)悬停效果：上移 + 缩放 + 阴影聚焦效果：缩放 + 主题色边框 + 光晕[/tab][tab name="版本历程"]版本更新记录v1.5.1 (2025-08-15)智能平衡：修复v1.5.0中子菜单无法显示的问题，实现主菜单跳转与子菜单展开的完美平衡双击逻辑：父菜单项首次点击展开子菜单，二次点击跳转到主页面兼容优化：完全兼容原生Typecho菜单系统，不破坏现有展开/收起机制智能判断：准确识别有子菜单的父菜单项，避免误判和意外跳转用户体验：🌙美化设置、登出等所有菜单项现在都能正常显示和操作v1.5.0 (2025-08-15)重大重写：完全重写菜单处理系统，彻底解决控制台、撰写、管理、设置四个主菜单点击无反应问题全新策略：基于链接文本内容而非复杂的DOM结构判断，避免parent/child类误判特殊优化：对四个主菜单项（控制台、撰写、管理、设置）使用强制跳转机制统一处理：移除移动端和桌面端分离逻辑，使用统一的事件处理系统增强调试：每个链接分析过程完整记录，便于问题定位和后续优化性能提升：清理并重新绑定事件监听器，避免事件冲突和重复绑定v1.4.4 (2025-08-15)关键修复：精确修复菜单parent类判断逻辑，解决桌面端所有菜单项被误判为父菜单的问题改进父菜单项判断：同时检查parent类和下一个元素是否为child类（真正的子菜单）完善调试信息：显示hasParentClass、hasChildMenu、nextSibling等详细判断过程统一移动端和桌面端判断逻辑，确保一致的菜单行为修复普通菜单项（如控制台、撰写等）无法正常跳转的问题v1.4.3 (2025-08-15)移动端专项修复：重写移动端菜单事件处理逻辑，专门针对触摸设备优化新增移动端触摸事件支持，使用touchstart和touchend事件替代click事件为每个菜单链接独立绑定触摸事件，确保在移动端100%响应添加触摸视觉反馈，点击时显示背景色变化增强用户体验分离桌面端和移动端事件处理逻辑，避免跨设备冲突增强调试日志，显示设备类型、事件类型和处理状态v1.4.2 (2025-08-15)紧急修复：彻底解决菜单点击无反应问题，采用多重修复策略添加通用链接修复机制，直接为每个菜单链接绑定点击事件优化事件处理逻辑，桌面端和移动端统一处理增强链接跳转检测，支持多种链接格式的强制跳转添加详细的调试日志，便于问题诊断和排查移除设备检测限制，确保所有设备都能正常使用菜单功能v1.4.1 (2025-08-15)重大修复：完全重写菜单点击事件处理逻辑，彻底解决控制台、撰写等菜单项点击无反应问题修复置顶菜单功能，新增置顶菜单项渲染支持，可在后台配置置顶常用菜单优化事件处理机制，避免与原生Typecho菜单系统冲突简化移动端菜单处理逻辑，使用事件委托方式统一处理所有菜单项点击增强链接跳转逻辑，确保普通菜单项能够正常跳转而不被阻止改进调试信息，添加控制台日志便于问题排查v1.4.0 (2025-08-15)修复移动端菜单无反应问题，彻底解决手机端点击菜单无响应的bug移动端交互优化，增强触摸设备的事件处理和菜单展开功能JavaScript兼容性修复，解决ModernAdmin与原生Typecho菜单的冲突问题新增README文档说明控制台自动跳转问题的解决方案优化移动端事件捕获，确保菜单在所有设备上正常工作增加防重复绑定和异常处理机制v1.3.5 (2025-08-13)最新文章显示优化，增加独立的查看和编辑按钮顶部导航栏高度设置完善，修复子菜单定位问题夜间切换按钮位置智能优化服务器状态页面进度条视觉增强网站概要页面统计卡片支持点击跳转v1.3.4 (2025-08-13)最新文章跳转优化，统一跳转逻辑夜间切换按钮位置智能定位新增置顶二级菜单功能配置v1.3.3 (2025-08-13)日夜间切换按钮移动到美化设置按钮左侧服务器状态页面圆形进度条线条增粗最新文章链接样式优化隐藏页脚版权功能增强，支持第三方插件页面检测v1.3.2 (2025-08-13)动态日历配色系统，支持 GitHub 标准绿色配色最新评论智能跳转到具体评论位置服务器状态实时监控优化，更新频率调整为1秒滚动条样式主题色适配服务器状态面板支持AJAX实时数据更新v1.3.0 (2025-08-12)新增网站概要管理面板，包含数据统计卡片最新文章和评论列表展示功能统计卡片支持直接跳转到对应管理页面用户总数统计功能集成v1.2.9 (2025-08-12)访客统计功能集成响应式设计全面优化日历热力图 GitHub 风格完善隐藏仪表盘"官方最新日志"功能v1.2.6 (2025-08-12)服务器监控面板正式发布实时系统资源监控功能上线（CPU、内存、磁盘使用率）系统运行时长和负载显示移动端菜单响应问题初步修复open_basedir环境兼容性优化v1.2.0 (2025-08-12)多主题色系统上线，支持5种主题色统计时长范围可配置（全部/半年/3个月/1个月/7天）统计面板优化，适配一屏显示主题色实时切换支持网站开始日期配置功能v1.1.5 (2025-08-12)统计图表本地化部署，移除外部 CDN 依赖响应式布局全面优化ECharts 库本地化，提升加载速度排除页面路径配置功能v1.1.4 (2025-08-12)ARIA 无障碍访问支持兼容性问题修复Mica效果CSS样式系统v1.1.3 (2025-08-12)侧栏导航系统重构（已在后续版本中移除）基础交互优化深色主题预加载机制v1.0.0 (2025-08-12)Fluent Design 设计语言引入夜间模式系统建立核心美化功能实现插件架构搭建完成基础CSS变量系统建立版本更新统计版本发布日期更新类型主要内容v1.5.12025-08-15智能平衡子菜单显示问题修复v1.5.02025-08-15重大重写菜单处理系统完全重写v1.4.42025-08-15关键修复菜单parent类判断逻辑修复v1.4.32025-08-15专项修复移动端菜单触摸事件优化v1.4.22025-08-15紧急修复菜单点击问题彻底修复v1.4.12025-08-15重大修复菜单点击无反应问题修复v1.4.02025-08-15重大修复移动端菜单问题修复v1.3.52025-08-13功能优化文章显示和导航优化v1.3.42025-08-13界面调整导航栏优化和菜单配置v1.3.32025-08-13视觉优化按钮位置和页脚功能v1.3.22025-08-13功能增强日历配色和AJAX更新v1.3.02025-08-12重大更新网站概要管理面板v1.2.92025-08-12功能集成访客统计和日志隐藏v1.2.62025-08-12重大更新服务器监控面板v1.2.02025-08-12重大更新多主题色和配置系统v1.1.52025-08-12性能优化图表本地化和排除功能v1.1.42025-08-12界面增强无障碍和Mica效果v1.1.32025-08-12系统优化导航重构和预加载v1.0.02025-08-12初始版本基础功能框架[/tab][tab name="常见问题"]一、在服务器状态页面遇到图中类似问题的解决办法1.在宝塔站点目录关闭防跨站攻击(open_basedir)。2.在PHP管理中的禁用函数中删除system、exec和shell_exec。二、强烈建议使用typecho1.2.1版本和php8.0版本。[/tab][/tabs]购买说明[scode type="green"]价格为15/人插件将持续更新维护，购买后可随时更新最新版[/scode][scode type="yellow"]小本买卖，不求购买，只求别倒卖或传播！不支持退款！[/scode]购买流程：1.先直接扫描购买方式中的二维码或者通过转账方式支付费用（如果有问题可以售前咨询），付款时备注一下联系方式QQ2.然后通过下面的联系方式联系我（备注一下「购买 ModernAdmin 后台插件」），看到后会立即响应申请和处理，通过QQ发送给你插件的相关文件676567473支付方式，选择任意一个即可最后插件如有安装或使用问题，可在评论区发出或私聊对插件的美化和优化建议，也请在评论区提出感谢选择 ModernAdmin，让我们一起打造更美好的 Typecho 后台体验！
SleepData 插件是一个用于在 Typecho 博客系统中记录、存储和分析个人睡眠数据的工具。它解决了部分健康应用（如 OPPO 健康）数据封闭、无公开 API 的问题，允许用户将数据掌握在自己手中。核心问题与解决方案许多健康应用（例如 OPPO 健康）不提供公开的 API 接口，也无法将数据同步到 Google Fit 等开放平台，导致用户的健康数据完全封闭，难以进行统一管理和长期分析。本插件通过提供一个独立的数据录入和存储系统来解决此问题。用户可以通过截图 OCR 识别、手动录入或 API 调用等方式，将睡眠数据保存在自己的服务器上，从而实现数据的自主掌控和长期追踪。工作流程整个数据处理流程从用户手机端的健康应用开始，经过前端的 OCR 识别与数据提交，再到服务器端的处理与存储，最后通过不同的页面进行展示。插件特性数据自主可控: 所有数据存储在用户自己的服务器上。双重存储: 同时保存到数据库和 JSON 文件，保证数据安全。OCR 自动录入: 通过识别截图，简化数据输入过程。API 支持: 开放 API 接口，方便进行二次开发或批量导入。自适应存储: 自动检测服务器环境，寻找可写目录，无需手动配置。双重配置: 支持后台配置和文件配置两种方式，提高灵活性。Handsome 主题集成: 与 Handsome 主题无缝集成，支持顶部导航栏和侧边栏展示。使用指南1. 安装插件从源码地址下载插件压缩包。解压后，将文件夹重命名为 SleepData。上传 SleepData 文件夹到 Typecho 的 usr/plugins 目录下。登录 Typecho 后台，进入"控制台" -> "插件"，找到"SleepData"并启用。2. 配置插件启用插件后，点击"设置"进入配置页面。API 访问令牌: 设置一个足够复杂的字符串作为 API 访问的密钥。这是保证数据安全的关键。此令牌有两种配置方式，系统会优先使用方法一：方法一（推荐）: 直接在后台设置页面填写并保存。方法二（备用）: 编辑插件目录下的 data_config.php 文件，修改 API_ACCESS_TOKEN 的值。3. 数据录入方式一：OCR 识别上传（推荐）这是最便捷的方式，尤其适用于从手机健康 App 录入数据。在浏览器中打开插件目录下的 https://博客地址/sleep-data-uploader/index.html 文件。填写您的 API 地址 和 访问令牌 （一次填写后浏览器会记住）。点击"拍照识别"或"选择截图"按钮，上传您在健康 App 中截取的睡眠数据图片。系统会自动识别图片中的数据并填充到表单中。核对无误后，点击"发送数据"。方式二：手动输入如果 OCR 识别有误或没有截图，可以选择手动填写所有睡眠数据，然后点击"发送数据"。方式三：通过 API 上传对于有开发能力的用户，可以通过 POST 请求直接向 API https://博客地址/usr/plugins/SleepData/simple-api.php 提交数据。请求体为 JSON 格式，需包含access_token及所有睡眠数据字段。4. 查看数据后台查看: 在 Typecho 后台的插件设置页面，会直接展示最近 50 条睡眠记录。独立页面查看: 访问 https://博客地址/usr/plugins/SleepData/view-data.php 可以查看 JSON 文件中的所有数据记录。数据库查看: 在数据库中的typecho_sleep_data表中查看所有数据记录。根目录查看: 在根目录下的temp/sleep_data.json文件中查看所有数据记录。5. 在 Handsome 主题中展示睡眠数据展示一：添加到顶部导航栏效果展示添加代码到主题的headnav.php文件中。[collapse status="false" title="php代码，放在nav navbar-nav hidden-sm的ul中"][hide] <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> 睡眠统计 今日睡眠 本周平均 本月平均 累计睡眠 平均入睡 本周最晚 质量最佳 质量最差 睡眠趋势 加载中... [/hide][/collapse][collapse status="false" title="JS代码，添加到/header前面"][hide] [/hide][/collapse]展示二：添加到侧边栏效果展示添加代码到主题的sidebar.php文件中。[collapse status="false" title="php代码，放在博客信息的上下即可"][hide] <?php if (class_exists('SleepData_Plugin')): ?> <?php _me("今日睡眠") ?> <?php $sleepData = SleepData_Plugin::getTodaySleepData(); if ($sleepData): ?> <?php echo htmlspecialchars($sleepData['sleep_score']); ?> 分 <?php echo date('m月d日', strtotime($sleepData['date'])); ?> 总睡眠 <?php $totalSleep = ($sleepData['deep_sleep_minutes'] ?? 0) + ($sleepData['light_sleep_minutes'] ?? 0) + ($sleepData['rem_sleep_minutes'] ?? 0); echo SleepData_Plugin::formatMinutesToDuration($totalSleep); ?> 睡眠时段 <?php echo substr($sleepData['sleep_time'], 0, 5); ?> - <?php echo substr($sleepData['wake_up_time'], 0, 5); ?> 深睡 <?php echo SleepData_Plugin::formatMinutesToDuration($sleepData['deep_sleep_minutes']); ?> 浅睡 <?php echo SleepData_Plugin::formatMinutesToDuration($sleepData['light_sleep_minutes']); ?> 快速眼动 <?php echo SleepData_Plugin::formatMinutesToDuration($sleepData['rem_sleep_minutes']); ?> <?php else: ?> 手表没戴或者没电了，暂无今日睡眠数据 <?php endif; ?> <?php endif; ?>[/hide][/collapse]最后插件使用过程中有任何问题，欢迎在评论区留言。插件Github地址：[hide]https://github.com/BXCQ/SleepData[/hide]网盘下载：[hide]https://pan.xunlei.com/s/VOWWC8KD7Vl3QiqIDGk4xnk-A1?pwd=z8h6#[/hide]
Handsome 主题导航栏添加热榜聚合功能教程
前言在 Typecho Handsome 主题的导航栏添加"热榜聚合"功能，以下拉菜单形式展示"历史上的今天"、"抖音热榜"和"CSDN热榜"的实时内容，提升博客吸引力。效果：鼠标悬停或点击导航栏上的"火焰"图标，弹出包含三列热榜的窗口。操作步骤第一步找到并打开：/usr/themes/handsome/component/headnav.php文件第二步：添加代码将以下代码复制到 headnav.php 文件中。粘贴位置： 在文件中找到 <?php endif; ?> 这一行（约在 517 行，统计信息功能的结束标签），将代码粘贴在其后面。[hide] <path d="M9 14c1.5-2-1-4-2-5 1.5 3-2 6-2 8 0 .5 0 1 .5 1C8 19 13 16 9 14zm1-5c0-2-2-3-3-4 1 2-1 3-1 5s2 4 3 2v-3z"></path> 历史上的今天 查看更多 加载中... 抖音热榜 查看更多 加载中... CSDN热榜 查看更多 加载中... [/hide]如果主题未引入图标，则需要在此文件顶部添加 第三步：保存并刷新保存 headnav.php 文件，刷新博客页面。导航栏会出现新的火焰图标，点击即可看到热榜内容。代码解析代码由三部分组成：HTML 结构、CSS 样式和 JavaScript 逻辑。HTML：定义下拉菜单框架，包括三个板块展示不同热榜。CSS：为热榜列表提供样式，前三名设置醒目颜色。JavaScript：数据获取：通过 ajax 请求 https://api.guiguiya.com/api/hotlist 接口获取实时热榜数据。懒加载：数据仅在用户首次点击图标时加载，减少性能开销。浏览器缓存：数据缓存在 localStorage 中，缓存时间 30 分钟，提高加载速度，减轻 API 服务器压力。注意事项功能依赖第三方 API (api.guiguiya.com)，API 服务中断可能导致功能失效。代码使用 Font Awesome 图标库，Handsome 主题通常已包含，若图标未显示，请确认主题已加载该库。修改文件前请做好备份。结语通过此教程，可为 Handsome 主题博客添加热榜聚合功能，美化网站并为访客提供更多价值。
本文将详细介绍如何在博客侧边栏实现请求总数显示功能，让您随时掌握网站的访问情况。一、请求总数统计预览二、实现思路实现侧边栏请求总数显示主要包含以下几个步骤：数据来源：从 WAF 获取请求总数数据数据缓存：利用本地缓存减少请求次数前端显示：在侧边栏显示数据自动更新：使用 JavaScript 定期刷新数据保持实时性三、后端实现1. 创建访问统计数据获取脚本首先，创建一个 PHP 脚本来获取来自 WAF 的访问统计数据：[hide]<?php // usr/themes/handsome/component/visitor-stats.php // 设置响应头 header('Content-Type: application/json; charset=utf-8'); header('Cache-Control: no-cache, no-store, must-revalidate'); header('Expires: 0'); // 缓存文件路径 $cache_dir = __DIR__ . '/cache'; if (!is_dir($cache_dir)) { @mkdir($cache_dir, 0755, true); } $cache_file = $cache_dir . '/visitor_stats.json'; $log_file = $cache_dir . '/visitor_stats.log'; // 缓存时间设置为10分钟 $cache_time = 600; // API配置 - WAF接口 $api_url = 'https://your.waf.domain:9443/api/open/dashboard/user/counts'; $api_token = 'YOUR_WAF_API_TOKEN'; // 使用WAF的API Token // 检查缓存是否存在且有效 if (file_exists($cache_file) && (time() - filemtime($cache_file) < $cache_time) && !isset($_GET['refresh'])) { // 缓存有效，直接读取缓存 $content = file_get_contents($cache_file); echo $content; exit; } // 从WAF获取请求总数 $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $api_url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Accept: application/json', 'X-SLCE-API-TOKEN: ' . $api_token ]); curl_setopt($ch, CURLOPT_TIMEOUT, 5); $response = curl_exec($ch); $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); $error = curl_error($ch); curl_close($ch); if ($http_code === 200 && $response) { $data = json_decode($response, true); if ($data && isset($data['data']['total_requests'])) { // 成功获取数据 $result = [ 'total_pv' => (int)$data['data']['total_requests'], 'timestamp' => time(), 'cached' => false ]; // 保存到缓存 file_put_contents($cache_file, json_encode($result)); echo json_encode($result); } else { // API返回数据格式不正确 echo json_encode([ 'error' => '数据格式错误', 'total_pv' => 0, 'timestamp' => time() ]); } } else { // API请求失败 echo json_encode([ 'error' => $error ? $error : 'HTTP错误：' . $http_code, 'total_pv' => 0, 'timestamp' => time() ]); }[/hide]四、前端实现1. 创建高性能访问统计更新脚本以下是一个带本地缓存功能的高性能前端更新脚本：[collapse status="false" title="展开查看"]// usr/themes/handsome/component/direct-updater.js (function () { "use strict"; var CACHE_KEY = "handsome_visitor_stats"; var CACHE_EXPIRE_MS = 10 * 60 * 1000; // 10分钟缓存 function formatPV(value) { var num = parseInt(value, 10); if (isNaN(num)) return "..."; if (num >= 1000000) return (num / 1000000).toFixed(2) + " M"; if (num >= 1000) return (num / 1000).toFixed(2) + " K"; return num.toString(); } function updateDOM(formattedPV) { var elements = document.querySelectorAll( '.pv-count, [data-stat="pv"], .badge[data-type="pv"]' ); for (var i = 0; i < elements.length; i++) { elements[i].textContent = formattedPV; } } var cache = { get: function () { var item = window.localStorage.getItem(CACHE_KEY); if (!item) return null; try { var data = JSON.parse(item); if (Date.now() - data.timestamp < CACHE_EXPIRE_MS) { return data.value; } } catch (e) {} window.localStorage.removeItem(CACHE_KEY); return null; }, set: function (value) { try { var item = { value: value, timestamp: Date.now(), }; window.localStorage.setItem(CACHE_KEY, JSON.stringify(item)); } catch (e) {} }, }; function fetchData() { var xhr = new XMLHttpRequest(); xhr.open( "GET", "/usr/themes/handsome/component/direct-pv.php?t=" + Date.now(), true ); xhr.timeout = 5000; xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { try { var data = JSON.parse(xhr.responseText); if (data && typeof data.total_pv !== "undefined") { updateDOM(formatPV(data.total_pv)); cache.set(data); } } catch (e) {} } }; xhr.send(); } function init() { // 首先使用缓存的数据（如果有） var cachedData = cache.get(); if (cachedData) { updateDOM(formatPV(cachedData.total_pv)); } // 然后从服务器获取最新数据 // 如果有缓存，延迟获取以减少首次加载时的网络请求 var delay = cachedData ? 3000 : 100; setTimeout(fetchData, delay); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();[/collapse]2. 创建访问统计定期更新脚本以下脚本可以在后台定期更新访问统计数据：[hide]// usr/themes/handsome/component/visitor-updater.js (function () { // 配置项 const config = { updateInterval: 300000, // 更新间隔（毫秒）- 5分钟 updateEndpoint: "/usr/themes/handsome/component/visitor-stats.php", debugMode: false, }; // 安全日志输出 function safeLog(message, type = "log") { if ( config.debugMode && window.console && typeof window.console[type] === "function" ) { try { window.console[type]("[访问统计更新器] " + message); } catch (e) { // 静默失败 } } } // 更新访问统计数据 function updateStats() { safeLog("正在更新访问统计数据..."); // 获取最新PV值 const url = config.updateEndpoint + "?t=" + new Date().getTime(); fetch(url, { method: "GET", headers: { "X-Requested-With": "XMLHttpRequest", "Cache-Control": "no-cache, no-store, must-revalidate", }, }) .then((response) => { if (!response.ok) { throw new Error("网络错误: " + response.status); } return response.json(); }) .then((data) => { safeLog("访问统计数据更新成功"); // 如果页面上有显示PV的元素，更新它们 tryUpdateUI(data); }) .catch((error) => { safeLog("访问统计数据更新失败: " + error.message, "error"); }); } // 尝试更新UI上的数据 function tryUpdateUI(data) { try { // 找到页面上可能显示PV的元素 const pvElements = document.querySelectorAll( '.pv-count, [data-stat="pv"], .badge[data-type="pv"]' ); // 如果能找到元素并且数据有效，则更新 if (pvElements.length > 0 && data && data.total_pv) { let formattedPV = data.total_pv; // 格式化大数字 if (formattedPV >= 1000000) { formattedPV = (formattedPV / 1000000).toFixed(2) + " M"; } else if (formattedPV >= 1000) { formattedPV = (formattedPV / 1000).toFixed(2) + " K"; } // 更新所有找到的元素 pvElements.forEach((el) => { el.textContent = formattedPV; }); safeLog("UI更新成功"); } } catch (e) { safeLog("更新UI失败: " + e.message, "error"); } } // 初始化 - 加入PJAX兼容性 function init() { safeLog("访问统计更新器初始化..."); // 立即更新一次 updateStats(); // 设置定期更新 setInterval(updateStats, config.updateInterval); safeLog("访问统计更新器已启动，间隔: " + config.updateInterval + "ms"); } // 添加PJAX支持 if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } // 监听PJAX事件 document.addEventListener("pjax:end", function () { // 延迟执行，确保DOM已经更新 setTimeout(function () { tryUpdateUI({ total_pv: window.localStorage.getItem("handsome_visitor_stats") ? JSON.parse(window.localStorage.getItem("handsome_visitor_stats")) .value.total_pv : 0, }); }, 100); }); })();[/hide][hide]// usr/themes/handsome/component/direct-pv.php <?php /** * 直接获取PV数据的简化版脚本 * 用于前端JS调用，减少不必要的API请求 */ // 设置内容类型和缓存控制 header('Content-Type: application/json; charset=utf-8'); header('Cache-Control: no-cache, no-store, must-revalidate'); header('Pragma: no-cache'); header('Expires: 0'); // 错误报告设置 - 不显示PHP错误 error_reporting(0); ini_set('display_errors', 0); // 确保不会有HTML或其他输出混入JSON ob_start(); // 缓存文件路径 $cache_dir = __DIR__ . '/cache'; $cache_file = $cache_dir . '/visitor_stats.json'; // 如果缓存文件存在，直接读取 if (file_exists($cache_file)) { $content = file_get_contents($cache_file); $data = json_decode($content, true); // 只返回需要的数据 $result = [ 'total_pv' => isset($data['total_pv']) ? $data['total_pv'] : 0, 'timestamp' => time() ]; // 确保之前没有其他输出 if (ob_get_length()) ob_clean(); // 返回数据 echo json_encode($result); exit; } else { // 如果缓存文件不存在，返回错误 if (ob_get_length()) ob_clean(); header('HTTP/1.1 404 Not Found'); echo json_encode([ 'error' => 'Cache file not found', 'timestamp' => time() ]); exit; } [/hide]五、侧边栏实现1. 在 sidebar.php 中添加请求总数显示函数首先在侧边栏文件中添加获取来自 WAF 的请求总数的函数：[collapse status="false" title="展开查看"]<?php // 获取WAF访问总量函数 function getSafeguardPV() { // 缓存文件路径 $cache_dir = __DIR__ . '/cache'; if (!is_dir($cache_dir)) { @mkdir($cache_dir, 0755, true); } $cache_file = $cache_dir . '/visitor_stats.json'; // 格式化数字的函数 function formatNumber($num) { if ($num >= 1000000) { return round($num / 1000000, 2) . ' M'; } elseif ($num >= 1000) { return round($num / 1000, 2) . ' K'; } else { return $num; } } // 如果缓存文件存在且未过期 if (file_exists($cache_file) && (time() - filemtime($cache_file) < 300)) { $pv_data = json_decode(file_get_contents($cache_file), true); if (is_array($pv_data) && isset($pv_data['total_pv'])) { return formatNumber($pv_data['total_pv']); } } // 使用curl直接访问API $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, '/usr/themes/handsome/component/direct-pv.php'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 2); $response = curl_exec($ch); curl_close($ch); if ($response) { $data = json_decode($response, true); if (isset($data['total_pv'])) { return formatNumber($data['total_pv']); } } // 如果出错，返回0 return '0'; } ?>[/collapse]2. 添加访问统计区域到侧边栏在 sidebar.php 中添加如下代码： <?php echo getSafeguardPV(); ?><?php _me("请求总数") ?> 六、整合配置1. 在 header.php 或 footer.php 中引入访问统计更新脚本在主题的 header.php 或 footer.php 文件中添加以下代码： <script src="<?php $this->options->themeUrl('component/direct-updater.js'); ?>"> <script src="<?php $this->options->themeUrl('component/visitor-updater.js'); ?>"> 2. 确保缓存目录可写确保创建缓存目录并设置正确的权限：mkdir -p /path/to/your/theme/cache chmod 755 /path/to/your/theme/cache七、故障排查1. 数据不显示或不更新检查缓存目录权限：确保缓存目录存在且可写检查路径配置：确保脚本路径正确查看浏览器控制台：检查是否有 JavaScript 错误启用调试模式：在 visitor-updater.js 中设置 debugMode 为 true2. 数据异常检查 API 响应：使用浏览器访问 direct-pv.php 查看原始数据重置缓存：删除缓存文件，强制重新获取数据检查格式化函数：确认 formatNumber 函数工作正常结语通过本教程，您已经成功实现了在博客侧边栏显示请求总数的功能。这个功能不仅能让您直观地了解网站的访问情况，还能为访客提供网站活跃度的参考。该实现具有良好的 PJAX 兼容性，可以在页面切换时保持数据的一致性和实时更新。希望本教程对您有所帮助，祝您的博客运营顺利！