Ame.y - I want you in my life - 实用技术
type: channel
link: https://ame.sciv.cn/category/tech/
description: 记录散装技术...
items: 微信运动步数显示样式
items: Sticky文章置顶插件css样式
items: Typecho部分美化代码
items: Typecho文章日期格式
items: Typecho前台添加编辑文章按钮
items: 更改Typecho后台登录地址
items: 一行代码实现前端网页瀑布流图片布局
items: 2025.11.6 修复360全景插件
items: 2025.11.6 修复评论表情插件
items: Typecho将评论头像从Gravatar改成显示QQ头像

微信运动步数显示样式
type: item
date: 2025-11-11T00:15:11+08:00
description: AI摘要 本文提供了两种微信运动步数显示的样式：底部版权处显示和独立页面显示。底部版权处显示样式通过HTML和CSS代码实现，包括一个显示今日运动步数的div元素和一个加载FontAwesome图标库的链接。独立页面显示样式则提供了一个完整的PHP模板，包括获取历史数据的函数、今日步数的显示和历史数据的展示。这些代码可以帮助用户在网站上展示微信运动步数。 内容根据文章生成，用于内容的解释与总结。— 美言AI底部版权处显示： 今日运动步数： 独立页显示：<?php /** * 步数统计独立页面模板（支持历史数据） * @package custom */ $this->need('header.php'); // 获取历史数据函数 function getStepHistoryData() { if (class_exists('WeFootStep_Plugin')) { try { $db = Typecho_Db::get(); $rows = $db->fetchAll($db->select('date', 'step_count') ->from('table.we_foot_step') ->order('date', Typecho_Db::SORT_DESC) ->limit(30)); // 限制最近30天数据 $history = array(); foreach ($rows as $row) { $history[$row['date']] = (int)$row['step_count']; } return $history; } catch (Exception $e) { return array('error' => '数据获取失败: ' . $e->getMessage()); } } return array('error' => 'WeFootStep插件未启用'); } // 获取今日步数 function getTodayStep() { if (class_exists('WeFootStep_Plugin')) { try { $db = Typecho_Db::get(); $today = date('Y-m-d'); $todayStep = $db->fetchRow($db->select('step_count') ->from('table.we_foot_step') ->where('date = ?', $today) ->limit(1)); return $todayStep ? (int)$todayStep['step_count'] : 0; } catch (Exception $e) { return 0; } } return 0; } // 将历史数据转换为按年月分组的形式 function groupStepsByMonth($historyData) { $grouped = array(); foreach ($historyData as $date => $steps) { if ($date === 'error') continue; $yearMonth = date('Y年m月', strtotime($date)); if (!isset($grouped[$yearMonth])) { $grouped[$yearMonth] = array(); } $grouped[$yearMonth][] = array( 'date' => $date, 'day' => date('d日', strtotime($date)), 'steps' => $steps ); } // 按月份倒序排序 krsort($grouped); // 每月内的数据按日期倒序排序 foreach ($grouped as &$monthData) { usort($monthData, function($a, $b) { return strtotime($b['date']) - strtotime($a['date']); }); } return $grouped; } // 获取数据 $todaySteps = getTodayStep(); $historyData = getStepHistoryData(); $groupedData = isset($historyData['error']) ? array() : groupStepsByMonth($historyData); ?> <div class="post" id="post-<?php $this->cid(); ?>"> 微信运动步数统计 实时同步我的运…

