Xuan's blog - 功能增强
type: channel
link: https://blog.ybyq.wang/category/feature-enhancement/
description: 博客功能扩展、交互优化、视觉美化教程
items: CommentAI - Typecho博客AI智能评论回复插件
items: 解决AI摘要不显示的三种方案 -AIsummary插件
items: Typecho handsome 博客添加AI聊天功能 - AiChat插件
items: Typecho handsome 睡眠记录数据展示插件 - SleepData
items: Handsome 主题导航栏添加热榜聚合功能教程
items: Typecho handsome 添加评论区OwO表情包 - QQ,抖音,B站等
items: Typecho handsome 侧边栏显示网站请求总数
items: Typecho Handsome 添加实时QPS图表 - 兼容pjax
items: Typech handsome 侧边栏添加QQ等级和信息显示
items: 分享60个有趣实用的API及其Typecho博客集成指南

CommentAI - Typecho博客AI智能评论回复插件
type: item
date: 2026-01-25T20:25:00+08:00
description: 简介CommentAI 是一个 Typecho 博客的 AI 智能评论回复插件。核心功能自动生成评论回复三种工作模式可选（自动回复、人工审核、仅建议）支持通义千问、OpenAI、DeepSeek、Kimi 等模型设置支持上下文感知回复支持敏感词过滤和频率限制支持回复延迟支持触发条件设置支持AI标识显示安装环境要求Typecho 1.2.0 - 1.3.0PHP 7.0+（需要 curl、json、mbstring 扩展）MySQL 5.7+ 或 SQLite 3.0+AI 服务 API Key安装步骤上传 CommentAI 文件夹到 /usr/plugins/ 目录后台「控制台」→「插件」→ 启用「CommentAI」插件自动创建数据库表创建失败则手动执行**install.sql文件配置基础配置插件开关启用/禁用插件回复模式全自动：AI 生成后直接发布人工审核：生成后需人工审核仅建议：仅作参考，不发布管理员 UIDAI 回复使用的用户身份，默认为 1AI 平台配置支持平台阿里云百炼：国内访问快，价格实惠OpenAI：质量高，需国际网络DeepSeek：性价比高Kimi（月之暗面）：国产大模型自定义：支持 OpenAI 兼容接口API 配置API Key：必填，在对应平台获取API 地址：可选，留空使用默认模型名称：如 qwen-plus、gpt-4o-mini、deepseek-chat、moonshot-v1-8kPrompt 配置系统提示词定义 AI 的角色和回复风格：你是一位友好、专业的博主。根据读者评论生成恰当的回复。 要求： 1. 语气自然、亲切 2. 针对评论内容给出有价值的回应 3. 对提问给出明确答案 4. 回复长度 50-150 字 5. 使用中文回复上下文信息包含文章标题包含文章摘要（增加 Token 消耗）包含父级评论高级配置温度参数0.0-0.3：确定性强0.4-0.7：平衡（推荐）0.8-1.0：创造性强最大 Token 数建议 200-500敏感词过滤每行一个敏感词频率限制每小时最大调用次数，0 为不限制回复延迟延迟多少秒回复，0 为立即回复（推荐）建议 30-120 秒显示设置AI 标识显示：在回复末尾添加标识（推荐，可自定义）不显示：看起来像人工回复触发条件仅对已审核的评论回复（推荐）忽略垃圾评论（推荐）忽略引用和 Trackback（推荐）仅对文章的第一条评论回复自动排除管理员评论使用工作流程读者发表评论插件检查触发条件延迟指定时间（如果配置了）调用 AI 生成回复根据模式处理管理面板访问：后台 → AI评论回复功能统计卡片：显示各状态数量状态筛选：查看不同状态的回复队列列表：查看详细信息操作按钮：发布、拒绝、重新生成、查看原评论工具栏刷新：重新加载数据清理旧记录：删除 30 天前的记录插件设置：跳转到配置页面测试连接：测试 AI 服务最佳实践提升回复质量优化系统提示词明确角色定位详细描述风格设定长度范围合理配置上下文技术博客：启用标题和摘要生活博客：仅启用标题调整温度参数技术问答：0.3-0.5创意内容：0.7-0.9控制成本设置频率限制优化 Token 消耗选择合适模型使用人工审核模式安全建议保护 API Key配置敏感词保持透明故障排查插件激活失败检查数据库权限确认数据库类型AI 回复未生成检查插件是否启用检查触发条件设置检查频率限制确认不是管理员评论API 调用失败验证 API Key测试网络连接检查 API 地址确认模型名称检查账户余额查看日志日志位置：/usr/plugins/CommentAI/runtime.logtail -f /path/to/typecho/usr/plugins/CommentAI/runtime.log卸载后台禁用插件删除插件文件夹（可选）删除数据库表：DROP TABLE IF EXISTS `typecho_comment_ai_queue`;下载地址Github：[hide]https://github.com/BXCQ/CommentAI[/hide]

