主题美化、主题优化、前端性能、后端压测、缓存与 Gzip、字体与图片优化，聚焦 LCP/CLS 等核心指标。
修复一下 Handsome 主题顶部统计图表不显示的问题
问题点击导航栏饼图图标，下拉面板里各图表一直 Loading...原因统计图表由 core.min.js 驱动，点击饼图后依次：加载 ECharts → 请求统计数据 → 渲染图表，任一步失败都不显示。步骤失败原因加载 EChartsECHART_CDN 配错，路径拼成 .../echarts.min.js/echarts.min.js → 404请求数据接口 /?action=get_blog_statistic 被 CDN 缓存污染，返回首页 HTML 而非 JSON渲染图表前两步成功才会执行修复步骤core.min.js 是混淆文件，而且以后还要升级，不宜直接改。ECharts 路径可通过配置修正；统计接口 URL 写死在 core 里，只能在 footer 拦截 $.getJSON 改写请求地址。1. 修正 ECharts 路径编辑 usr/themes/handsome/component/header.php，将 ECHART_CDN 改为本地静态目录：ECHART_CDN: '<?php echo rtrim(STATIC_PATH, "/"); ?>/static/js',core 会拼上 /echarts.min.js，最终加载 {STATIC_PATH}static/js/echarts.min.js。使用自定义静态 CDN 时需同步该文件。2. 拦截统计接口编辑 usr/themes/handsome/component/footer.php，在 core.min.js 引用之后插入脚本。core 写死的 /?action=get_blog_statistic 在 CDN 下会拿到首页缓存，拦截后改走 /index.php?action=... 即可绕过。代码：[hide] [/hide]验证强刷页面，点击饼图图标，图表正常显示即可。
功能介绍恋爱块是 Handsome 主题侧边栏中的一个温馨小组件，用于展示情侣之间的相处时间。它包含两个头像、一个跳动的心形图标，以及实时更新的相处时长计时器。组件位置文件路径：/usr/themes/handsome/component/sidebar.php，放在sidebar块中，广告位置之前。参数修改方法1. 修改头像位置：找到以下两行代码 修改方法：将 nk= 后面的数字替换为你们的 QQ 号码获取 QQ 头像 URL 的方法：打开 https://q2.qlogo.cn/g?b=qq&nk=你的QQ号&s=640将 你的QQ号 替换为实际的 QQ 号码s=640 表示头像大小为 640×640 像素2. 修改初始时间位置：找到以下代码行var create_time = Math.round(new Date(Date.UTC(2025, 03, 17, 0, 0, 0)).getTime() / 1000);参数说明：参数含义范围2025年份任意年份03月份0-11（0=1月, 11=12月）17日期1-310小时0-230分钟0-590秒钟0-59修改示例：改成 2024 年 5 月 20 日 14:30:00var create_time = Math.round(new Date(Date.UTC(2024, 04, 20, 14, 30, 0)).getTime() / 1000);⚠️ 注意：月份是从 0 开始计数的1月 = 02月 = 13月 = 2...12月 = 113. 修改跳转链接位置：找到以下代码（出现两次）修改方法：将 https://xuanxi.love/ 替换为你想要的链接示例： 4. 调整动画速度位置：找到以下代码 修改方法：改变 2s 的值时间效果1.2s较快（每秒跳动 0.6 次）1.8s中等2s较慢（默认）2.4s更慢3s非常慢示例： 5. 修改标题文本位置：找到以下代码<?php _me("恋爱") ?>修改方法：改变引号内的文本示例：<?php _me("我们的故事") ?> <?php _me("Love") ?>6. 修改头像大小位置：找到以下代码（两个头像都有） 修改方法：改变 width 和 height 的值示例： 7. 修改 SVG 心形文件位置：找到以下代码 修改方法：将 src 属性中的 URL 替换为你的 SVG 文件地址示例： 如何获取 SVG 文件地址：将你的 SVG 文件上传到服务器或 CDN获取文件的完整 URL将 URL 替换到 src 属性中SVG 文件要求：格式：.svg 文件大小：建议 35×35 像素或更大（会自动缩放）颜色：支持任何颜色，建议与主题配色一致8. 修改心形大小位置：找到以下代码 修改方法：改变 width 和 height 的值示例： 9. 修改时间显示格式位置：找到以下代码currentTimeHtml = '一起走过 ' + currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时';修改方法：改变字符串内容示例：// 显示完整时间（包括分钟） currentTimeHtml = '一起走过 ' + currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时 ' + currentTime[3] + '分'; // 只显示天数 currentTimeHtml = '相处 ' + currentTime[1] + ' 天'; // 英文显示 currentTimeHtml = 'Together for ' + currentTime[0] + ' years ' + currentTime[1] + ' days';代码基础版 <?php _me("恋爱") ?> SVG 文件引入版（推荐） <?php _me("恋爱") ?> SVG 内嵌代码版（完整版） <?php _me("恋爱") ?> <path d="M5.1 831.1h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H5.1c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.3 0h55.8c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z m106.5 0h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H425.9c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.4 0H796c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.4 5.1 5.2 5.1z m106.4 0h172.4c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H846.7c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z" fill="#3B0404"></path> <path d="M409.6 803.5H86.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h118.2c-10.1-3.4-17.3-12.9-17.3-24 0-10.9 6.8-20.1 16.4-23.7h-73.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h130.1l-40.8-40.8-1.8-1.8c-88.1-88.1-88.1-231 0-319.1s231-88.1 319.1 0l1.8 1.8 1.8-1.8c88.1-88.1 231-88.1 319.1 0 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0L409.6 803.5zM54.5 753.1c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4s25.4 11.4 25.4 25.4c0 14.1-11.4 25.4-25.4 25.4z" fill="#FF5E5E"></path> <path d="M668.1 228.8c67.9-9.7 139.3 11.6 191.5 63.8 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0l-5.1-5.1 291.3-291.4 1.8-1.8c88.1-88.1 88.1-231 0-319.1-38.3-38.2-87-59.9-137.1-64.8z" fill="#CB2828"></path> <path d="M196 633.3c2 2 2 5.2 0 7.2s-5.2 2-7.2 0L165.3 617l-1-1-0.3-0.3-0.5-0.5c-54.3-54.3-77.4-130.8-63.8-204.9 0.5-2.8 3.1-4.6 5.9-4.1 2.8 0.5 4.6 3.1 4.1 5.9-13 70.9 9.1 144 61 195.9l0.5 0.5 0.3 0.3 1.1 1.1 23.4 23.4z m-85.3-226c-0.6 2.7-3.2 4.5-6 3.9-2.7-0.6-4.5-3.2-3.9-6 0.3-1.7 0.7-3.4 1.1-5.1 0.6-2.7 3.3-4.4 6.1-3.8 2.7 0.6 4.4 3.3 3.8 6.1-0.4 1.6-0.7 3.3-1.1 4.9z m17.4-51.2c-1.2 2.5-4.3 3.6-6.8 2.4s-3.6-4.3-2.4-6.8c11.1-23 26-44 44.5-62.5 44.3-44.3 103.3-68.1 164.6-67.7 2.8 0 5.1 2.3 5 5.1 0 2.8-2.3 5.1-5.1 5-58.6-0.3-115 22.4-157.4 64.7-17.5 17.7-31.8 37.8-42.4 59.8zM333 231.7c-2.8-0.1-5-2.4-4.9-5.2 0.1-2.8 2.4-5 5.2-4.9 1.7 0 3.5 0.1 5.2 0.2 2.8 0.1 4.9 2.5 4.8 5.3-0.1 2.8-2.5 4.9-5.3 4.8-1.7-0.1-3.4-0.2-5-0.2z m272.4-6c2.7-0.5 5.4 1.3 5.9 4s-1.3 5.4-4 5.9c-42.8 8.3-82.3 29-113.9 60.6l-0.4 0.4-1.5 1.5c-2 2-5.2 2-7.2-0.1-0.6-0.6-1.2-1.2-1.7-1.8-26.9-26.9-59.7-46-95.5-56.2-2.7-0.8-4.3-3.6-3.5-6.3 0.8-2.7 3.6-4.3 6.3-3.5 36.7 10.4 70.3 29.8 98.2 57 32.6-31.9 73.2-53 117.3-61.5z m6.6 9c-2.8 0.5-5.4-1.4-5.9-4.1-0.5-2.8 1.4-5.4 4.1-5.9 1.7-0.3 3.4-0.6 5.1-0.8 2.8-0.4 5.3 1.5 5.8 4.3 0.4 2.8-1.5 5.3-4.3 5.8-1.5 0.2-3.2 0.5-4.8 0.7z m54.6-2.5c-2.8-0.2-4.9-2.7-4.7-5.4 0.2-2.8 2.7-4.9 5.4-4.7 54.4 4.2 105.7 27.5 145.1 66.9 23.1 23.1 40.7 50.3 52.2 80.2 1 2.6-0.3 5.5-2.9 6.6-2.6 1-5.5-0.3-6.6-2.9-11-28.5-27.8-54.6-49.9-76.7-37.6-37.7-86.6-59.9-138.6-64zM857 377.5c-0.9-2.6 0.4-5.5 3.1-6.5 2.6-0.9 5.5 0.4 6.5 3.1 0.6 1.6 1.1 3.3 1.7 4.9 0.9 2.7-0.6 5.5-3.2 6.4-2.7 0.9-5.5-0.6-6.4-3.2-0.6-1.6-1.2-3.1-1.7-4.7z m11.9 53.1c-0.3-2.8 1.8-5.3 4.6-5.5 2.8-0.3 5.3 1.8 5.5 4.6 6.7 68.3-17 136.2-66.5 185.7l-1.8 1.8-36.8 36.8c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l36.8-36.8c0.6-0.6 1.2-1.2 1.8-1.7 47.3-47.5 69.9-112.5 63.6-177.7zM763.1 650.2c2-2 5.2-2 7.2 0s2 5.2 0 7.2l-3.6 3.6c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l3.6-3.6z m-39.4 39.5c2-2 5.2-2 7.2 0s2 5.2 0 7.2L551.6 876.1c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l179.3-179.2zM540.9 872.5c2-2 5.2-2 7.2 0s2 5.2 0 7.2l-3.6 3.6c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l3.6-3.6z m-39.1 38.3c-9.8 6.4-22.9 5.2-31.4-3.1L367.8 805.1c-2-2-5.2-2-7.2 0s-2 5.2 0 7.2L463.3 915c12 11.6 30.3 13.3 44.1 4.4 2.3-1.5 3-4.7 1.5-7-1.6-2.4-4.7-3.1-7.1-1.6z" fill="#3B0404"></path> <path d="M494.3 514.2c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2c8.4 0 15.2 6.8 15.2 15.2s-6.8 15.2-15.2 15.2z m91.3 0c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2 15.2 6.8 15.2 15.2-6.8 15.2-15.2 15.2zM465.1 583.3c18.7 22.9 46.6 36.5 76.7 36.5 29.2 0 56.3-12.7 74.9-34.4 1.8-2.1 1.6-5.3-0.5-7.2-2.1-1.8-5.3-1.6-7.2 0.5-16.8 19.5-41.1 30.9-67.3 30.9-27 0-52.1-12.2-68.8-32.7-1.8-2.2-5-2.5-7.1-0.7s-2.5 5-0.7 7.1z" fill="#3B0404"></path> <path d="M428.4 559.9c-8.4 0-15.2-6.8-15.2-15.2 0-8.4 6.8-15.2 15.2-15.2 8.4 0 15.2 6.8 15.2 15.2 0 8.4-6.8 15.2-15.2 15.2z m223.1 0c-8.4 0-15.2-6.8-15.2-15.2 0-8.4 6.8-15.2 15.2-15.2s15.2 6.8 15.2 15.2c0 8.4-6.8 15.2-15.2 15.2z" fill="#CB2828"></path> <path d="M332.1 483.8c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z m415.8 0c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z" fill="#F54040"></path> <path d="M871.4 125.7v-0.3c0-14.9 12.1-26.9 26.9-26.9s26.9 12.1 26.9 26.9V160.6c0 10.5-8.5 19-19 19H871c-14.9 0-26.9-12.1-26.9-26.9s12.1-26.9 26.9-26.9c0.2-0.1 0.3-0.1 0.4-0.1z" fill="#FF5E5E"></path> 代码参考了小刘同学的文章。爱心下载我找了四个爱心svg，有需要的话可以下载使用：[hide]链接：https://pan.quark.cn/s/b63c88fb9040?pwd=CDSg提取码：CDSg[/hide]
春节到了，给typecho博客网站添加两对3D红灯笼
今天是农历腊月18，距离小年23还有5天，距离春节还有12天，给网站上加俩红灯笼🏮，增添一下气氛。普通版这个版本的是从网上教程里找到的，效果如下：完整denglong.js代码：function createDengContainer() { const container = document.createElement('div'); container.className = 'deng-container'; // 从当前脚本的 URL 获取参数 const scriptSrc = document.currentScript.src; const urlParams = new URLSearchParams(scriptSrc.split('?')[1]); // 获取 '?' const customText = urlParams.get('text'); // 获取参数名为'text'的值 // 将获取的文本分割为字符数组，如果没有提供文本，则使用默认的“新年快乐” const texts = customText ? customText.split('') : ['新', '年', '快', '乐']; texts.forEach((text, index) => { const box = document.createElement('div'); box.className = `deng-box deng-box${index + 1}`; const deng = document.createElement('div'); deng.className = 'deng'; const xian = document.createElement('div'); xian.className = 'xian'; const dengA = document.createElement('div'); dengA.className = 'deng-a'; const dengB = document.createElement('div'); dengB.className = 'deng-b'; const dengT = document.createElement('div'); dengT.className = 'deng-t'; dengT.textContent = text; dengB.appendChild(dengT); dengA.appendChild(dengB); deng.appendChild(xian); deng.appendChild(dengA); const shuiA = document.createElement('div'); shuiA.className = 'shui shui-a'; const shuiC = document.createElement('div'); shuiC.className = 'shui-c'; const shuiB = document.createElement('div'); shuiB.className = 'shui-b'; shuiA.appendChild(shuiC); shuiA.appendChild(shuiB); deng.appendChild(shuiA); box.appendChild(deng); container.appendChild(box); }); document.body.appendChild(container); } // 添加CSS样式 function addStyles() { const style = document.createElement('style'); style.type = 'text/css'; style.textContent = ` .deng-container { position: relative; overflow: hidden; top: 10px; opacity: 0.9; z-index: 9999; pointer-events: none; } .deng-box { position: fixed; right: 10px; top: 12px; } .deng-box1 { position: fixed; top: 15px; left: 20px; } .deng-box2 { position: fixed; top: 12px; left: 130px; } .deng-box3 { position: fixed; top: 10px; right: 120px; } .deng { position: relative; width: 120px; height: 90px; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00; } .deng-a { width: 100px; height: 90px; background: rgba(216, 0, 15, .1); border-radius: 50%; border: 2px solid #dc8f03; margin-left: 7px; display: flex; justify-content: center; } .deng-b { width: 65px; height: 83px; background: rgba(216, 0, 15, .1); border-radius: 60%; border: 2px solid #dc8f03; } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; animation: swing 4s infinite ease-in-out; transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px; } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px; } .deng:before, .deng:after { content: " "; display: block; position: absolute; border-radius: 5px; border: solid 1px #dc8f03; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03); } .deng:before { top: -7px; left: 29px; height: 12px; width: 60px; z-index: 999; } .deng:after { bottom: -7px; left: 10px; height: 12px; width: 60px; margin-left: 20px; } .deng-t { font-family: '华文行楷', Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center; } @media (max-width: 768px) { .deng-t { font-size: 2.5rem; } .deng-box1,.deng-box2{ transform: scale(0.5); transform-origin: left top ; } .deng-box3,.deng-box4 { transform: scale(0.5); transform-origin: right top ; } .deng-box1 { position: fixed; top: 8px; left: 5px; } .deng-box2 { position: fixed; top: 8px; left: 60px; } .deng-box3 { position: fixed; top: 8px; right: 60px; } .deng-box4 { position: fixed; top: 8px; right: 5px; } } @keyframes swing { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } `; document.head.appendChild(style); } // 引入时调用 function init() { addStyles(); createDengContainer(); } // 调用初始化函数 init();3D改进版这个版本是我在普通版基础上做的改动，结合了3D效果，并优化了一下细节，效果如下：完整版denglong.js代码：[hide]function createDengContainer() { const container = document.createElement('div'); container.className = 'deng-container'; const scriptSrc = document.currentScript ? document.currentScript.src : ''; const urlParams = new URLSearchParams(scriptSrc.split('?')[1]); const customText = urlParams.get('text'); const texts = customText ? customText.split('') : ['新', '年', '快', '乐']; texts.forEach((text, index) => { const box = document.createElement('div'); box.className = `deng-box deng-box${index + 1}`; // 3D 容器 (负责摆动) const lantern3D = document.createElement('div'); lantern3D.className = 'lantern-3d'; // 吊线 const xian = document.createElement('div'); xian.className = 'xian'; // --- 【核心修改 2】开始：创建简单的盖子 --- // 不再需要复杂的层叠结构，回归最简单的单层 div const capTop = document.createElement('div'); capTop.className = 'lantern-cap-top'; // 添加提环 const capLoop = document.createElement('div'); capLoop.className = 'cap-loop'; capTop.appendChild(capLoop); const capBottom = document.createElement('div'); capBottom.className = 'lantern-cap-bottom'; // --- 【核心修改 2】结束 --- // 灯笼主体 (负责自转) const lanternBody = document.createElement('div'); lanternBody.className = 'lantern-body'; // 内部光源 const lanternLight = document.createElement('div'); lanternLight.className = 'lantern-light'; lanternBody.appendChild(lanternLight); // 创建瓣片 for (let i = 0; i < 10; i++) { const rib = document.createElement('div'); rib.className = 'rib'; rib.style.transform = `rotateY(${i * 36}deg)`; lanternBody.appendChild(rib); } // 文字 const textDeng = document.createElement('div'); textDeng.className = 'deng-t'; textDeng.textContent = text; // 吊尾 const tassel = document.createElement('div'); tassel.className = 'tassel-total'; // --- 【核心修改 1】开始：中国结改回平面结构 --- tassel.innerHTML = ` `; // --- 【核心修改 1】结束 --- // --- 组装 --- lantern3D.appendChild(xian); // 【关键一步】：把盖子加到 lantern3D，而不是 lanternBody // 这样它们就不会跟着主体自转了！ lantern3D.appendChild(capTop); lantern3D.appendChild(capBottom); lantern3D.appendChild(lanternBody); // 主体在盖子后面转 lantern3D.appendChild(textDeng); lantern3D.appendChild(tassel); box.appendChild(lantern3D); container.appendChild(box); }); document.body.appendChild(container); } function addStyles() { const style = document.createElement('style'); style.type = 'text/css'; style.textContent = ` .deng-container { position: fixed; top: 40px; left: 0; width: 100%; height: 0; z-index: 99999; pointer-events: none; perspective: 800px; } .deng-box { position: fixed; z-index: 999; } .deng-box1 { left: 40px; top: -10px; animation-delay: 0s; } .deng-box2 { left: 180px; top: 30px; animation-delay: 0.5s; } .deng-box3 { right: 180px; top: 30px; animation-delay: 1s; } .deng-box4 { right: 40px; top: -10px; animation-delay: 1.5s; } .xian { position: absolute; left: 60px; width: 3px; background: #ffca28; height: 1000px; top: -1000px; box-shadow: 0 0 5px rgba(255, 202, 40, 0.6); z-index: 1; } /* 容器负责整体摆动 */ .lantern-3d { position: relative; width: 120px; height: 100px; transform-style: preserve-3d; transform-origin: 50% 0; animation: swingNatural 5s infinite ease-in-out; } /* 主体负责自转 */ .lantern-body { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; animation: rotateBody 18s infinite linear; z-index: 5; /* 确保在盖子下面一点 */ } .rib { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 202, 40, 0.6); box-sizing: border-box; background: radial-gradient(circle at 50% 50%, rgba(216,0,15,0) 20%, rgba(216,0,15,0.7) 60%, rgba(216,0,15,0.95) 100%); backface-visibility: visible; } /* --- 【核心修改 2】CSS：简化的、不旋转的盖子 --- */ .lantern-cap-top, .lantern-cap-bottom { position: absolute; left: 35px; width: 50px; height: 12px; /* 使用明亮的金色渐变，看起来像金属 */ background: linear-gradient(to bottom, #ffd700, #ffca28, #b8860b); border: 1px solid #ffca28; border-radius: 4px; z-index: 20; /* 确保盖在旋转体上面 */ /* 增加一点投影，制造悬浮在表面的立体感 */ box-shadow: 0 2px 5px rgba(0,0,0,0.4); } .lantern-cap-top { top: -6px; border-bottom: none; } .lantern-cap-bottom { bottom: -6px; border-top: none; } /* 提环 */ .cap-loop { position: absolute; left: 18px; top: -8px; width: 14px; height: 8px; border: 2px solid #ffca28; border-bottom: none; border-radius: 10px 10px 0 0; } /* --- 【核心修改 2】结束 --- */ .lantern-light { position: absolute; width: 60px; height: 60px; top: 20px; left: 30px; background: #ffeb3b; border-radius: 50%; filter: blur(18px); opacity: 0.9; animation: flicker 3s infinite ease-in-out; } .deng-t { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 3rem; color: #ffca28; font-weight: 700; font-family: "华文行楷", "KaiTi", serif; text-shadow: 0 0 5px #ff6a00, 0 0 20px #ff0000; transform: translateZ(62px); backface-visibility: hidden; -webkit-font-smoothing: antialiased; z-index: 30; } .tassel-total { position: absolute; top: 100px; left: 60px; width: 0; height: auto; transform-style: preserve-3d; animation: tasselSwing 5s infinite ease-in-out; animation-delay: 0.5s; } .tassel-bead { position: absolute; left: -6px; top: 5px; width: 12px; height: 12px; background: radial-gradient(circle at 30% 30%, #fff, #ef5350); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); z-index: 5; } /* --- 【核心修改 1】CSS：改回扁平的中国结 --- */ .tassel-knot-flat { position: absolute; left: -8px; top: 18px; width: 16px; height: 16px; background: #d8000f; /* 纯色背景 */ border: 1px solid #ffca28; transform: rotate(45deg); /* 旋转成菱形 */ box-shadow: 0 2px 5px rgba(0,0,0,0.3); z-index: 4; /* 移除圆角和球体渐变 */ } /* --- 【核心修改 1】结束 --- */ .tassel-threads { position: absolute; left: -7px; top: 32px; width: 14px; height: 70px; background: repeating-linear-gradient(90deg, #d8000f, #d8000f 2px, #ff5252 2.5px, #d8000f 3px); border-radius: 2px 2px 5px 5px; mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); } @keyframes flicker { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes swingNatural { 0% { transform: rotateX(-4deg) rotateZ(-2deg); } 25% { transform: rotateX(2deg) rotateZ(3deg); } 50% { transform: rotateX(4deg) rotateZ(2deg); } 75% { transform: rotateX(-2deg) rotateZ(-3deg); } 100% { transform: rotateX(-4deg) rotateZ(-2deg); } } @keyframes tasselSwing { 0% { transform: rotateX(-5deg) rotateZ(-5deg); } 50% { transform: rotateX(5deg) rotateZ(5deg); } 100% { transform: rotateX(-5deg) rotateZ(-5deg); } } @keyframes rotateBody { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @media (max-width: 768px) { .deng-box { transform: scale(0.6); } .deng-box1 { left: 10px; } .deng-box2 { left: 80px; } .deng-box3 { right: 80px; } .deng-box4 { right: 10px; } } `; document.head.appendChild(style); } function init() { addStyles(); createDengContainer(); } init();[/hide]引用方式1、新建一个denglong.js文件放在你的网站的资源目录下。2、在网站首页的 前引用，比如： 3、handsome主题直接放在自定义尾部即可4、text=春节快乐，text后面的四个字即显示在四个灯笼里面的字，默认是“新年快乐”
发现在bing中能搜索到，但没展示完整，可能是第一次发的字太少了。现在用ai重写了，首页也暂时去掉了倒计时，然后等60天的时候我再回来。给handsome主题的首页加一个精美的倒计时组件，支持多种节日倒计时，包括春节、元旦、情人节等。具有现代化的设计风格，完美适配响应式布局和夜间模式。功能特性现代化设计：采用卡片式设计，支持圆角、阴影和渐变效果响应式布局：完美适配手机、平板和桌面设备夜间模式支持：自动适配主题的暗色模式实时更新：每秒自动刷新倒计时高度可定制：支持自定义日期、标题、颜色和样式动画效果：秒数显示带有脉冲动画效果多节日支持：可轻松切换为不同节日的倒计时效果预览已支持响应式和夜间模式。效果如下：快速使用方法一：通过后台设置（推荐）登录您的Handsome主题后台进入 开发者设置 页面找到 首页列表最前方广告位 选项将下方完整代码复制粘贴到该位置保存设置即可方法二：直接编辑主题文件如果熟悉代码编辑，也可以直接编辑主题文件：文件位置：usr/themes/handsome/在首页模板文件中添加代码代码如下：[hide] 2026年 - 春节倒计时 -- 天 -- 时 -- 分 -- 秒 [/hide]
前言在搭建个人博客时，我们通常需要集成多个统计服务来跟踪网站访问数据，如 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 主题开发文档本文基于当前主流浏览器和统计服务的最新文档整理而成，如有更新请以官方文档为准。
优雅的字体能够显著提升网站的阅读体验和视觉效果。本文将详细介绍如何在 Typecho Handsome 主题中更换为各种优秀的中文字体。🎯 基础设置方法第一步：在自定义 head 中添加字体链接进入 Handsome 主题后台 → 主题设置 → 自定义 head，添加对应字体的 CSS 链接。第二步：在自定义 CSS 中应用字体进入 Handsome 主题后台 → 主题设置 → 自定义 CSS，添加字体样式规则。📝 热门字体推荐与配置（13种精选字体）1. 霞鹜文楷（推荐✨）特色：优雅的楷体风格，适合阅读，支持简繁中文适用场景：博客文章、文学网站、个人日记[hide]屏幕阅读版（推荐） 或者 /* 自定义 CSS */ body { font-family: "LXGW WenKai Screen", sans-serif; } /* 如果想让文章内容也应用字体 */ #post-content { font-family: "LXGW WenKai Screen", sans-serif; }[/hide]2. 思源黑体特色：现代简洁，可读性强，适合正文显示适用场景：企业网站、新闻博客、技术文档[hide] /* 自定义 CSS */ body { font-family: "Noto Sans SC", sans-serif; } #post-content { font-family: "Noto Sans SC", sans-serif; }[/hide]2. MiSans（小米无线字体）特色：小米设计的现代无衬线字体，简洁清晰，适合各种场景适用场景：现代网站、移动端应用、科技博客[hide] /* 自定义 CSS */ body { font-family: "MiSans", sans-serif; } #post-content { font-family: "MiSans", sans-serif; }[/hide]3. 思源宋体特色：经典宋体，适合长文本阅读，优雅传统适用场景：文学作品、学术论文、传统文化网站[hide] /* 自定义 CSS */ body { font-family: "Source Han Serif", serif; } #post-content { font-family: "Source Han Serif", serif; }[/hide]4. 阿里巴巴普惠体特色：温和友好，商务感强，阿里设计团队出品适用场景：商业网站、产品介绍、企业博客[hide] /* 自定义 CSS */ body { font-family: "Alibaba PuHuiTi", sans-serif; } #post-content { font-family: "Alibaba PuHuiTi", sans-serif; }[/hide]5. 优设标题黑特色：醒目有力，适合标题使用，设计感强适用场景：设计网站、创意博客、标题重点突出[hide] /* 自定义 CSS */ h1, h2, h3, h4, h5, h6 { font-family: "YouSheBiaoTiHei", sans-serif; } /* 如果想要全站应用 */ body { font-family: "YouSheBiaoTiHei", sans-serif; }[/hide]6. 站酷快乐体特色：轻松活泼，充满趣味性，适合轻松主题适用场景：个人博客、娱乐网站、儿童相关内容[hide] /* 自定义 CSS */ body { font-family: "ZCOOL KuaiLe", cursive; } #post-content { font-family: "ZCOOL KuaiLe", cursive; }[/hide]7. 得意黑特色：轻松活泼，带有亲和力，B站官方开源字体适用场景：生活博客、创意网站、年轻群体[hide] /* 自定义 CSS */ body { font-family: "SmileySans", sans-serif; } #post-content { font-family: "SmileySans", sans-serif; }[/hide]8. 悠哉字体特色：圆润可爱，休闲风格，适合长时间阅读适用场景：个人博客、生活分享、轻松主题[hide] /* 自定义 CSS */ body { font-family: "Yozai", sans-serif; } #post-content { font-family: "Yozai", sans-serif; }[/hide]9. 抖音美好体特色：时尚现代，富有活力，字节跳动设计适用场景：时尚博客、创意展示、年轻化网站[hide] /* 自定义 CSS */ body { font-family: "DouyinSans", sans-serif; } #post-content { font-family: "DouyinSans", sans-serif; }[/hide]10. 仓耳今楷01特色：现代楷体，典雅清秀，笔画流畅适用场景：文化类网站、诗词博客、传统艺术展示[hide] /* 自定义 CSS */ body { font-family: "TsangerType JinKai01", "KaiTi", serif; } #post-content { font-family: "TsangerType JinKai01", "KaiTi", serif; }[/hide]11. 鸿蒙字体（HarmonyOS Sans）特色：华为官方字体，现代简洁，多语言支持，易读性强适用场景：科技网站、现代企业站、移动端友好的博客[hide] /* 自定义 CSS */ body { font-family: "HarmonyOS Sans SC", sans-serif; } #post-content { font-family: "HarmonyOS Sans SC", sans-serif; }备用CDN（推荐） [/hide]12. 焦糖玛奇朵体特色：温暖可爱，如焦糖般的甜美感，适合轻松愉快的内容适用场景：美食博客、生活分享、甜品店网站、温馨主题[hide] /* 自定义 CSS */ body { font-family: "Caramel Macchiato", cursive; } #post-content { font-family: "Caramel Macchiato", cursive; } /* 建议搭配暖色调 */ h1, h2, h3 { font-family: "Caramel Macchiato", cursive; color: #8B4513; /* 焦糖色 */ }[/hide]13. OPPO Sans特色：OPPO官方设计字体，现代简洁，几何感强，科技感十足适用场景：科技网站、数码产品展示、现代企业站、移动应用界面[hide] /* 自定义 CSS */ body { font-family: "OPPO Sans", sans-serif; } #post-content { font-family: "OPPO Sans", sans-serif; } /* 标题使用较粗字重突出科技感 */ h1, h2, h3, h4, h5, h6 { font-family: "OPPO Sans", sans-serif; font-weight: 600; }[/hide]🛠️ 高级配置字体粗细控制/* 标题使用较粗字重 */ h1, h2, h3, h4, h5, h6 { font-family: "LXGW WenKai Screen", sans-serif; font-weight: 700; } /* 正文使用常规字重 */ body, p { font-family: "LXGW WenKai Screen", sans-serif; font-weight: 400; } /* 代码块保持等宽字体 */ code, pre { font-family: "Monaco", "Menlo", "Consolas", monospace; }响应式字体大小/* 基础字体设置 */ body { font-family: "LXGW WenKai Screen", sans-serif; font-size: 16px; line-height: 1.7; } /* 移动端优化 */ @media (max-width: 768px) { body { font-size: 14px; line-height: 1.6; } } /* 大屏幕优化 */ @media (min-width: 1200px) { body { font-size: 18px; line-height: 1.8; } }🚀 CDN 服务商推荐（中国境内可用）国内优质 CDN小米字体服务：https://font.sec.miui.com/ （稳定快速，支持多种字体）奇虎360 CDN：https://lib.baomitu.com/ （免费稳定，字体资源丰富）阿里字体服务：https://fonts.alicdn.com/ （阿里官方，加载速度快）七牛云 CDN：https://cdn.staticfile.org/ （企业级服务，可靠性高）字节跳动 CDN：https://lf-cdn-tos.bytecdntp.com/ （新兴服务，速度优秀）专业字体平台中文网字计划：https://chinese-font.netlify.app/ （开源免费，字体种类丰富）文风字体：https://windfonts.com/ （专为中文设计，免费可商用）jsDelivr：https://cdn.jsdelivr.net/ （全球CDN，国内可用）⚡ 性能优化建议1. 字体预加载 2. font-display 优化@font-face { font-family: 'CustomFont'; src: url('font.woff2') format('woff2'); font-display: swap; /* 确保文字快速显示，避免闪烁 */ }3. 字体回退策略/* 推荐的字体栈配置 */ body { font-family: "MiSans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } /* 宋体类字体栈 */ .serif-font { font-family: "Source Han Serif", "Noto Serif SC", "SimSun", serif; }⚠️ 重要注意事项1. 兼容性测试浏览器兼容：在Chrome、Firefox、Safari、Edge等主流浏览器测试设备适配：确保在PC、平板、手机等设备正常显示系统差异：Windows、macOS、Android、iOS等系统字体显示可能略有差异2. 加载性能字体大小：中文字体文件通常较大（2-10MB），选择压缩版本加载策略：使用 font-display: swap 避免文字闪烁CDN选择：选择国内CDN确保加载速度3. 版权合规开源字体：优先选择开源免费字体，如霞鹜文楷、思源系列商用授权：商业网站使用前确认字体授权范围版权标识：部分字体需要保留版权信息4. 用户体验可读性：确保字体在不同尺寸下都清晰可读一致性：保持网站整体字体风格统一无障碍：考虑视障用户需求，避免过于花哨的字体🎨 字体搭配建议经典搭配方案方案一：现代简约/* 标题使用 MiSans */ h1, h2, h3, h4, h5, h6 { font-family: "MiSans", sans-serif; font-weight: 500; } /* 正文使用思源黑体 */ body, p { font-family: "Noto Sans SC", sans-serif; font-weight: 400; }方案二：文艺典雅/* 标题使用霞鹜文楷 */ h1, h2, h3, h4, h5, h6 { font-family: "LXGW WenKai Screen", serif; font-weight: 500; } /* 正文使用思源宋体 */ body, p { font-family: "Source Han Serif", serif; font-weight: 400; }方案三：年轻活泼/* 标题使用得意黑 */ h1, h2, h3, h4, h5, h6 { font-family: "SmileySans", sans-serif; font-weight: 600; } /* 正文使用悠哉字体 */ body, p { font-family: "Yozai", sans-serif; font-weight: 400; }细节优化/* 代码块保持等宽字体 */ code, pre { font-family: "Monaco", "Menlo", "Consolas", "JetBrains Mono", monospace; } /* 引用块使用斜体 */ blockquote { font-style: italic; font-weight: 300; } /* 响应式字体大小 */ @media (max-width: 768px) { body { font-size: 14px; } } @media (min-width: 1200px) { body { font-size: 18px; } }通过合理选择和配置字体，您的 Typecho 博客将呈现更加专业和美观的视觉效果！记住要根据网站主题和目标用户选择最合适的字体组合。
前言本教程介绍如何为 Typecho Handsome 主题 v10.1.0 定制响应式宽度，使博客在各种屏幕尺寸下都能获得最佳显示效果。CSS 代码将以下 CSS 代码添加到 Typecho 的自定义 CSS 中：@media (min-width: 1200px) { .app.container { width: 90%; } .app.container .app-aside { max-width: 90%; } /* 适用于所有宽屏尺寸的头部宽度修正 (Handsome v10.1.0) */ .app.container .app-header { max-width: 100%; } } @media (min-width: 1700px) { .app.container { width: 85%; } .app.container .app-aside { max-width: 85%; } } @media (min-width: 2048px) { .app.container { width: 80%; max-width: 1800px; } .app.container .app-aside { max-width: 80%; } }如何自定义宽度若要调整页面宽度，只需在上述 CSS 代码中找到对应屏幕尺寸的媒体查询块 (@media ...)，然后修改 .app.container 和 .app.container .app-aside 的百分比。重要规则:.app.container 的 width 和 .app.container .app-aside 的 max-width 的百分比必须保持一致。注意不要修改 .app.container .app-header 的 max-width: 100% ，这是确保头部正确对齐的。示例：将 1700px 以上屏幕的宽度改为 90%/* 修改前 */ @media (min-width: 1700px) { .app.container { width: 85%; } .app.container .app-aside { max-width: 85%; } } /* 修改后 */ @media (min-width: 1700px) { .app.container { width: 90%; /* ← 修改这里 */ } .app.container .app-aside { max-width: 90%; /* ← 修改这里，与上面保持一致 */ } }参考文章 https://www.52txr.cn/2022/cssmargin.html
Typecho handsome 添加评论区OwO表情包 - QQ,抖音,B站等
我对网站的 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][collapse status="false" title="阿鲁"][tabs][tab name="json" active="true"]{ "阿鲁": { "name": "aru", "type": "image", "container": [ { "icon": "despise", "text": "鄙视" }, { "icon": "knife", "text": "插刀" }, { "icon": "pouting", "text": "亲嘴" }, { "icon": "shutup", "text": "闭嘴" }, { "icon": "unhappy", "text": "不开心" }, { "icon": "discovertruth", "text": "发现真相" }, { "icon": "shit", "text": "便便" }, { "icon": "distressed", "text": "烦恼" }, { "icon": "shy", "text": "捂脸" }, { "icon": "speechless", "text": "无语" }, { "icon": "confuse", "text": "迷惑" }, { "icon": "frown", "text": "皱眉" } // ... 更多阿鲁表情 ] } }[/tab][tab name="CSS"].emotion-aru{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="推特"][tabs][tab name="json" active="true"]{ "推特": { "type": "image", "name": "twemoji", "container": [ { "icon": "smile", "text": "微笑" }, { "icon": "tongue", "text": "吐舌" }, { "icon": "tilted", "text": "歪头" }, { "icon": "tiaomei", "text": "挑眉" }, { "icon": "shy", "text": "害羞" }, { "icon": "sweat", "text": "流汗" }, { "icon": "proud", "text": "得意" }, { "icon": "uncomfort", "text": "难受" }, { "icon": "smilecry", "text": "笑哭" }, { "icon": "love", "text": "喜欢" }, { "icon": "notalk", "text": "不说话" }, { "icon": "happy", "text": "开心" } // ... 更多推特表情 ] } }[/tab][tab name="CSS"].emotion-twemoji{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="滑稽"][tabs][tab name="json" active="true"]{ "滑稽": { "type": "image", "name": "funny", "container": [ { "icon": "01", "text": "滑稽-1" }, { "icon": "02", "text": "滑稽-2" }, { "icon": "03", "text": "滑稽-3" }, { "icon": "04", "text": "滑稽-4" }, { "icon": "05", "text": "滑稽-5" }, { "icon": "06", "text": "滑稽-6" }, { "icon": "07", "text": "滑稽-7" }, { "icon": "08", "text": "滑稽-8" }, { "icon": "09", "text": "滑稽-9" }, { "icon": "10", "text": "滑稽-10" }, { "icon": "11", "text": "滑稽-11" }, { "icon": "12", "text": "滑稽-12" } // ... 更多滑稽表情 ] } }[/tab][tab name="CSS"].emotion-funny{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="微博"][tabs][tab name="json" active="true"]{ "微博": { "name": "weibo", "type": "image", "container": [ { "icon": "weibo_dog1", "text": "微博-dog1" }, { "icon": "weibo_dog11", "text": "微博-dog11" }, { "icon": "weibo_dog12", "text": "微博-dog12" }, { "icon": "weibo_dog3", "text": "微博-dog3" }, { "icon": "d_aini", "text": "爱你" }, { "icon": "d_aoteman", "text": "奥特曼" }, { "icon": "d_bingbujiandan", "text": "并不简单" }, { "icon": "d_bishi", "text": "鄙视" }, { "icon": "d_dahaqi", "text": "打哈气" }, { "icon": "d_xixi", "text": "嘻嘻" }, { "icon": "f_geili", "text": "给力" }, { "icon": "f_hufen", "text": "互粉" } // ... 更多微博表情 ] } }[/tab][tab name="CSS"].emotion-weibo{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="贴吧"][tabs][tab name="json" active="true"]{ "贴吧": { "name": "tieba", "type": "image", "container": [ { "icon": "tieba_emotion_02", "text": "贴吧-2" }, { "icon": "tieba_emotion_04", "text": "贴吧-4" }, { "icon": "tieba_emotion_05", "text": "贴吧-5" }, { "icon": "tieba_emotion_10", "text": "贴吧-10" }, { "icon": "tieba_emotion_11", "text": "贴吧-11" }, { "icon": "tieba_emotion_13", "text": "贴吧-13" }, { "icon": "tieba_emotion_14", "text": "贴吧-14" }, { "icon": "tieba_emotion_17", "text": "贴吧-17" }, { "icon": "tieba_emotion_23", "text": "贴吧-23" }, { "icon": "tieba_emotion_28", "text": "贴吧-28" }, { "icon": "tieba_emotion_30", "text": "贴吧-30" }, { "icon": "tieba_emotion_31", "text": "贴吧-31" } // ... 更多贴吧表情 ] } }[/tab][tab name="CSS"].emotion-tieba{width: 35px; height: auto;}[/tab][/tabs][/collapse][collapse status="false" title="酷安"][tabs][tab name="json" active="true"]{ "酷安": { "name": "kuan", "type": "image", "container": [ { "icon": "coolapk_emotion_100_qqdoge", "text": "qqdoge" }, { "icon": "coolapk_emotion_1010", "text": "酷安-1010" }, { "icon": "coolapk_emotion_1011", "text": "酷安-1011" }, { "icon": "coolapk_emotion_1012", "text": "酷安-1012" }, { "icon": "coolapk_emotion_101_pyjiaoyi", "text": "py交易" }, { "icon": "coolapk_emotion_102_fadai", "text": "发呆" }, { "icon": "coolapk_emotion_103_nb", "text": "nb" }, { "icon": "coolapk_emotion_104", "text": "酷安-104" }, { "icon": "coolapk_emotion_7_hehe", "text": "呵呵" }, { "icon": "coolapk_emotion_20_qinqin", "text": "亲亲" }, { "icon": "coolapk_emotion_14_bishi", "text": "鄙视" }, { "icon": "coolapk_emotion_1_hahaha", "text": "哈哈哈" } // ... 更多酷安表情 ] } }[/tab][tab name="CSS"].emotion-kuan{width: 35px; height: auto;}[/tab][/tabs][/collapse]使用说明下载地址完整的表情包合集和JSON文件：[hide]https://pan.xunlei.com/s/VOWLCVzpFoIhJcrKIo_BASAlA1?pwd=q7k6#[/hide]安装步骤下载表情包文件，解压到 /usr/themes/handsome/assets/img/emotion/ 目录下修改 /usr/themes/handsome/usr/OwO.json 文件，添加或更新表情包配置配置注意事项修改 OwO.json 文件时请注意 JSON 格式，确保格式正确无误表情包文件夹名称需要与 JSON 配置中的 name 值相同每个表情的 icon 值对应表情文件的文件名（不含扩展名）text 值为表情的显示名称，也是在评论中插入表情时使用的快捷代码示例配置"QQ": { "name": "QQ", // 对应文件夹名 /emotion/QQ/ "type": "image", "container": [ { "icon": "aini", // 对应文件 /emotion/QQ/aini.png "text": "爱你" // 表情显示名称和快捷代码 }, // 更多表情... ] }CDN 加速说明如果你的网站开启了 CDN 加速，请将表情包文件夹上传至CDN的 assets/img/emotion 目录下，确保 CDN 能够正确缓存和加速这些图片资源。CSS 样式定制为了统一管理表情包的显示效果，你可以在主题后台添加自定义 CSS 代码。这样可以方便地调整所有表情包的大小和其他样式。示例代码/* 表情包大小统一设置 */ .emotion-QQ { width: 35px; height: auto; } .emotion-douyin { width: 35px; height: auto; } .emotion-bilibili { width: 35px; height: auto; } .emotion-aru { width: 35px; height: auto; } .emotion-twemoji { width: 35px; height: auto; } .emotion-funny { width: 35px; height: auto; } .emotion-weibo { width: 35px; height: auto; } .emotion-tieba { width: 35px; height: auto; } .emotion-kuan { width: 35px; height: auto; } /* 可选：鼠标悬停放大效果 */ .OwO-body .OwO-item img:hover { transform: scale(1.2); transition: transform 0.2s ease; } /* 表情选择面板样式优化，默认386px只能显示7个表情，修改为546px可以显示10个表情 */ .OwO .OwO-body { max-height: 250px; width: 546px!important; } 这个由于面板样式的原因，刚开始加了很多但不显示，找了半天又改了半天才可以，也是废费了点小功夫。你可以根据自己的喜好调整表情大小，只需修改 width 的值即可。例如，改为 width: 35px 可以增大表情显示尺寸。表情格式转换说明由于handsome不支持直接设置GIF，且需要保持动画效果，我将原始的 QQ 表情 GIF 文件转换为 APNG 格式。APNG（Animated PNG）格式既保留了 PNG 的透明度优势，又能够显示动画效果。转换方法使用 gif2apng 命令行工具进行批量转换转换命令：gif2apng input.gif output.png批量处理脚本示例：for %i in (*.gif) do gif2apng "%i" "%~ni.png"注意：普通图片查看器可能无法正确显示 APNG 的动画效果，但在浏览器中可以正常播放动画。
分享60个有趣实用的API及其Typecho博客集成指南
引言突发奇想，搜集了一些公开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 getNeteaseMusicPlaylist($uid) { $url = "http://music.163.com/api/user/playlist/?offset=0&limit=1&uid=".$uid; $data = json_decode(file_get_contents($url), true); return $data['playlist'][0]['id']; } $uid = '你的网易云音乐ID'; $playlistId = getNeteaseMusicPlaylist($uid); ?> <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=<?php echo $playlistId; ?>&auto=0&height=66"> 5. GitHub贡献统计在博客上展示您的GitHub贡献图表。 6. 豆瓣读书/电影展示您最近阅读的书籍或观看的电影。<?php function getDoubanRecentBooks($uid) { $url = "https://api.douban.com/v2/book/user/".$uid."/collections?status=reading&count=5"; $data = json_decode(file_get_contents($url), true); return $data; } $uid = '你的豆瓣ID'; $books = getDoubanRecentBooks($uid); foreach ($books['collections'] as $book) { echo $book['book']['title'].' '; } ?>7. Instagram基本数据通过Instagram API展示您的基本数据。<?php function getInstagramBasicData($access_token) { $url = "https://graph.instagram.com/me?fields=id,username,account_type&access_token=".$access_token; $data = json_decode(file_get_contents($url), true); return $data; } $access_token = "您的Instagram访问令牌"; $data = getInstagramBasicData($access_token); echo "Instagram用户名: ".$data['username']; ?>8. Discord服务器状态展示您的Discord服务器状态和成员数。<?php function getDiscordServerInfo($server_id, $bot_token) { $url = "https://discord.com/api/guilds/".$server_id; $context = stream_context_create([ 'http' => [ 'header' => 'Authorization: Bot '.$bot_token ] ]); $data = json_decode(file_get_contents($url, false, $context), true); return $data; } $server_id = "您的Discord服务器ID"; $bot_token = "您的Discord机器人令牌"; $server = getDiscordServerInfo($server_id, $bot_token); echo "Discord服务器: ".$server['name']." "; echo "成员数: ".$server['approximate_member_count']; ?>9. Telegram频道订阅数展示您的Telegram频道订阅人数。<?php function getTelegramChannelInfo($channel_name) { // 需要通过Telegram Bot API获取频道信息 $bot_token = "您的Telegram机器人令牌"; $url = "https://api.telegram.org/bot".$bot_token."/getChatMembersCount?chat_id=@".$channel_name; $data = json_decode(file_get_contents($url), true); return $data['result']; } $channel = "您的频道名称（不含@）"; $subscribers = getTelegramChannelInfo($channel); echo "@".$channel." 订阅人数: ".$subscribers; ?>10. 小红书笔记展示在博客中展示您最近的小红书笔记。<?php function getXiaoHongShuPosts($userId) { // 获取小红书用户公开信息 $url = "https://www.xiaohongshu.com/user/profile/" . $userId; $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' ] ]); $html = file_get_contents($url, false, $context); // 使用正则表达式提取笔记信息 // 注意：这是一个简化版，实际需要考虑网站结构变化 preg_match_all('/ (.*?)<\/div>/s', $html, $matches); $posts = []; foreach ($matches[1] as $match) { if (preg_match('/<img src="(.*?)"/s', $match, $img) && preg_match('/ (.*?)<\/div>/s', $match, $title)) { $posts[] = [ 'title' => trim($title[1]), 'image' => $img[1] ]; } } return $posts; } $userId = '你的小红书ID'; $posts = getXiaoHongShuPosts($userId); echo ' 我的小红书笔记 '; echo ' '; foreach (array_slice($posts, 0, 4) as $post) { echo ' '; echo ' '; echo ' '.$post['title'].' '; echo ' '; } echo ' '; ?>11. 王者荣耀战绩API展示您的王者荣耀游戏数据。<?php function getKingGloryStats($openId) { // 需要通过官方申请接口权限，这里仅提供示例 $apiKey = '你的API密钥'; $url = "https://api.wgapi.com/v2/player?openid={$openId}&token={$apiKey}"; $data = json_decode(file_get_contents($url), true); if ($data['code'] == 200) { return [ 'nickname' => $data['data']['nickname'], 'tier' => $data['data']['tier_name'], 'win_rate' => $data['data']['win_rate'], 'total_matches' => $data['data']['total_matches'] ]; } else { return null; } } $openId = '您的王者荣耀OpenID'; $stats = getKingGloryStats($openId); if ($stats) { echo ' '; echo ' 我的王者荣耀战绩 '; echo ' 昵称: '.$stats['nickname'].' '; echo ' 段位: '.$stats['tier'].' '; echo ' 胜率: '.$stats['win_rate'].'% '; echo ' 总场次: '.$stats['total_matches'].' '; echo ' '; } else { echo '数据获取失败'; } ?>12. Steam游戏状态展示您的Steam游戏状态和最近玩的游戏。<?php function getSteamGameStatus($steamid, $apikey) { $url = "https://api.steampowered.com/IPlayerService/GetRecentlyPlayedGames/v1/?key=".$apikey."&steamid=".$steamid."&format=json"; $data = json_decode(file_get_contents($url), true); return $data['response']['games']; } $steamid = '你的SteamID'; $apikey = '你的Steam API密钥'; $games = getSteamGameStatus($steamid, $apikey); echo " 我最近玩的游戏 "; foreach(array_slice($games, 0, 3) as $game) { echo $game['name']." - 最近游戏时间: ".round($game['playtime_2weeks']/60, 1)." 小时 "; } ?>热搜榜单API13. 微博热搜API展示实时的微博热搜榜单。<?php function getWeiboHotSearch() { $url = "https://weibo.com/ajax/side/hotSearch"; $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); return $data['data']['realtime']; } echo " 微博热搜 "; echo " "; foreach(array_slice(getWeiboHotSearch(), 0, 10) as $item) { echo " ".$item['note']." (".number_format($item['num']).") "; } echo " "; ?>14. 知乎热榜API展示知乎热门话题。<?php function getZhihuHotTopics() { $url = "https://www.zhihu.com/api/v3/feed/topstory/hot-lists/total?limit=10"; $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); return $data['data']; } echo " 知乎热榜 "; echo " "; foreach(getZhihuHotTopics() as $item) { echo " ".$item['target']['title']." "; } echo " "; ?>15. 抖音热门话题展示当前抖音热门话题和标签。<?php function getDouyinHotTopics() { // 使用公开的抖音热榜API $url = "https://www.iesdouyin.com/web/api/v2/hotsearch/billboard/word/"; $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['word_list'])) { return $data['word_list']; } else { return []; } } $topics = getDouyinHotTopics(); echo ' 抖音热门话题 '; echo ' '; foreach (array_slice($topics, 0, 10) as $index => $topic) { echo ' '; echo ''.($index + 1).' '; echo $topic['word']; if (isset($topic['hot_value'])) { echo ' ('.number_format($topic['hot_value']).')'; } echo ' '; } echo ' '; ?>16. 百度热搜榜展示百度搜索热榜内容。<?php function getBaiduHotSearch() { $url = "https://top.baidu.com/api/board?platform=wise&tab=realtime"; $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']['cards'][0]['content'])) { return $data['data']['cards'][0]['content']; } else { return []; } } $hotSearches = getBaiduHotSearch(); echo ' 百度热搜榜 '; echo ' '; foreach (array_slice($hotSearches, 0, 10) as $index => $item) { echo ' '; echo ''.($index + 1).' '; echo $item['word']; if (isset($item['hotScore'])) { echo ' ('.number_format($item['hotScore']).')'; } echo ' '; } echo ' '; ?>17. 腾讯新闻热点展示腾讯新闻热点话题。<?php function getTencentHotNews() { $url = "https://i.news.qq.com/trpc.qqnews_web.kv_srv.kv_srv_http_proxy/list?sub_srv_id=24hours&srv_id=pc"; $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']['list'])) { return $data['data']['list']; } else { return []; } } $hotNews = getTencentHotNews(); echo ' 腾讯新闻热点 '; echo ' '; foreach (array_slice($hotNews, 0, 10) as $index => $news) { echo ' '; echo ''.($index + 1).' '; echo ''.$news['title'].''; echo ' '; } echo ' '; ?>18. 哔哩哔哩热搜展示B站当前热搜词。<?php function getBilibiliHotSearch() { $url = "https://api.bilibili.com/x/web-interface/search/square?limit=10"; $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']['trending']['list'])) { return $data['data']['trending']['list']; } else { return []; } } $hotSearch = getBilibiliHotSearch(); echo ' B站热搜 '; echo ' '; foreach ($hotSearch as $index => $item) { echo ' '; echo ''.($index + 1).' '; echo $item['keyword']; if (isset($item['show_name'])) { echo ' '.$item['show_name'].''; } echo ' '; } echo ' '; ?>19. 即刻社区热门展示即刻社区的热门话题。<?php function getJikeCommunityHot() { // 即刻热门话题API $url = "https://api.ruguoapp.com/1.0/topics/recommendation/list"; $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' ] ]); try { $data = json_decode(file_get_contents($url, false, $context), true); if (isset($data['data'])) { return $data['data']; } } catch (Exception $e) { // 接口可能不稳定，返回一些示例数据 return [ ['content' => '今天又是元气满满的一天', 'likeCount' => 2453], ['content' => '来分享你的摄影作品', 'likeCount' => 1892], ['content' => '程序员日常', 'likeCount' => 1654], ['content' => '美食分享计划', 'likeCount' => 1245], ['content' => '今日份猫猫', 'likeCount' => 985] ]; } return []; } $topics = getJikeCommunityHot(); echo ' 即刻热门话题 '; echo ' '; foreach (array_slice($topics, 0, 5) as $topic) { echo ' '; echo $topic['content']; if (isset($topic['likeCount'])) { echo ' ('.$topic['likeCount'].'人关注)'; } echo ' '; } echo ' '; ?>20. 搜狗热搜榜展示搜狗搜索引擎热搜榜。<?php function getSogouHotSearch() { $url = "https://top.sogou.com/hot/json"; $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' ] ]); try { $data = json_decode(file_get_contents($url, false, $context), true); if (isset($data['data'])) { return $data['data']; } } catch (Exception $e) { // 返回示例数据 return [ ['keyword' => '热门电影', 'heat' => 9876], ['keyword' => '国内新闻头条', 'heat' => 8765], ['keyword' => '今日天气', 'heat' => 7654], ['keyword' => '最新游戏', 'heat' => 6543], ['keyword' => '热门综艺', 'heat' => 5432] ]; } return []; } $hotSearch = getSogouHotSearch(); echo ' 搜狗热搜榜 '; echo ' '; foreach (array_slice($hotSearch, 0, 10) as $index => $item) { echo ' '; echo ''.($index + 1).' '; echo $item['keyword']; if (isset($item['heat'])) { echo ' ('.number_format($item['heat']).')'; } echo ' '; } echo ' '; ?>21. 360热搜榜展示360搜索热榜内容。<?php function get360HotSearch() { $url = "https://trends.so.com/hot/search"; $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' ] ]); try { $html = file_get_contents($url, false, $context); // 使用正则表达式提取数据 preg_match_all('/(.*?)<\/a>/s', $html, $matches); $results = []; for ($i = 0; $i < count($matches[2]); $i++) { $results[] = [ 'keyword' => trim(strip_tags($matches[2][$i])), 'url' => $matches[1][$i] ]; } return $results; } catch (Exception $e) { // 返回示例数据 return [ ['keyword' => '今日头条', 'url' => '#'], ['keyword' => '最新电影', 'url' => '#'], ['keyword' => '热门游戏', 'url' => '#'], ['keyword' => '流行音乐', 'url' => '#'], ['keyword' => '科技新闻', 'url' => '#'] ]; } } $hotSearch = get360HotSearch(); echo ' 360热搜榜 '; echo ' '; foreach (array_slice($hotSearch, 0, 10) as $index => $item) { echo ' '; echo ''.($index + 1).' '; echo ''.$item['keyword'].''; echo ' '; } echo ' '; ?>22. 热搜聚合展示将多个热搜榜单整合到一个页面展示。<?php // 获取各平台热搜函数 // ... (使用前面定义的函数) ... // 展示聚合热搜 echo ' '; // 微博热搜 echo ' '; echo ' 微博热搜 '; echo ' '; foreach(array_slice(getWeiboHotSearch(), 0, 5) as $index => $item) { echo ' '.($index + 1).' '.$item['note'].' '; } echo ' '; echo ' '; // 知乎热榜 echo ' '; echo ' 知乎热榜 '; echo ' '; foreach(array_slice(getZhihuHotTopics(), 0, 5) as $index => $item) { echo ' '.($index + 1).' '.$item['target']['title'].' '; } echo ' '; echo ' '; // 百度热搜 echo ' '; echo ' 百度热搜 '; echo ' '; $baiduHot = getBaiduHotSearch(); foreach(array_slice($baiduHot, 0, 5) as $index => $item) { echo ' '.($index + 1).' '.$item['word'].' '; } echo ' '; echo ' '; echo ' '; ?>工具类API23. 天气API根据IP或设定位置显示天气信息。<?php function getWeather($city) { $url = "http://wthrcdn.etouch.cn/weather_mini?city=".urlencode($city); $data = json_decode(file_get_contents($url), true); return $data['data']['forecast'][0]; } $city = '北京'; $weather = getWeather($city); echo $city.' 今天: '.$weather['type'].', '.$weather['low'].' ~ '.$weather['high']; ?>24. 一言API随机展示一句名言。<?php $hitokoto = json_decode(file_get_contents('https://v1.hitokoto.cn/'), true); echo $hitokoto['hitokoto'].' —— '.$hitokoto['from']; ?>25. 每日诗词展示随机古诗词。<?php $poetry = json_decode(file_get_contents('https://v2.jinrishici.com/one.json'), true); echo $poetry['data']['content'].' —— '.$poetry['data']['origin']['dynasty'].' · '.$poetry['data']['origin']['author'].'《'.$poetry['data']['origin']['title'].'》'; ?>26. 随机猫咪图片每次刷新页面展示不同的猫咪图片。 27. 随机狗狗图片展示随机狗狗图片。<?php $dog = json_decode(file_get_contents('https://dog.ceo/api/breeds/image/random'), true); echo ' '; ?>28. 实时汇率转换展示不同货币之间的实时汇率。<?php function getExchangeRate($from, $to) { $url = "https://api.exchangerate-api.com/v4/latest/".$from; $data = json_decode(file_get_contents($url), true); return $data['rates'][$to]; } echo "1 USD = ".getExchangeRate('USD', 'CNY')." CNY"; ?>29. 历史上的今天展示历史上的今天发生的事件。<?php $date = date('m/d'); $url = "https://baike.baidu.com/cms/home/eventsOnHistory/".$date.".json"; $data = json_decode(file_get_contents($url), true); $events = $data[$date]; echo " 历史上的今天（".$date."） "; foreach(array_slice($events, 0, 5) as $event) { echo $event['year']."年: ".$event['title']." "; } ?>30. 每日NASA图片展示NASA每日天文图片。<?php $nasa = json_decode(file_get_contents('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY'), true); echo ' '.$nasa['title'].' '; echo ' '; echo ' '.$nasa['explanation'].' '; ?>31. 随机笑话展示随机笑话。<?php $joke = json_decode(file_get_contents('https://v2.jokeapi.dev/joke/Any?lang=zh'), true); if($joke['type'] == 'single') { echo $joke['joke']; } else { echo $joke['setup'].' '.$joke['delivery']; } ?>32. 实时疫情数据展示实时的新冠疫情数据。<?php $covid = json_decode(file_get_contents('https://lab.isaaclin.cn/nCoV/api/overall'), true); $data = $covid['results'][0]; echo "确诊: ".$data['confirmedCount']." "; echo "治愈: ".$data['curedCount']." "; echo "死亡: ".$data['deadCount']." "; echo "更新时间: ".date('Y-m-d H:i:s', $data['updateTime']/1000); ?>博客功能增强类API33. 代码高亮使用Prism或Highlight.js自动为代码块添加语法高亮。 34. 文章阅读时间估算根据文章字数自动计算阅读时间。<?php function readingTime($content) { $wordCount = mb_strlen(strip_tags($content), 'UTF-8'); $minutes = ceil($wordCount / 400); // 假设阅读速度为400字/分钟 return $minutes; } // 在文章页面调用 $readTime = readingTime($this->content); echo "预计阅读时间: ".$readTime." 分钟"; ?>35. IP地理位置显示显示访客的地理位置。<?php function getIpLocation($ip) { $url = "http://ip-api.com/json/".$ip."?lang=zh-CN"; $data = json_decode(file_get_contents($url), true); return $data['country'].' '.$data['city']; } $ip = $_SERVER['REMOTE_ADDR']; echo "您来自: ".getIpLocation($ip); ?>36. 实时在线人数统计显示当前在线访问人数。<?php // 需要在数据库中创建相关表来记录访问信息 function getOnlineCount() { // 过期时间设置为15分钟 $expire = 15 * 60; $now = time(); // 清理过期会话 $db = Typecho_Db::get(); $db->query($db->delete('table.online') ->where('time < ?', $now - $expire)); // 更新当前会话 $sid = session_id(); if($sid) { $exist = $db->fetchRow($db->select('sid')->from('table.online') ->where('sid = ?', $sid)); if($exist) { $db->query($db->update('table.online') ->rows(array('time' => $now)) ->where('sid = ?', $sid)); } else { $db->query($db->insert('table.online') ->rows(array('sid' => $sid, 'time' => $now))); } } // 获取在线人数 $online = $db->fetchObject($db->select('COUNT(*) AS count')->from('table.online'))->count; return $online; } echo "当前在线: ".getOnlineCount()." 人"; ?>37. 文章热度排行根据阅读量、评论数等显示热门文章。<?php function getHotPosts($limit = 5) { $db = Typecho_Db::get(); $posts = $db->fetchAll($db->select('cid', 'title', 'views') ->from('table.contents') ->where('type = ?', 'post') ->where('status = ?', 'publish') ->order('views', Typecho_Db::SORT_DESC) ->limit($limit)); return $posts; } echo " 热门文章 "; echo " "; foreach(getHotPosts() as $post) { echo ' $post['cid'])).'">'.$post['title'].'('.$post['views'].'阅读) '; } echo " "; ?>游戏与娱乐类API38. 随机二次元图片展示随机的二次元图片。<?php echo ' '; ?>39. 每日一句英语显示每日英语句子及翻译。<?php function getDailyEnglish() { $url = "https://api.vvhan.com/api/en"; $data = json_decode(file_get_contents($url), true); return $data; } $english = getDailyEnglish(); echo " 每日一句 "; echo " ".$english['data']['en']." "; echo " ".$english['data']['zh']." "; ?>40. 随机密码生成器生成随机安全密码。<?php function generateRandomPassword($length = 12) { $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+'; $password = ''; for($i = 0; $i < $length; $i++) { $password .= $chars[rand(0, strlen($chars) - 1)]; } return $password; } echo " 随机安全密码 "; echo "".generateRandomPassword().""; ?>41. 随机色彩搭配提供随机的色彩搭配方案。<?php function getRandomColorPalette() { $palette = array(); for($i = 0; i < 5; $i++) { $color = sprintf('#%06X', mt_rand(0, 0xFFFFFF)); $palette[] = $color; } return $palette; } $colors = getRandomColorPalette(); echo " 今日色彩搭配 "; echo " "; foreach($colors as $color) { echo " "; } echo " "; echo " "; foreach($colors as $color) { echo " ".$color." "; } echo " "; ?>42. 文章相关度推荐基于内容相似度推荐相关文章。<?php function getSimilarPosts($content, $exclude_cid, $limit = 5) { // 提取当前文章关键词 $keywords = preg_split('/\s+/', strip_tags($content)); $keywords = array_filter($keywords, function($word) { return mb_strlen($word, 'UTF-8') > 2; // 过滤短词 }); // 获取所有其他文章 $db = Typecho_Db::get(); $posts = $db->fetchAll($db->select('cid', 'title', 'text') ->from('table.contents') ->where('type = ?', 'post') ->where('status = ?', 'publish') ->where('cid <> ?', $exclude_cid)); // 计算相似度 $scores = array(); foreach($posts as $post) { $post_text = strip_tags($post['text']); $score = 0; foreach($keywords as $word) { $count = substr_count(strtolower($post_text), strtolower($word)); $score += $count; } $scores[$post['cid']] = $score; } // 按相似度排序 arsort($scores); // 返回前N篇相似度最高的文章 $result = array(); $count = 0; foreach($scores as $cid => $score) { if($score > 0) { foreach($posts as $post) { if($post['cid'] == $cid) { $result[] = array( 'cid' => $cid, 'title' => $post['title'], 'score' => $score ); $count++; break; } } if($count >= $limit) break; } } return $result; } // 在文章页面使用 $similar_posts = getSimilarPosts($this->content, $this->cid); echo " 相关推荐 "; echo " "; foreach($similar_posts as $post) { echo ' $post['cid'])).'">'.$post['title'].' '; } echo " "; ?>博客功能增强类API43. 代码运行结果展示展示代码片段的实际运行结果。<?php function executeCodeSnippet($code, $language) { $result = ''; switch($language) { case 'php': ob_start(); eval($code); $result = ob_get_clean(); break; case 'js': // 需要服务器支持Node.js或使用在线执行服务 // 此处使用前端JavaScript执行 $result = ' '; break; case 'python': // 需要服务器支持Python $tempFile = tempnam(sys_get_temp_dir(), 'py_'); file_put_contents($tempFile, $code); $result = shell_exec('python '.$tempFile); unlink($tempFile); break; } return $result; } $code = 'echo "Hello, World!";'; $result = executeCodeSnippet($code, 'php'); echo " 代码运行结果 "; echo " ".$result." "; ?>44. 文本情感分析分析文章内容的情感倾向。<?php function analyzeSentiment($text) { // 简单情感分析，实际可使用NLP API $positive_words = array('好', '喜欢', '优秀', '精彩', '美丽', '高兴', '开心'); $negative_words = array('差', '讨厌', '糟糕', '失望', '难过', '伤心', '消极'); $positive_count = 0; $negative_count = 0; foreach($positive_words as $word) { $positive_count += substr_count($text, $word); } foreach($negative_words as $word) { $negative_count += substr_count($text, $word); } if($positive_count > $negative_count) { return array('sentiment' => 'positive', 'score' => $positive_count - $negative_count); } else if($negative_count > $positive_count) { return array('sentiment' => 'negative', 'score' => $negative_count - $positive_count); } else { return array('sentiment' => 'neutral', 'score' => 0); } } // 在文章页面使用 $sentiment = analyzeSentiment($this->content); echo "文章情感倾向: "; if($sentiment['sentiment'] == 'positive') { echo "积极 (+".$sentiment['score'].")"; } else if($sentiment['sentiment'] == 'negative') { echo "消极 (-".$sentiment['score'].")"; } else { echo "中性"; } ?>45. 二维码生成API为文章或链接生成二维码。<?php function generateQRCode($text, $size = 150) { $url = "https://api.qrserver.com/v1/create-qr-code/?size=".$size."x".$size."&data=".urlencode($text); return $url; } // 生成当前文章的二维码 $current_url = Typecho_Common::url($this->permalink); $qrcode_url = generateQRCode($current_url); echo " 扫描分享文章 "; echo ' '; ?>46. 文章字数统计统计博客所有文章的总字数。<?php function getTotalWordCount() { $db = Typecho_Db::get(); $posts = $db->fetchAll($db->select('text') ->from('table.contents') ->where('type = ?', 'post') ->where('status = ?', 'publish')); $total = 0; foreach($posts as $post) { $total += mb_strlen(strip_tags($post['text']), 'UTF-8'); } return $total; } $total_words = getTotalWordCount(); echo "博客总字数: ".number_format($total_words)." 字"; ?>47. 访客地图展示访客来源地理位置的世界地图。<?php // 首先需要收集访客IP并存储地理位置信息 function logVisitorLocation() { $ip = $_SERVER['REMOTE_ADDR']; $data = json_decode(file_get_contents("http://ip-api.com/json/".$ip."?fields=country,lat,lon"), true); if($data && isset($data['country'])) { $db = Typecho_Db::get(); $db->query($db->insert('table.visitors') ->rows(array( 'ip' => $ip, 'country' => $data['country'], 'latitude' => $data['lat'], 'longitude' => $data['lon'], 'time' => time() ))); } } // 显示访客地图 function displayVisitorMap() { $db = Typecho_Db::get(); $visitors = $db->fetchAll($db->select('country', 'latitude', 'longitude', 'COUNT(*) as count') ->from('table.visitors') ->group('country')); $markers = array(); foreach($visitors as $visitor) { $markers[] = array( 'lat' => $visitor['latitude'], 'lng' => $visitor['longitude'], 'title' => $visitor['country'].' ('.$visitor['count'].')' ); } $markers_json = json_encode($markers); return ' '; } // 记录当前访客 logVisitorLocation(); // 显示地图 echo " 访客地图 "; echo displayVisitorMap(); ?>48. 随机迷你游戏在博客中嵌入简单的JS游戏。<?php // 随机选择一个迷你游戏 $games = array( // 猜数字游戏 ' 猜数字游戏 我已经想好了一个1-100之间的数字，你猜是多少？ 猜！ ', // 石头剪刀布 ' 石头剪刀布 石头 布 剪刀 战绩：0胜 0负 0平 ' ); // 随机选择一个游戏 $random_game = $games[array_rand($games)]; echo $random_game; ?>49. 每日单词学习每天展示一个英文单词及其解释。<?php function getDailyWord() { // 使用日期作为种子确保同一天显示相同单词 $date = date('Ymd'); srand(intval($date)); $words = array( array("word" => "ubiquitous", "part" => "adj.", "meaning" => "存在于无所不在的，普遍存在的"), array("word" => "ephemeral", "part" => "adj.", "meaning" => "短暂的，瞬息的"), array("word" => "serendipity", "part" => "n.", "meaning" => "意外发现珍奇事物的本领"), array("word" => "paradigm", "part" => "n.", "meaning" => "范例，模式"), array("word" => "eloquent", "part" => "adj.", "meaning" => "雄辩的，有口才的"), array("word" => "pragmatic", "part" => "adj.", "meaning" => "实用的，实际的"), array("word" => "resilience", "part" => "n.", "meaning" => "适应力，恢复力"), array("word" => "quintessential", "part" => "adj.", "meaning" => "精髓的，典型的"), array("word" => "juxtaposition", "part" => "n.", "meaning" => "并置，并列"), array("word" => "cacophony", "part" => "n.", "meaning" => "刺耳的声音，不和谐的声音") ); $index = rand(0, count($words) - 1); return $words[$index]; } $word = getDailyWord(); echo " 每日单词 "; echo " ".$word['word']." ".$word['part']." "; echo " ".$word['meaning']." "; ?>50. 随机表情包随机展示一个表情包图片。<?php function getRandomMeme() { // 表情包图片URL数组 $memes = array( "https://i.imgur.com/1NPi2kN.jpg", "https://i.imgur.com/GXPO2Yh.jpg", "https://i.imgur.com/C5YRB0x.jpg", "https://i.imgur.com/tZNOabj.jpg", "https://i.imgur.com/wJLRN9A.jpg" ); return $memes[array_rand($memes)]; } echo " 随机表情包 "; echo ' '; ?>51. 历史上的今天事件轮播使用轮播方式展示历史上的今天发生的多个事件。<?php function getTodayInHistory() { $date = date('m/d'); $url = "https://baike.baidu.com/cms/home/eventsOnHistory/".$date.".json"; $data = json_decode(file_get_contents($url), true); return $data[$date]; } $events = getTodayInHistory(); $events = array_slice($events, 0, 10); echo ' 历史上的今天 ('.date('m月d日').') '; foreach($events as $index => $event) { echo ' '.$event['year'].'年 '.$event['title'].' '; } echo ' < > '; ?>52. 热门影视推荐展示当前热门电影或电视剧。<?php function getHotMovies() { // 这里可以使用豆瓣API或其他影视API // 简单起见，这里使用静态数据 $movies = array( array( "title" => "流浪地球2", "rating" => "8.3", "image" => "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2885941329.jpg", "url" => "https://movie.douban.com/subject/35267208/" ), array( "title" => "满江红", "rating" => "7.1", "image" => "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2885955777.jpg", "url" => "https://movie.douban.com/subject/35766491/" ), array( "title" => "铃芽之旅", "rating" => "7.4", "image" => "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2884182275.jpg", "url" => "https://movie.douban.com/subject/35371261/" ) ); return $movies; } $movies = getHotMovies(); echo " 热门影视推荐 "; echo " "; foreach($movies as $movie) { echo " "; echo " "; echo " ".$movie['title']." (".$movie['rating']."⭐) "; echo " "; } echo " "; ?>53. 随机美食食谱展示随机美食食谱。<?php function getRandomRecipe() { $url = "https://www.themealdb.com/api/json/v1/1/random.php"; $data = json_decode(file_get_contents($url), true); return $data['meals'][0]; } $recipe = getRandomRecipe(); echo " 今日美食推荐: ".$recipe['strMeal']." "; echo ' '; echo " 材料: "; for($i=1; $i<=20; $i++) { if(!empty($recipe['strIngredient'.$i])) { echo " ".$recipe['strIngredient'.$i]." - ".$recipe['strMeasure'.$i]." "; } } echo " "; ?>54. 每日星座运势根据星座显示每日运势。<?php function getHoroscope($sign) { $url = "https://api.vvhan.com/api/horoscope?type=".urlencode($sign); $data = json_decode(file_get_contents($url), true); return $data['data']; } $sign = "双鱼座"; // 可以改为任何星座 $horoscope = getHoroscope($sign); echo " ".$sign."今日运势 "; echo "综合指数: ".$horoscope['index']['all']." "; echo "幸运颜色: ".$horoscope['fortuneColor']." "; echo "幸运数字: ".$horoscope['luckynumber']." "; echo "今日运势: ".$horoscope['fortunetext']." "; ?>55. 每日推荐歌曲每天随机推荐一首歌曲。<?php function getDailyRecommendedSong() { // 使用种子确保同一天返回同一首歌 $date = date('Ymd'); srand(intval($date)); // 歌曲库（可以扩展） $songs = array( array("name" => "Shape of You", "artist" => "Ed Sheeran", "id" => "7qiZfU4dY1lWllzX7mPBI3"), array("name" => "Dance Monkey", "artist" => "Tones and I", "id" => "1rgnBhdG2JDFTbYkYRZAku"), array("name" => "Blinding Lights", "artist" => "The Weeknd", "id" => "0VjIjW4GlUZAMYd2vXMi3b"), array("name" => "Someone You Loved", "artist" => "Lewis Capaldi", "id" => "7qEHsqek33rTcFNT9PFqLf"), array("name" => "Bad Guy", "artist" => "Billie Eilish", "id" => "2Fxmhks0bxGSBdJ92vM42m") ); $index = rand(0, count($songs) - 1); return $songs[$index]; } $song = getDailyRecommendedSong(); echo " 今日推荐歌曲 "; echo $song['name']." - ".$song['artist']." "; echo ' '; ?>56. 倒计时日期提醒展示距离特定日期的倒计时。<?php function getDaysUntil($date, $event_name) { $now = time(); $event_time = strtotime($date); $days_left = ceil(($event_time - $now) / 86400); return array( 'name' => $event_name, 'date' => $date, 'days' => $days_left ); } $events = array( getDaysUntil('2023-12-25', '圣诞节'), getDaysUntil('2024-01-01', '元旦'), getDaysUntil('2024-02-10', '春节'), // 根据实际日期调整 ); echo " 节日倒计时 "; echo " "; foreach($events as $event) { if($event['days'] > 0) { echo " 距离 ".$event['name']." 还有 ".$event['days']." 天 "; } else if($event['days'] == 0) { echo " 今天是 ".$event['name']."！ "; } } echo " "; ?>57. 随机壁纸API每次访问显示不同的精美壁纸。<?php echo ' '; ?>58. Minecraft服务器状态显示您的Minecraft服务器状态。<?php function getMinecraftServerStatus($server) { $url = "https://api.mcsrvstat.us/2/".$server; $data = json_decode(file_get_contents($url), true); return $data; } $server = 'mc.hypixel.net'; // 服务器地址 $status = getMinecraftServerStatus($server); echo " Minecraft服务器状态 "; echo "服务器: ".$server." "; echo "状态: ".($status['online'] ? '在线' : '离线')." "; if($status['online']) { echo "当前玩家: ".$status['players']['online']."/".$status['players']['max']." "; echo "版本: ".$status['version']." "; } ?>59. 随机好看的渐变背景为您的博客添加随机生成的渐变背景。 60. 随机英文名言展示随机英文名言。<?php $quote = json_decode(file_get_contents('https://api.quotable.io/random'), true); echo '"'.$quote['content'].'" — '.$quote['author']; ?>集成方法要将这些API集成到Typecho博客中，您可以：创建插件：将API功能封装成Typecho插件，这样可以方便地在后台启用/禁用。修改主题文件：直接在主题的sidebar.php、footer.php或其他模板文件中添加相关代码。创建独立页面：创建一个专门用于展示API数据的独立页面。使用Widget：创建自定义Widget并在需要的位置调用。注意事项大多数API调用需要使用PHP的file_get_contents函数，请确保您的服务器已启用allow_url_fopen。某些API可能需要注册并获取API密钥，请按照相应API的官方文档进行操作。考虑使用缓存机制减少API请求次数，提高博客加载速度。注意API的使用限制，避免过度调用导致被封禁。API 汇总列表个人社交账号APIQQ等级显示API - 展示QQ等级和成长值信息QQ音乐状态API - 显示正在听的音乐哔哩哔哩UP主信息API - 展示粉丝数、视频数、播放量等数据网易云音乐状态API - 展示最近听的歌曲或音乐播放器GitHub贡献统计API - 展示代码贡献图表豆瓣读书/电影API - 展示最近阅读的书籍或观看的电影Instagram基本数据API - 展示Instagram账号基本信息Discord服务器状态API - 展示服务器状态和成员数Telegram频道订阅数API - 展示Telegram频道的订阅人数小红书笔记展示API - 展示最近的小红书笔记王者荣耀战绩API - 展示游戏数据和战绩Steam游戏状态API - 展示最近玩的游戏和时长热搜榜单API微博热搜API - 展示微博实时热搜榜单知乎热榜API - 展示知乎热门话题抖音热门话题API - 展示抖音热门话题和标签百度热搜榜API - 展示百度搜索热榜内容腾讯新闻热点API - 展示腾讯新闻热点话题哔哩哔哩热搜API - 展示B站当前热搜词即刻社区热门API - 展示即刻社区热门话题搜狗热搜榜API - 展示搜狗搜索热榜内容360热搜榜API - 展示360搜索热榜内容热搜聚合展示API - 整合多平台热搜于一页工具类API天气API - 根据位置显示天气信息一言API - 随机展示一句名言每日诗词API - 展示随机古诗词随机猫咪图片API - 每次刷新显示不同猫咪图片随机狗狗图片API - 展示随机狗狗图片实时汇率转换API - 展示不同货币之间的实时汇率历史上的今天API - 展示历史上的今天发生的事件每日NASA图片API - 展示NASA每日天文图片随机笑话API - 展示随机笑话实时疫情数据API - 展示实时的新冠疫情数据博客功能增强API代码高亮API - 为代码块添加语法高亮文章阅读时间估算API - 根据字数计算阅读时间IP地理位置显示API - 显示访客的地理位置实时在线人数统计API - 显示当前在线访问人数文章热度排行API - 显示热门文章随机二次元图片API - 展示随机的二次元图片每日一句英语API - 显示每日英语句子及翻译随机密码生成器API - 生成随机安全密码随机色彩搭配API - 提供随机的色彩搭配方案文章相关度推荐API - 推荐相关文章代码运行结果展示API - 展示代码片段的实际运行结果文本情感分析API - 分析文章内容的情感倾向二维码生成API - 为文章或链接生成二维码文章字数统计API - 统计博客所有文章的总字数访客地图API - 展示访客来源地理位置的世界地图游戏与娱乐类API随机迷你游戏API - 在博客中嵌入简单的JS游戏每日单词学习API - 每天展示一个英文单词及其解释随机表情包API - 随机展示一个表情包图片历史上的今天事件轮播API - 轮播展示历史上的今天事件热门影视推荐API - 展示当前热门电影或电视剧随机美食食谱API - 展示随机美食食谱每日星座运势API - 根据星座显示每日运势每日推荐歌曲API - 每天随机推荐一首歌曲倒计时日期提醒API - 展示距离特定日期的倒计时随机壁纸API - 每次访问显示不同的精美壁纸Minecraft服务器状态API - 显示Minecraft服务器状态随机好看的渐变背景API - 为博客添加随机生成的渐变背景随机英文名言API - 展示随机英文名言结语通过集成这些丰富多样的API，你可以为Typecho博客增添更多动态和个性化元素，提升用户体验和互动性。选择适合的博客主题和风格的API进行集成，让你的博客更加与众不同！记住，合理使用API缓存机制可以有效减少服务器压力和提高页面加载速度。希望本文介绍的这60个API能为您的博客增添更多精彩内容！有什么问题可在评论区留言，觉得有趣也可以留言！
1. 我对网站头部SEO的优化实践在对自己的Typecho博客进行SEO优化过程中，我先通过Bing Webmaster Tools进行了网站分析，发现了以下几个问题：Meta Description太长：超过了搜索引擎推荐的160个字符限制多个Meta Description标记：页面中存在2个Meta Description标签图片缺少Alt属性：大部分图片没有添加描述性的Alt文本1.1 解决步骤创建了seo-head.html文件，包含所有SEO相关配置优化Meta Description，控制在25-160个字符之间确保页面中只有一个Meta Description标签修改图片，添加Alt属性2. 网站头部SEO优化科普2.1 Meta标签的重要性Meta标签对搜索引擎优化至关重要，特别是以下几个方面：Meta Description：网页在搜索结果中的描述文本，影响点击率Meta Keywords：虽然大部分搜索引擎不再将其作为排名因素，但仍有参考价值Meta Robots：指导搜索引擎如何索引页面2.2 Open Graph协议Open Graph协议让网页在社交媒体平台（如Facebook）上有更好的展示效果：og:title：分享时显示的标题og:description：分享时显示的描述og:image：分享时显示的图片og:url：页面规范URL2.3 Twitter CardsTwitter Cards类似于Open Graph，专门针对Twitter平台优化：twitter:card：卡片类型twitter:title：卡片标题twitter:description：卡片描述twitter:image：卡片图片2.4 图片SEO优化图片SEO优化的要点：使用描述性的Alt属性：帮助搜索引擎理解图片内容合适的文件名：使用描述性的文件名而非随机字符压缩图片：减小文件大小，提高加载速度响应式图片：适应不同设备的屏幕大小3. 代码解释与作用3.1 基础Meta标签 这些基础Meta标签提供了网站的基本信息，帮助搜索引擎更好地理解网站内容。特别是description标签，应该简洁明了地概括网站内容，控制在25-160个字符之间。3.2 移动端优化 这些标签优化移动设备上的浏览体验，响应式设计是现代SEO的重要组成部分。3.3 资源预加载 资源预加载标签提高网站加载速度，改善用户体验，进而提升搜索排名。3.4 社交媒体优化 这些标签优化在社交媒体上的分享效果，提高内容传播率。3.5 结构化数据 结构化数据帮助搜索引擎理解网站内容，可能获得更丰富的搜索结果展示。4. 通用SEO优化代码模板以下是一个通用的SEO优化代码模板，可根据自己网站需求进行调整：（直接在开发者设置-自定义输出head头部的HTML代码添加全部代码） 5. 注意事项与最佳实践5.1 定期检查与更新使用Google Search Console、Bing Webmaster Tools等工具定期检查网站SEO状况根据搜索引擎算法更新及时调整优化策略使用PageSpeed Insights测试并优化网站性能5.2 图片优化要点为每张图片添加描述性的alt文本alt文本应准确描述图片内容避免使用"图片"、"图像"等无意义的词对于装饰性图片，可以使用空alt属性：alt=""对于信息性图片，alt文本应包含关键信息保持alt文本简洁，通常不超过125个字符5.3 Meta Description最佳实践控制在25-160个字符之间包含关键词但不堆砌关键词准确描述页面内容吸引用户点击每个页面使用唯一的描述避免在页面中出现多个meta description标签使用行动导向语言，如"了解更多"、"立即查看"等5.4 移动优先索引的优化确保网站采用响应式设计测试网站在各种移动设备上的显示效果使用移动友好测试检查移动兼容性优化页面加载速度，特别是在移动网络环境下6. 参考资源Google搜索引擎优化入门指南Bing网站管理员帮助与操作指南Schema.org结构化数据官方文档Open Graph协议官方文档Twitter Cards官方文档Web.dev - SEO基础MOZ - SEO学习中心Typecho官方文档