Sticky文章置顶插件css样式
type: item
date: 2025-11-09T16:31:33+08:00
description: AI摘要 本文提供了多种风格的置顶文章插件CSS样式，包括浅橙色半透明、简灰调、清新蓝调、复古毛玻璃、清新薄荷绿、柔和薰衣草紫、高级莫兰迪粉、活力天空蓝、沉稳茶褐色、蓝紫渐变、低饱和蓝白渐变、蓝青渐变、渐变描边透明背景和浅蓝到深蓝渐变等，适用于不同主题和风格的网站。 内容根据文章生成，用于内容的解释与总结。— 美言AI浅橙色 + 半透明效果[置顶]简灰调（适合简约主题）[置顶]清新蓝调（适合科技 / 博客类主题）[置顶]复古毛玻璃（适合文艺主题）[置顶]清新薄荷绿（适合森系 / 简约主题）[置顶]柔和薰衣草紫（适合文艺 / 女性向主题）[置顶]高级莫兰迪粉（适合质感 / 复古主题）[置顶]活力天空蓝（适合科技 / 年轻向主题）[置顶]沉稳茶褐色（适合复古 / 成熟主题）[置顶]蓝紫渐变（高级感拉满）[置顶]低饱和蓝白渐变（通透柔和）[置顶]蓝青渐变（清新灵动）[置顶]渐变描边 + 透明背景（质感通透）[置顶]浅蓝到深蓝渐变（沉稳大气）[置顶]