解决AI摘要不显示的三种方案 -AIsummary插件
type: item
date: 2025-09-21T15:18:00+08:00
description: 前言在自定义主题的某天，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" /]

Typecho handsome 博客添加AI聊天功能 - AiChat插件
type: item
date: 2025-08-18T21:35:00+08:00
description: 插件介绍AiChat是一款专为Typecho博客设计的AI聊天插件，它可以让您轻松地在博客中添加一个AI对话界面。该插件具有以下特点：美观的聊天界面，支持Markdown渲染完美适配PC端和移动端支持深色模式支持本地存储聊天记录注册用户可在多设备间同步对话历史支持一键复制对话内容兼容主流Typecho主题（本文以Handsome主题为例）安装步骤1. 下载插件首先，您需要下载AiChat插件。您可以通过以下方式获取：迅雷网盘下载：[hide]https://pan.xunlei.com/s/VOkBx1ymbfLEA9sPSHIvIwNpA1?pwd=vb9b#[/hide]下载完成后，您将得到一个名为AiChat.rar的压缩包。2. 上传并解压插件将下载好的压缩包解压，您会得到一个AiChat文件夹。将这个文件夹上传到您的Typecho博客的/usr/plugins/目录下。然后将ai-chat.php文件放置在handsome主题目录下。3. 激活插件登录到您的Typecho后台，进入"控制台 > 插件"页面，找到"AiChat"插件，点击"启用"按钮激活插件。配置插件1. 基本配置激活插件后，点击"设置"按钮进入插件配置页面：在配置页面中，您需要填写以下信息：AI API接口地址：默认为https://api.deepseek.com/v1/chat/completions，您也可以使用其他兼容的API接口AI API Key：您的API密钥，可以从相应的AI服务提供商获取AI 模型：默认为deepseek-chat，也可以根据您的需求选择其他模型温度参数：控制AI回复的随机性，值越高回复越多样，默认为0.7最大回复长度：控制AI回复的最大token数量，默认为2000填写完成后，点击"保存设置"按钮。2. 创建聊天页面配置完插件后，您需要创建一个独立页面来展示AI聊天界面：进入Typecho后台的"管理 > 创建 > 创建页面"填写页面标题，如"AI聊天"在"自定义模板"下拉菜单中选择"AI聊天"点击"发布页面"按钮使用体验1. 界面展示创建完成后，访问您刚才创建的页面，您将看到一个精美的AI聊天界面：界面主要包括以下部分：顶部提示区：显示使用说明和当前登录状态聊天区域：展示对话内容输入区域：输入您想问的问题功能按钮：包括发送按钮、清空对话按钮和查看历史记录按钮（仅登录用户可见）2. 功能特点2.1 一键复制当您将鼠标悬停在任何一条消息上时，会出现一个复制按钮。点击该按钮可以一键复制该条消息的内容，非常方便引用或分享。2.2 聊天记录同步游客用户：聊天记录会保存在浏览器的本地存储中，清除浏览器数据后将丢失注册用户：聊天记录会同时保存在服务器，可以在任何设备登录账号后通过"查看历史记录"按钮加载2.3 清空对话如果您想开始新的对话，可以点击右上角的清空按钮，系统会询问确认后清空当前的对话记录。3. 深色模式适配AiChat插件完美适配深色模式，当您的博客切换到深色模式时，聊天界面也会自动切换到相应的深色样式。常见问题解答1. 为什么我看不到"AI Chat Plugin"模板选项？如果您在创建页面时没有看到"AI Chat Plugin"模板选项，可能是因为：插件没有正确安装或激活您的主题不完全兼容解决方法：尝试禁用后重新启用插件，或者联系插件作者获取支持。2. 为什么AI回复很慢或者失败？可能的原因包括：API密钥配置错误网络连接问题API服务商限流或额度用尽解决方法：检查API配置，确保网络连接稳定，或者考虑更换API服务商。3. 如何自定义聊天界面样式？如果您想进一步自定义聊天界面的样式，可以通过修改主题的CSS文件或使用自定义CSS插件来实现。主要的CSS类名包括：.ai-chat-container：整个聊天容器.ai-chat-messages-area：消息显示区域.ai-chat-input-area：输入区域.message.user：用户消息.message.bot：AI回复消息总结通过AiChat插件，您可以轻松地为Typecho博客添加一个功能强大、界面美观的AI聊天功能。无论是用于回答访客问题，还是作为博客的特色功能，它都能为您的网站增添不少亮点。希望本教程对您有所帮助！如果您在使用过程中遇到任何问题，欢迎在评论区留言或者联系插件作者获取支持。