Typecho部分美化代码
type: item
date: 2025-11-08T22:34:00+08:00
description: AI摘要 本文介绍了Typecho博客系统的美化代码，包括右键菜单美化、主题背景图片设置、在线人数统计、评论框动态图、评论区头像转动效果以及禁止页面Ctrl+S保存功能。通过这些代码的添加和修改，可以提升博客的美观度和用户体验。 内容根据文章生成，用于内容的解释与总结。— 美言AI右键美化在 footer.php下，前面添加： 首页 复制 前进 后退 重载网页 友链 给我留言吧 主题白色背景改图片后台css添加：/*背景*/ body::before { z-index: -1; content: ""; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.1; position: fixed; background: center/cover no-repeat; background-image: url(https://xxx.jpg); }在线人数统计functions.php` 文件里，添加：//在线人数 function online_users() { $filename='online.txt'; //数据文件 $cookiename='Nanlon_OnLineCount'; //Cookie名称 $onlinetime=30; //在线有效时间 $online=file($filename); $nowtime=$_SERVER['REQUEST_TIME']; $nowonline=array(); foreach($online as $line){ $row=explode('|',$line); $sesstime=trim($row[1]); if(($nowtime - $sesstime)<=$onlinetime){ $nowonline[$row[0]]=$sesstime; } } if(isset($_COOKIE[$cookiename])){ $uid=$_COOKIE[$cookiename]; }else{ $vid=0; do{ $vid++; $uid='U'.$vid; }while(array_key_exists($uid,$nowonline)); setcookie($cookiename,$uid); } $nowonline[$uid]=$nowtime; $total_online=count($nowonline); if($fp=@fopen($filename,'w')){ if(flock($fp,LOCK_EX)){ rewind($fp); foreach($nowonline as $fuid=>$ftime){ $fline=$fuid.'|'.$ftime."\n"; @fputs($fp,$fline); } flock($fp,LOCK_UN); fclose($fp); } } echo "$total_online"; } 在要引入的地方，添加：<?php echo online_users() ?>评论框动态图后台css里添加：#comment-textarea { background-image:url(https://xxx.gif); background-size:contain; background-repeat:no-repeat; background-position:right bottom; transition:all 0.25s ease-in-out 0s; } textarea#comment-textarea:focus{ background-position-y:120px; transition:all 0.25s ease-in-out 0s; }评论区头像转动后台css添加：/**头像旋转呼吸光环**/ .friends-img.mr-2.lazy.loaded:hover{ transform:rotate(360deg); } .comment-avatar:hover{ transform:rotate(360deg); } .sidebar-comment-avatar.mr-1:hover{ transform:rotate(360deg); } .friends-img.mr-2.lazy.loaded,.comment-avatar,.sidebar-comment-avatar.mr-1 { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: all 0.5s; } @keyframes light { 0% { box-shado…

Typecho文章日期格式
type: item
date: 2025-11-08T21:33:50+08:00
description: AI摘要 文章介绍了Typecho文章日期格式的默认设置为年-月-日，并提供了如何增加年-月-日 时:分:秒的格式。 内容根据文章生成，用于内容的解释与总结。— 美言AI默认 Y-m-d （年 - 月 - 日）可以增加： Y-m-d H:i:s （年 - 月 - 日 时：分: 秒）

Typecho前台添加编辑文章按钮
type: item
date: 2025-11-08T21:28:02+08:00
description: AI摘要 文章介绍了如何在Typecho前台添加编辑文章按钮，通过在主题的`post.php`文件中插入代码实现。需要判断用户是否登录以及是否具有管理员权限。 内容根据文章生成，用于内容的解释与总结。— 美言AI每次编辑文章都要跑到后台，点击管理文章然后编辑，很麻烦首先就是判断是否登陆，然后再判断权限即可找到主题下的 post.php 文件，在合适位置插入以下代码：<?php if($this->user->hasLogin()):?> <?php if($this->user->pass('administrator','true')):?> <a href="/admin/write-post.php?cid=<?php echo $this->cid;?>" target="_blank">编辑文章 <?php endif;?> <?php endif;?>Tips： /admin 是登录后台目录

更改Typecho后台登录地址
type: item
date: 2025-11-08T21:17:00+08:00
description: AI摘要 本文介绍了更改Typecho后台登录地址的方法：1. 修改后台目录，即将默认的admin目录改名为其他名字，操作简单但升级时可能遇到问题；2. 修改配置文件，通过编辑config.inc.php文件，将admin替换为新的目录名。 内容根据文章生成，用于内容的解释与总结。— 美言AI步骤一：修改后台目录Typecho 默认后台目录为 admin ，将其改名为你所想要的名字即可，优点是方便，缺点是升级可能会有问题。步骤二：修改配置文件Typecho 安装完毕后会在目录生成 config.inc.php 文件，该文件就是 Typecho 的设置文件了。编辑这个文件，将admin替换成更改后的目录名即可。/** 后台路径(相对路径) */ define('__TYPECHO_ADMIN_DIR__', '/admin/');

一行代码实现前端网页瀑布流图片布局
type: item
date: 2025-11-07T23:13:00+08:00
description: AI摘要 本文介绍了如何通过一行CSS代码实现前端网页的瀑布流图片布局，并通过示例代码展示了基本的瀑布流布局、手机端适配、懒加载和滚动加载等功能。文章还提供了升级代码，包括增加电脑端四列显示、手机端两列显示、懒加载和滚动加载功能，以及添加点击图片放大预览的功能。这些代码示例可以帮助开发者快速实现瀑布流布局，并根据需要进行功能扩展和样式调整。 内容根据文章生成，用于内容的解释与总结。— 美言AI大家在刷xx等短视频平台，会发现很多瀑布流布局。如：小红书、抖音、快手等这种布局可以通过砌体布局一行代码： columns: 300px auto; 就能实现瀑布流。一栏两栏三栏四栏，不管有多少，它都可以： 自适应自填充 。前端代码就是这样很简单，就是一个大框里面套图片，核心代码就这一行。 剩下就是一些 css 样式之类的可以根据自己喜欢的风格调整。瀑布流其实是非常难做的，特别是图片不定宽高的，真的很多人用 flex ， grid 做太难了。实现代码 瀑布流布局示例 升级代码1上面的手机端是 1列 显示，将手机端改成 2列 瀑布流显示，其他不变： 瀑布流布局示例 修改说明添加了 @media (max-width: 768px) 媒体查询，覆盖手机屏幕（宽度≤768px）的样式手机端将 columns: 300px auto 改为 columns: 2 ，强制固定 2列 布局其他样式（间距、圆角、图片自适应等）完全保留，确保视觉一致性升级代码2手机端增加 懒加载 和 下滑加载剩余的 ，不一次性加载，只加载少量图片（8张），减轻首次加载压力： 瀑布流布局（懒加载+滚动加载） 加载中... 修改说明滚动加载更多初始只加载 8 张图片，减轻首次渲染压力滚动到页面底部 200px 内时，自动加载下一批（8张）使用 isLoading 锁防止重复触发加载模拟网络延迟（500ms），实际项目可替换为接口请求图片懒加载给图片添加 loading="lazy" 原生属性（现代浏览器均支持）图片只有进入视口时才会真正加载，减少初始 HTTP 请求数避免一次性加载 24 张图片导致的带宽占用和卡顿体验优化图片加载完成后添加淡入动画（opacity + transform），过渡更自然加载过程显示 "加载中..." 提示，加载完成显示 "已加载全部图片"图片加载失败时自动替换为备用图，提升容错性图片添加 object-fit: cover ，避免布局跳动兼容性原生懒加载兼容：Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+ （覆盖 95% 以上现代浏览器）如需兼容更旧浏览器，可添加 IntersectionObserver 降级方案（可选）可自定义调整的参数pageSize：每次加载的图片数量（默认 8 张，可根据需求改为 6/10 等）滚动触发距离： offsetHeight - 200 中的 200px（可调整为 100/300px ）加载延迟：setTimeout 中的 500ms （模拟网络请求，实际项目可删除）动画效果：可修改 .item 的 transition 属性调整淡入速度升级代码3电脑改成 4排 显示 手机端其他功能不变： 瀑布流布局（4列电脑端+2列手机端+懒加载） 加载中... 修改说明电脑端强制 4 列：将 .container 原有的 columns: 300px auto 改为 columns: 4 ，直接固定电脑端为 4 列布局优化大屏显示：新增 max-width: 1600px 和 margin: 0 auto ，避免在超宽屏幕上列宽过大，保持布局紧凑美观（可选，可根据需求删除）新增平板适配（可选）：添加 769px ~ 1200px 媒体查询，设为 3 列，让平板横屏显示更协调（不想要可直接删除该媒体查询）所有核心功能不变：手机端仍为 2 列、懒加载、滚动加载、加载动画、失败容错等功能完全保留如果觉得电脑端 4 列时列宽太窄，可调整 column-gap （当前 15px）或 max-width （当前 1600px），列宽会自动适配容器宽度并均分 4 列升级代码4增加一个点击图片 放大预览 功能，其功能不变 瀑布流布局（4列电脑端+2列手机端+懒加载） 加载中... × 修改说明添加了模态框HTML结构：html × 添加了模态框相关CSS样式：模态框背景、大图显示样式、关闭按钮样式增强了图片元素：为每个图片添加了 data-fullsize 属性，存储大图URL （原始尺寸的2倍）为图片添加了点击事件处理程序添加了模态框交互逻辑：点击图片显示大图、点击关闭按钮、模态框背景或按 ESC键 关闭大图预览错误处理增强：图片加载失败时不仅设置备用小图，还设置了对应的大图备用 URL基于升…

2025.11.6 修复360全景插件
type: item
date: 2025-11-07T14:21:00+08:00
description: AI摘要 文章讨论了Typecho平台中AISummary和Panorama两个插件的冲突问题。核心问题是两个插件都使用了Widget_Abstract_Contents::contentEx钩子，导致后加载的插件覆盖了前一个插件的处理结果。文章提出了修改AISummary插件的customContent方法，以支持钩子链式调用，从而解决两个插件的冲突问题。具体修改包括添加$lastResult参数，优先使用上一个插件的处理结果，保持返回逻辑，以实现两个插件处理逻辑的叠加执行。 内容根据文章生成，用于内容的解释与总结。— 美言AI测试了插件后，发现文字的短代码会转换成 标签，无法适配。首先考虑是 其他插件的原因，经过排查发现是：AISummary 插件。两个插件冲突的核心原因是：都使用了 Widget_Abstract_Contents::contentEx 钩子，且后加载的插件会覆盖前一个插件的处理结果（Typecho 钩子默认按插件激活顺序执行，后执行的插件如果直接返回内容，会忽略前一个插件的处理）。问题所在AISummary 插件的 customContent 方法处理完摘要后直接返回内容，没有传递给下一个插件。Panorama 插件的 parse 方法虽然判断了 $lastResult ，但如果 AISummary 先执行，会导致 Panorama 无法获取原始内容进行短代码解析。解决方案修改 AISummary 插件的 customContent 方法，支持钩子链式调用需要让 AISummary 插件处理完后，将结果传递给下一个插件（Panorama），而不是直接返回。找到 AISummary 插件下的 Plugin.php 中的： public static function customContent($content, $widget) { $options = Typecho_Widget::widget('Widget_Options')->plugin('AISummary'); // 不启用的话直接 return if ($options->summaryStyle === '0') return $content; // 获取用户自定义的字段 $summaryField = $options->field; $customSummary = $widget->fields->$summaryField; if (empty($customSummary)) return $content; $pureSummary = str_replace("{{text}}", $customSummary, $options->prefix); if ($options->summaryStyle === '1') { $summaryString = ' ' . $pureSummary . " "; $content = $summaryString . $content; } else if ($options->summaryStyle === '2') { $summaryString = ' ' . $pureSummary . " "; $content = $summaryString . $content; } // 废弃方案：使用 markdown 添加文本 // $markdownTag = " "; // Check if the content starts with the markdown tag // if (strpos($content, $markdownTag) === 0) { // Create the summary string // $summaryString = "> " . $customSummary . "\n"; // $content = substr_replace($content, $summaryString, strlen($markdownTag), 0); // } return $content; }修改为：public static function customContent($content, $widget, $lastResult) { // 关键：优先使用上一个插件的处理结果（如果有） $content = empty($lastResult) ? $content : $lastResult; $options = Typecho_Widget::widget('Widget_Options')->plugin('AISummary'); // 不启用的话直接 return 传递过来的内容 if ($options->…

2025.11.6 修复评论表情插件
type: item
date: 2025-11-06T23:57:00+08:00
description: AI摘要 文章介绍了如何修复Typecho博客评论插件Emoticon无法显示表情的问题。问题出在插件的emo.js文件未能正确加载，修复步骤包括确保emo.js在jQuery之后加载，并提供了详细的代码示例。同时，还提供了针对PJAX网站的优化方案，包括避免重复加载、精准触发、事件清理和动态加载。最后，还提供了修改后的footer.php代码，以供参考。 内容根据文章生成，用于内容的解释与总结。— 美言AI评论没有表情，总感觉少点什么，于是找到了 Emoticon下载链接：https://github.com/s-Ruthless/Typecho-Plugin-Emoticon但是将 <?php Emoticon_Plugin::emoOut(); ?> 添加到 comments.php 文件后出现了问题：文章内点击图标没反应通过F12查询，发现插件的 emo.js 未能加载于是尝试修复 JS 加载顺序，若 emo.js 加载在 jQuery 之前，会导致方法定义失败或事件绑定失效，且网络波动会让加载顺序随机变化解决步骤1确保 emo.js 在 jQuery 之后加载，在 footer.php 中的引入： <script type="text/javascript" src="<?php echo $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST']; ?>/usr/plugins/Emoticon/assets/emo.js" defer> 这里 jQuery 也可以使用其他的，如：[阿里]https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js[百度]https://apps.bdimg.com/libs/jquery/3.6.0/jquery.min.js[奇虎360]https://s.ssl.qhres2.com/baomitu/jquery/3.3.1/jquery.min.js[BootCDN]https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js解决步骤2以上在网站没有开启 PJAX 情况下，正常加载。如果开启了 PJAX ，就会导致打开文章后跳转下一篇或返回首页，加载特别缓慢。于是提供了以下优化方案关键优化点说明避免重复加载：用 window.EMO_PLUGIN.loaded 标记，emo.js 仅加载一次，PJAX 切换不重复请求；精准触发：只有找到评论输入框（#comment）才执行初始化，首页等无评论区页面不触发，节省资源；事件清理：PJAX 切换时调用 destroy() 解绑旧事件，避免内存泄漏拖慢页面；动态加载：emo.js 用动态创建方式加载，不阻塞页面渲染，且加载完成后才初始化。替换方案在 footer.php 中找到这段： }); } // 初始化main容器额外修改：PJAX 回调中添加表情初始化 / 清理（找到 PJAX 配置部分）原 PJAX 代码片段（接着找到这段）： }).on('pjax:complete', function(event, data, status, xhr, options) { if (event.relatedTarget) { if (event.relatedTarget.tagName === 'FORM' && event.relatedTarget.id === 'comment-form') { // 如果PJAX来源是评论表单，则显示提示信息 let message = (data.responseText.match(/ \s*([\s\S]*?)\s*<\/div>/i) || [, ''])[1].trim(); if (message) { alert(message); $.pjax({ url: xhr.url.replace(/\/comment$/, '/#comments'), container: '#main', fragment: '#main' }); } } else if (event.relatedTarget.tagName === 'FORM' && event.relatedTarget.classList.contains('protected')) { // 如果PJAX来源是加密文章密码表单，则显示提示信息 let message = (data.responseText.match(/ \s*([\s\S]*?)\s*<\/div>/i) || [, ''])[1].trim(); if (message) { al…

Typecho将评论头像从Gravatar改成显示QQ头像
type: item
date: 2025-11-01T21:50:00+08:00
description: AI摘要 本文介绍了如何将Typecho博客评论头像从Gravatar更换为显示QQ头像或随机头像。提供了详细的操作方法，包括修改主题文件functions.php中的代码，以及在comments.php中替换相应的代码。同时提供了两种方案，方案1保留了延迟加载逻辑，使用透明占位图避免布局跳动；方案2直接移除延迟加载，简化代码，适合不需要懒加载的场景。 内容根据文章生成，用于内容的解释与总结。— 美言AI引用：https://blog.csdn.net/qq_34626094/article/details/113111899功能如下如果是QQ邮箱，就显示QQ头像如果不是，就使用随机头像支持自定义随机图片api操作方法打开主题文件：/functions.php找到以下代码:function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp', $r = 'g') { preg_match_all('/((\d)*)@qq.com/', $email, $vai); if (empty($vai['1']['0'])) { $url = Helper::options()->GravatarSelect; $url .= md5(strtolower(trim($email))); $url .= "?s=$s&d=$d&r=$r"; $imga = ' '; } else { $url = 'https://cravatar.cn/avatar/'.md5(strtolower(trim($email))); $imga = ' '; } return $imga; }替换成：function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp', $r = 'g') { // 检查是否为QQ邮箱（匹配5-12位数字的QQ号） if (preg_match('|^[1-9]\d{4,11}@qq\.com$|i', $email)) { // QQ头像地址 $imgSrc = 'https://q2.qlogo.cn/headimg_dl?bs=' . $email . '&dst_uin=' . $email . '&spec=100&url_enc=0&referer=bu_interface&term_type=PC'; } else { // 随机图片地址 $imgSrc = 'http://www.dmoe.cc/random.php'; } // 构建包含延迟加载的img标签（保留原函数的延迟加载逻辑） $imgTag = ' '; // 包裹在带itemprop属性的span中 return '' . $imgTag . ''; }还有一种情况是主题没有定义的，需要先在functions.php中定义函数：方案1：用透明占位图（推荐，不影响布局）function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp', $r = 'g') { // 检查是否为QQ邮箱（匹配5-12位数字的QQ号） if (preg_match('|^[1-9]\d{4,11}@qq\.com$|i', $email)) { // QQ头像地址 $imgSrc = 'https://q2.qlogo.cn/headimg_dl?bs=' . $email . '&dst_uin=' . $email . '&spec=100&url_enc=0&referer=bu_interface&term_type=PC'; } else { // 随机图片地址 $imgSrc = 'http://www.dmoe.cc/random.php'; } // 移除 GetLazyLoad()，改用 1x1 透明占位图（避免布局跳动） $lazyPlaceholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; $imgTag = ' '; // 包裹在带itemprop属性的span中 return '' . $imgTag . ''; }方案2：直接用目标头像地址（取消延迟加载，简单直接）如果不需要延迟加载，可直接删除 data-lazy-src，只用 src：/** * 评论头像改成QQ头像 */ function getGravatar($email, $name, $comments_a, $s = 96, $d = 'mp…