Typecho handsome 睡眠记录数据展示插件 - SleepData
type: item
date: 2025-07-31T23:41:00+08:00
description: 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_e…

Handsome 主题导航栏添加热榜聚合功能教程
type: item
date: 2025-07-31T15:39:00+08:00
description: 前言在 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 主题博客添加热榜聚合功能，美化网站并为访客提供更多价值。

Typecho handsome 添加评论区OwO表情包 - QQ,抖音,B站等
type: item
date: 2025-07-29T18:46:00+08:00
description: 我对网站的 OwO 表情包进行了一次大规模的扩充，新增和整理了包括 QQ、抖音、哔哩哔哩、微博、贴吧、酷安 等多个平台在内的热门表情。表情总览阿鲁推特B 站抖音酷安QQ微博贴吧滑稽表情包配置详情[collapse status="false" title="QQ"][tabs][tab name="json" active="true"]{ "QQ": { "name": "QQ", "type": "image", "container": [ { "icon": "aini", "text": "爱你" }, { "icon": "aixin", "text": "爱心" }, { "icon": "aoman", "text": "傲慢" }, { "icon": "baiyan", "text": "白眼" }, { "icon": "bangbangtang", "text": "棒棒糖" }, { "icon": "baojin", "text": "抱紧" }, { "icon": "baoquan", "text": "抱拳" }, { "icon": "bishi", "text": "鄙视" }, { "icon": "bizui", "text": "闭嘴" }, { "icon": "cahan", "text": "擦汗" }, { "icon": "daku", "text": "大哭" }, { "icon": "doge", "text": "doge" } // ... 更多QQ表情 ] } }[/tab][tab name="CSS"].emotion-QQ{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="抖音"][tabs][tab name="json" active="true"]{ "抖音": { "name": "douyin", "type": "image", "container": [ { "icon": "1", "text": "抖音-1" }, { "icon": "2", "text": "抖音-2" }, { "icon": "3", "text": "抖音-3" }, { "icon": "4", "text": "抖音-4" }, { "icon": "5", "text": "抖音-5" }, { "icon": "6", "text": "抖音-6" }, { "icon": "7", "text": "抖音-7" }, { "icon": "8", "text": "抖音-8" }, { "icon": "9", "text": "抖音-9" }, { "icon": "10", "text": "抖音-10" } // ... 更多抖音表情 ] } }[/tab][tab name="CSS"].emotion-douyin{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="哔哩哔哩"][tabs][tab name="json" active="true"]{ "哔哩哔哩":{ "name": "bilibili", "type": "image", "container":[ { "icon": "baiyan", "text": "白眼" }, { "icon": "bishi", "text": "鄙视" }, { "icon": "bizui", "text": "闭嘴" }, { "icon": "chan", "text": "馋" }, { "icon": "daku", "text": "大哭" }, { "icon": "dalao", "text": "大佬" }, { "icon": "dalian", "text": "打脸" }, { "icon": "dianzan", "text": "点赞" }, { "icon": "doge", "text": "doge" }, { "icon": "facai", "text": "发财" }, { "icon": "fadai", "text": "发呆" }, { "icon": "fanu", "text": "发怒" } // ... 更多B站表情 ] } }[/tab][tab name="CSS"].emotion-bilibili{width: 35px; height: auto;}[/tab][/tabs][/collapse][…

Typecho handsome 侧边栏显示网站请求总数
type: item
date: 2025-07-25T12:16:00+08:00
description: 本文将详细介绍如何在博客侧边栏实现请求总数显示功能，让您随时掌握网站的访问情况。一、请求总数统计预览二、实现思路实现侧边栏请求总数显示主要包含以下几个步骤：数据来源：从 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' => $err…

Typecho Handsome 添加实时QPS图表 - 兼容pjax
type: item
date: 2025-07-25T11:05:20+08:00
description: 对于使用 Typecho Handsome 主题的博主来说，在侧边栏添加一个能实时反馈网站负载的 QPS (每秒查询率) 图表，是一项非常酷的功能。然而，Handsome 主题强大的 PJAX 无刷新加载特性，也给这类需要持续运行的动态脚本带来了挑战。本教程将详细介绍如何创建一个与 PJAX 完全兼容的实时 QPS 图表，彻底解决在页面跳转后图表“罢工”、数据不再更新的问题。一、最终效果我们最终实现的效果是，在博客侧边栏有一个动态的QPS图表，无论您是首次加载页面，还是通过PJAX在不同页面间导航，这个图表都能持续、稳定地从服务器获取最新数据并实时渲染。二、实现原理为了完美兼容PJAX，我们将整个功能拆分为三个核心部分，各司其职：后台数据更新器：这是“数据源”的核心。它由一个JavaScript脚本 (qps-updater.js) 和一个PHP脚本 (update-qps.php) 组成。qps-updater.js 会在后台持续运行，每隔5秒就向 update-qps.php 发起请求，后者则负责从您的WAF（如长亭雷池）获取最新的QPS数据，并将其写入一个简单的服务器缓存文件 (safeguard_qps.json)。前台图表渲染器：这是“看得见”的部分。它位于您的侧边栏 (sidebar.php)，包含一个图表容器 ( ) 和一段独立的 ECharts 渲染脚本。这段脚本只做一件事：同样每隔5秒，从另一个PHP脚本 (get-qps.php) 读取上述的缓存文件，然后将数据绘制成图表。PJAX 兼容粘合剂：这是解决问题的关键。我们将前台图表的初始化逻辑，封装在一个全局函数 initQPSChartForHandsome() 中。然后，我们只需在 Handsome 主题后台的PJAX回调设置中填入这个函数名。这样，每次PJAX导航完成，主题就会自动调用这个函数，它会先彻底清理掉旧的图表实例和定时器，再重新初始化一个新的，从而实现了完美的无缝衔接。这种前后端分离、逻辑解耦的架构，确保了即使在复杂的PJAX环境中，数据更新和图表渲染也能独立、稳定地运行。三、文件准备请将以下4个文件，按照指定的路径和内容，放置到您的主题目录中。注意：本教程假设您已在 /usr/themes/handsome/static/js/ 目录下放置了 echarts.min.js 文件。这是本地的ECharts图表库，您可以从 ECharts官网 下载最新版本。若您没有此文件，我们的加载器会自动尝试从CDN获取，但建议使用本地版本以获得更好的加载速度和稳定性。1. 数据读取脚本路径: /usr/themes/handsome/component/get-qps.php(该脚本用于让前台图表安全地读取缓存数据)<?php // usr/themes/handsome/component/get-qps.php header('Content-Type: application/json; charset=utf-8'); header('Cache-Control: no-cache, no-store, must-revalidate'); $cache_dir = __DIR__ . '/cache'; $cache_file = $cache_dir . '/safeguard_qps.json'; if (file_exists($cache_file)) { echo file_get_contents($cache_file); } else { // 如果缓存文件不存在，返回一个默认的JSON结构 echo json_encode(['qps' => 0, 'timestamp' => time(), 'simulated' => true]); }2. 数据更新脚本路径: /usr/themes/handsome/component/update-qps.php(该脚本用于从WAF获取真实数据并写入缓存)[hide]<?php // usr/themes/handsome/component/update-qps.php // 仅允许内部JS脚本通过AJAX调用 if ( !isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' ) { header('HTTP/1.1 403 Forbidden'); exit('Access Denied'); } // --- WAF API 配置 --- $api_url = 'https://your.waf.domain:944…

Typech handsome 侧边栏添加QQ等级和信息显示
type: item
date: 2025-07-17T21:13:00+08:00
description: 前言在个人博客的侧边栏展示自己的QQ信息，包括头像、昵称、QQ号、等级和Q龄等，不仅可以增加博客的个性化，还能让访客更好地了解博主。本教程将详细介绍如何在Typecho博客的Handsome主题侧边栏中添加QQ信息卡片功能。效果展示实现后的效果是在侧边栏显示一个包含以下信息的QQ卡片：QQ头像QQ昵称QQ号码Q龄（注册年份）QQ等级（使用emoji表情：👑☀️🌙⭐表示不同等级）实现步骤1. 准备工作首先，我们需要找到合适的API来获取QQ信息。本教程使用的是jkapi.com提供的API服务，它可以根据QQ号获取相关信息，这个用了半个月就不行了，换成了api.dwo.cc的。2. 修改sidebar.php文件在Handsome主题中，侧边栏的内容是由sidebar.php文件控制的。我们需要编辑这个文件来添加QQ信息卡片。2.1 找到合适的位置通常，我们会将QQ信息卡片添加到侧边栏的个人信息模块附近。在sidebar.php文件中找到合适的位置，例如在博主信息卡片之后。2.2 添加QQ信息卡片代码将以下代码添加到选定的位置：[hide] <?php _me("QQ信息") ?> <?php function getQQInfoFromDwoApi($qq) { $url = "https://api.dwo.cc/api/aiys_qq?qq=" . $qq; $ch = curl_init(); // 设置cURL选项 curl_setopt($ch, CURLOPT_URL, $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_TIMEOUT, 5); curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'ckey: *************', // 在header中传递秘钥 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36' ]); $response = curl_exec($ch); curl_close($ch); if ($response) { $data = json_decode($response, true); if (isset($data['code']) && $data['code'] == 200) { return $data; } } return null; } function generateQQLevelIconsHtml($level) { $html = ''; $level = intval($level); // 等级计算规则 $crowns = floor($level / 64); $suns = floor(($level % 64) / 16); $moons = floor(($level % 16) / 4); $stars = $level % 4; // 使用emoji表情替代图片，更加稳定可靠 $crown_icon = '👑'; // 皇冠 $sun_icon = '☀️'; // 太阳 $moon_icon = '🌙'; // 月亮 $star_icon = '⭐'; // 星星 $icon_style = 'style="font-size:16px; margin:0 1px;"'; for ($i = 0; $i < $crowns; $i++) { $html .= '' . $crown_icon . ''; } for ($i = 0; $i < $suns; $i++) { $html .= '' . $sun_icon . ''; } for ($i = 0; $i < $moons; $i++) { $html .= '' . $moon_icon . ''; } for ($i = 0; $i < $stars; $i++) { $html .= '' . $star_icon . ''; } return $html; } // 缓存文件路径 - 使用Typecho的缓存目录 $cache_dir = defined('__TYPECHO_TMP_DIR__') ? __TYPECHO_TMP_D…

分享60个有趣实用的API及其Typecho博客集成指南
type: item
date: 2025-07-17T16:26:00+08:00
description: 引言突发奇想，搜集了一些公开API，为博客添加一些动态和个性化的元素让网站更加生动有趣。本文介绍60个有趣的API，它们都可以集成到Typecho博客中，让您的博客脱颖而出。目录个人社交账号API热搜榜单API工具类API内容增强类API博客功能增强类API游戏与娱乐类API个人社交账号API1. QQ等级显示通过QQ空间API获取您的QQ等级、成长值等信息，并在博客中展示。<?php // 在sidebar.php或自定义页面中添加 function getQQLevel($qq) { $url = "https://r.qzone.qq.com/fcg-bin/cgi_get_score.fcg?mask=7&uins=".$qq; $data = file_get_contents($url); $data = mb_convert_encoding($data, "UTF-8", "GBK"); preg_match('/lvtext:"(\d+级)"/', $data, $level); return isset($level[1]) ? $level[1] : '获取失败'; } $qq = '你的QQ号'; echo '我的QQ等级: '.getQQLevel($qq); ?>2. QQ音乐状态API展示您正在听的QQ音乐歌曲信息。<?php function getQQMusicStatus($qq) { // QQ音乐状态获取 $url = "https://c.y.qq.com/rsc/fcgi-bin/fcg_get_profile_homepage.fcg?format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=yqq&uin=".$qq; $context = stream_context_create([ 'http' => [ 'header' => 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36' ] ]); $data = json_decode(file_get_contents($url, false, $context), true); // 判断是否有正在收听的歌曲 if (isset($data['data']['listen']) && !empty($data['data']['listen']['now'])) { return [ 'status' => true, 'song_name' => $data['data']['listen']['now']['song_name'], 'singer' => $data['data']['listen']['now']['singer'][0]['name'], 'cover' => $data['data']['listen']['now']['cover'] ]; } else { return [ 'status' => false ]; } } $qq = '你的QQ号'; $music = getQQMusicStatus($qq); if ($music['status']) { echo ' '; echo ' 我正在听 '; echo ' '; echo ' '; echo ' '.$music['song_name'].' '; echo ' - '.$music['singer'].' '; echo ' '; echo ' '; echo ' '; } else { echo '暂无音乐播放记录'; } ?>3. 哔哩哔哩UP主数据展示您的B站粉丝数、视频数、播放量等数据。<?php function getBiliStats($uid) { $url = "https://api.bilibili.com/x/relation/stat?vmid=".$uid."&jsonp=jsonp"; $data = json_decode(file_get_contents($url), true); return $data['data']; } $uid = '你的B站UID'; $stats = getBiliStats($uid); echo "粉丝数: ".$stats['follower']; ?>4. 网易云音乐状态展示您最近听的歌曲或者创建一个迷你播放器。<?php // 网易云音乐用户歌单获取 function get…