转载自Sajuna? OpenList Moe为OpenList全局注入半透明模糊效果，支持日夜切换，覆盖文件列表/预览/后台等全组件一个适用于文件列表程序 OpenList 的美化✨ 特性? 兼容日/夜间模式 - 不同背景与配色? 全元素毛玻璃效果 - 半透明元素结合背景模糊? 多层次透明度调校 - 完美的视觉层次? 预览首页桌面端 移动端 要不去预览站点看看？跟我来，点击右侧文字前往 宸玚的资料库? 使用自定义头部 ​ 不要忘了修改主题色哦自定义内容 ​ 豫 ICP 备 2025000000 号 ​ ? 自定义配置查看源码变量如果你需要深度定制特定元素的样式，可以参考 main.scss 中的 全局变量定义 部分。:root { --moe-color-checkbox: #f8b34e; /* 白天模式复选框颜色 */ } ​ .hope-ui-dark { --moe-color-checkbox: #f8b34e; /* 夜间模式复选框颜色 */ }❤️ 关于如果你也喜欢这个项目，那不妨点个Star♪仓库：OpenList Moe Githubℹ️ 日志? v1.1.2 Release? Features list: 调整列表项目录大小普通文本样式 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/34 (8ffaa) ? Bug Fixes border: 修复上传结果边框悬停高亮 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/33 (0342f) ? Other Changes ci: 简化工具函数 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/32 (929c4) 添加手动发布操作工作流 - by @SajunaOo in https://github.com/SajunaOo/OpenList-Moe/issues/35 (aa81c) View changes on GitHub
主题标题居中打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/*主题标题居中*/ header.bg-light.lter.wrapper-md { text-align: center; }handsome 原生入站提示打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部代码即可 评论一键赞、踩、打卡打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可 window.SIMPALED = {}; // 创建全局对象 SIMPALED，用于存放编辑器功能 ​ // 定义一个函数 a，用于在文本框中插入文字 function a(a, b, c) { if (document.selection) { a.focus(); sel = document.selection.createRange(); c ? (sel.text = b + sel.text + c) : (sel.text = b); a.focus(); } else if (a.selectionStart || "0" == a.selectionStart) { var l = a.selectionStart; var m = a.selectionEnd; var n = m; c ? (a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length)) : (a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length)); c ? (n += b.length + c.length) : (n += b.length - m + l); l == m && c && (n -= c.length); a.focus(); a.selectionStart = n; a.selectionEnd = n; } else { a.value += b + c; a.focus(); } } ​ window.SIMPALED.Editor = { daka: function() { var b = new Date().toLocaleTimeString(); var c = document.getElementById("comment") || 0; a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~"); ​ // 将光标移到文本最后 if (c.setSelectionRange) { var len = c.value.length; c.setSelectionRange(len, len); c.focus(); } else if (c.createTextRange) { var range = c.createTextRange(); range.collapse(false); range.select(); c.focus(); } }, ​ zan: function() { var c = document.getElementById("comment") || 0; var yuluResponses = [ " 这篇文章展现了作者深邃的思想和独特的观点，令人赞叹不已。 ", " 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动，实在值得赞美。 ", " 作者以敏锐的洞察力和真挚的情感，将文字融为一体，这种写作技巧令人赞赏。 ", " 这篇文章展现了作者的才华和学识，无不让人对其赞美有加。 ", " 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。 ", " 作者的文字流畅而富有节奏感，令人为之倾倒，实在是一篇令人赞美的佳作。 ", " 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ", " 这篇文章的独到见解和新颖观点，让人对作者的创意赞美有加。 ", " 作者运用生动的比喻和细腻的描写，让读者仿佛身临其境，实在是一种令人赞美的写作艺术。 ", " 这篇文章的深情笔触和真挚感受让人深深感叹，实在是一篇值得赞美的美文。 ", ]; ​ var randomIndex = Math.floor(Math.random() * yuluResponses.length); var randomResponse = yuluResponses[randomIndex]; a(c, randomResponse); }, ​ cai: function() { var c = document.getElementById("comment") || 0; var yuluResponses = [ " 我是来替大家批评博主的，我是来批评的，这篇文章的结构有点混乱，需要更好地组织和展开内容。博主多多像我学习啊！ ", " 我是来替大家批评博主的，作者的表达能力有待提高，有些地方表述不够清晰，读者可能会感到困惑。博主多多像我学习啊！ ", " 我是来替大家批评博主的，文章的语法错误较多，建议仔细检查并进行修改。博主多多像我学习啊！ ", " 我是来替大家批评博主的，内容有些空洞，需要更多具体的例子或细节来支撑观点。博主多多像我学习啊！ ", " 我是来替大家批评博主的，文章缺乏逻辑，有些段落之间的衔接不够自然。博主多多像我学习啊！ ", " 我是来替大家批评博主的，作者的观点没有充分论证，需要更多的证据和理由来支持主张。博主多多像我学习啊！ ", " 我是来替大家批评博主的，文章中出现了一些拼写错误和用词不当的情况，建议进行仔细校对。博主多多像我学习啊！ ", " 我是来替大家批评博主的，语言表达过于简单，可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊！ ", " 我是来替大家批评博主的，这篇文章的主题不够突出，需要更好地明确中心思想。博主多多像我学习啊！ ", " 我是来替大家批评博主的，文章缺乏吸引人的开头，建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊！ ", ]; ​ var randomIndex = Math.floor(Math.random() * yuluResponses.length); var randomResponse = yuluResponses[randomIndex]; a(c, randomResponse); }, ​ yulu: function() { var c = document.getElementById("comment") || 0; var yuluResponses = [ " 有你在的日子才是我的日常。 ", " 夹在我女友与前女友与青梅竹马间的果然是修罗场！ ", " 既然如此，就再努力一次吧。别在这里愁眉不展，也不要再自欺欺人，重新来过！ ", " 比自己,比梦想更重要的东西永远都存在着... ", " 嘛，那又怎么样呢？ ", " 自身不先改变的话，一切都不会改变。 ", " 比起有一百个朋友，不如有个比一百人还要重要的真心朋友。 ", " 我有在反省，但我不后悔。 ", " 要超越过去与悲伤，用坚强和笑容去开拓明天。 ", " 男人许下的诺言就一定要遵守。 ", " 没有回忆就去创造回忆，没有道路就去开辟道路。 ", " 我敬你是条汉子！ ", " 不相信自己的人，连努力的价值都没有。 ", " 微风摇曳着窗帘，夕阳斜射入教室，在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友，不行吗？」 ", " 就算是沉落地面的太阳，只要夜晚过了一定会再度升起，不管有什么痛苦或难过的事，跟今天截然不同的明天也一定会到来。 ", " 我的腿让我停下，可是心却不允许我那么做。 ", " 生活就像超级女生，走到最后的都是纯爷们。 ", " 我要拼，装上假牙也要拼！ ", " 想要成为无论多么悲伤的时候，也能够漂亮微笑的人吧。 ", " 人们只是用好人来称呼对自己有用的人而以，不存在对所有人都有用的人。 ", " 烈焰中舞动的火花，将赐予邪恶异性交往以天罚。 ", " 无论乌云有多浓厚，星星也一定还在，只是暂时看不到了而已。 ", " 不相信人咬不到肚脐的，咬破肚脐去死如何？ ", " 人一生会遇到约万人，两个人相爱的概率是.。所以你不爱我，我不怪你。 ", " 不管看到什么样的过去，都请不要迷失自己，不管你变成什么样子，我都是你的同伴。 ", " 心，可是很重的。 ", " 我爱上的人，称我为怪叔叔 ", " 慕君之心，至死方休。 ", " 虚伪的眼泪，会伤害别人，虚伪的笑容，会伤害自己。 ", " 若隐若现才是艺术！ ", " 生我何用？不能欢笑。灭我何用？不减狂骄。 ", " 就是因为你不好，才要留在你身边，给你幸福。 ", " 呐，我们好像是，被宇宙和地球拆散的恋人似的。 ", " 你会梦游，我会磨牙，我们晚上一起去吓人吧！ ", " 或许只需一滴露水，便能守护这绽放的花朵。 ", " 自己永远是孤单的，但你可以让其他人变得不孤单。 ", " 和哥哥的便当比起来夜空的薯片就像大便一样！只会给我大便的大便夜空是笨蛋～笨蛋～ ", " 我手中的魔法，是守护挚爱的力量，是坚定这个信念所必须的力量，我一定会拯救你的，无论在何时、何地。 ", " 要改变别人的心真是件很难办的事，不过改变自己要容易一点。 ", " 风筝的线你随时可以放开，只是别盼望我会回来。 ", " 与你的生命等价的东西，这个世界上根本没有。 ", " 君子可寓意于物，但不可留意于物。 ", " 最好的感觉，是有人懂你的欲言又止。 ", " 看似美好的东西，往往藏着陷阱。 ", " 爱,其实很简单，困难的是去接受它。 ", " 喜欢大胸只是本能，喜欢贫乳才是审美。 ", " 二次元什么的我本来是不感冒的，直到我的膝盖中了一箭。 ", " 努力是不会背叛自己的，虽然梦想有时会背叛自己。 ", " 面对就好，去经历就好。 ", " 我从小就害怕虫子 ", " 做不到的话，不过就是一死 。但是，赢了就能活下去，要是不战斗就赢不了。 ", " 既然认准这条路，何必去打听要走多久。 ", " 研表究明，汉字的序顺并不定一能影阅响读，比如当你看完这句话后，才发这现里的字全是都乱的。 ", " 少年心意，一如明月松间的青石流水，那些年里看到了，却不懂。 ", " 明明只是活着，哀伤却无处不在⋯⋯ ", " 少罗嗦，你还不如虫子呢！ ", " 天空是连着的，如果我们也能各自发光的话，无论距离有多远，都能看到彼此努力的身影。 ", " 别人恋爱不成功，你连暗恋都不成功！ ", ]; ​ var randomIndex = Math.floor(Math.random() * yuluResponses.length); var randomResponse = yuluResponses[randomIndex]; a(c, randomResponse); }, };打开Handsome主题目录下的 component/comments.php文件,找到并删除如下内容：修改成如下代码：<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?> 打卡 语录 时光机头像圆形打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/* 时光机圆形头像 */ .img-square {border-radius: 50%;} .list-group-item .thumb-sm .img-square {border-radius: 5px;}logo 扫光打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/* logo 扫光开始 */ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}} /*logo 扫光结束*/复制版权提示打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可/* 复制成功提示代码开始 */ kaygb_copy(); function kaygb_copy() { $(document).ready(function () { $("body").bind('copy', function (e) { hellolayer(); }); }); var sitesurl = window.location.href; function hellolayer() { $.message({ message: "尊重原创，转载请注明出处！ 本文作者：XXX 原文链接：" + sitesurl, title: "复制成功", type: "warning", autoHide: false, time: "3000" }); } } /* 复制成功提示代码结束 */彩色标签云及右栏数字打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可/*彩色标签云代码开始*/ let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); /*彩色标签云代码结束*/响应时间和访客总数将以下代码放到/usr/themes/handsome/function.php的最下面/*访问总量代码开始*/ function theAllViews(){ $db = Typecho_Db::get(); $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`'); echo number_format($row[0]['SUM(VIEWS)']); } /*访问总量代码结束*/ /*响应时间代码开始*/ function timer_start() { global $timestart; $mtime = explode( ' ', microtime() ); $timestart = $mtime[1] + $mtime[0]; return true; } timer_start(); function timer_stop( $display = 0, $precision = 3 ) { global $timestart, $timeend; $mtime = explode( ' ', microtime() ); $timeend = $mtime[1] + $mtime[0]; $timetotal = number_format( $timeend - $timestart, $precision ); $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s"; if ( $display ) { echo $r; } return $r; } /*响应时间代码结束*/然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，找到博客信息添加即可 <?php echo theAllViews();?><?php _me("访客总数") ?> <?php echo timer_stop();?><?php _me("响应耗时") ?> 全站字数统计将以下代码放到/usr/themes/handsome/component/sidebar.php的开头<?php //字数统计 function allOfCharacters() { $chars = 0; $db = Typecho_Db::get(); $select = $db ->select('text')->from('table.contents'); $rows = $db->fetchAll($select); foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); } $unit = ''; if($chars >= 10000) { $chars /= 10000; $unit = '万'; } else if($chars >= 1000) { $chars /= 1000; $unit = '千'; } $out = sprintf('%.2lf %s',$chars, $unit); return $out; } ?>然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，加到合适的位置 <?php echo allOfCharacters(); ?><?php _me("全站字数") ?> 版权提示在主题文件post.php内，文章内容下方加上下面的代码 本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?> 文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?> 本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?> 版权说明：若无注明，本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?>原创，转载请保留文章出处。 总结通过以上美化方案，你可以让你的 Handsome 主题博客更加个性化和美观。这些功能大多是我自己也在用的。你可以参考截图和本站实际效果，根据自己的需求选择性地使用这些功能。 如果你在使用过程中遇到任何问题，欢迎在评论区留言讨论。同时，也欢迎你分享自己的美化心得，让我们一起打造更好的博客！
handsome主题添加服务器状态栏最新版（Linux通用版）
本文转自https://blog.ybyq.wang/archives/325.html，感谢大佬的分享，转载仅做存档，侵权删除背景说明这个版本和之前的做了以下升级： 1.新增了缓存命中率、系统信息、操作系统、连接类型、当前域名的信息显示 2.添加了对应信息项的Awesome图标 3.固定了标签颜色，使其不受插件标签颜色的影响， 4.优化了性能并增加了对Apache的适配。 5.保留了在长亭雷池WAF或宝塔WAF保护下IP的真实性功能特点 实时监控服务器CPU、内存、磁盘使用率 显示服务器运行时间、IO和网络状态 准确获取访客IP、地理位置、设备和浏览器信息 全面支持电信、联通、移动等各类网络环境 兼容Linux系统（CentOS Stream 9、Ubuntu 22.04、Debian 10.2等） 环境是Linux系统，PHP8.0（7.4以上即可），typecho1.2.1 实现步骤1. 安装必要的系统工具（可选）首先，确保系统安装了必要的工具：apt-get update apt-get install -y procps net-tools sysstat2. 修改 headnav.php 文件文件位置：usr/themes/handsome/component/headnav.php在找到如下代码段： <?php if (@Utils::getExpertValue("show_static",true) !== false): ?> 添加代码：[zd-plane title="折叠标题" open="0"] <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> 运行状态 CPU占用 8核心 占用内存 磁盘占用 内存缓存 内存缓冲 系统负载 缓存命中率 网络状态 IO 实时IO 网络 实时网络 服务器时间 <?php echo $_SERVER['SERVER_SOFTWARE']; ?> WEB服务器 <?php echo $_SERVER['SERVER_PROTOCOL']; ?> 通信协议 <?php echo PHP_VERSION; ?> PHP版本 系统信息 操作系统 访客信息 持续运行 您的IP 网络地址 浏览器信息 您的设备 <?php echo $_SERVER['REQUEST_METHOD']; ?> 请求方法 <?php echo $_SERVER['HTTP_ACCEPT_LANGUAGE']; ?> 服务语言 <?php echo (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? "HTTPS" : "HTTP"; ?> 连接类型 <?php echo $_SERVER['HTTP_HOST']; ?> 当前域名 您的设备时间 [/zd-plane]3. 修改 footer.php 文件文件位置：usr/themes/handsome/component/footer.php在找到如下代码位置：<?php $this->options->bottomHtml(); ?> 添加如下JavaScript代码：[zd-plane title="折叠标题" open="0"] [/zd-plane]4. 创建 serverInfo.php 文件在网站根目录创建 serverInfo.php 文件，内容如下：<?php header('Content-Type: application/json; charset=utf-8'); header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); /** * Tries to get file contents, using file_get_contents and falling back to shell_exec('cat'). * This can help in environments with restrictions like open_basedir. * @param string $file The path to the file. * @return string|false The file contents or false on failure. */ function GetContents($file) { if (!@is_readable($file)) { return false; } $content = @file_get_contents($file); if ($content !== false) { return $content; } if (function_exists('shell_exec') && false === strpos(ini_get('disable_functions'), 'shell_exec')) { $output = shell_exec('cat ' . escapeshellarg($file)); if ($output) { return $output; } } return false; } function size_format($bytes, $decimals = 2) { $size = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']; $factor = floor((strlen($bytes) - 1) / 3); return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . $size[$factor]; } function netSize($bytes) { if ($bytes < 1024) return $bytes . ' B'; if ($bytes < 1048576) return round($bytes / 1024, 2) . ' KB'; if ($bytes < 1073741824) return round($bytes / 1048576, 2) . ' MB'; return round($bytes / 1073741824, 2) . ' GB'; } /** * 获取当前Unix时间戳 * */ $unixTimestamp = time(); /** * 获取服务器总的运行时长 * */ $serverUptime = getUpTime(); /** * 获取服务器负载 以及CPU使用信息 * */ $serverLoad = GetLoad(); $cpuUsage = GetCPUInfo(); /** * 获取服务器内存信息 * */ $memoryInfo = GetMem(); // 处理IP信息请求 if (isset($_GET['action']) && $_GET['action'] == 'getip') { // 获取用户真实IP地址 $ip = ''; // 检查各种可能的代理头部 $headers = [ 'HTTP_CF_CONNECTING_IP', // Cloudflare 'HTTP_X_FORWARDED_FOR', // 通用代理和CDN 'HTTP_X_REAL_IP', // Nginx代理 'HTTP_CLIENT_IP', // 客户端代理 'HTTP_X_FORWARDED', // 通用 'HTTP_FORWARDED_FOR', // 通用 'HTTP_FORWARDED', // 通用 'HTTP_X_CLUSTER_CLIENT_IP', // 集群 'HTTP_TRUE_CLIENT_IP', // Akamai和Cloudflare 'HTTP_X_CHAITIN_IP', // 长亭雷池可能使用的头部 'REMOTE_ADDR' // 直接连接 ]; // 记录所有可能的IP来源（调试用） $debug_headers = []; foreach ($headers as $header) { if (!empty($_SERVER[$header])) { $debug_headers[$header] = $_SERVER[$header]; } } // 尝试获取真实IP foreach ($headers as $header) { if (!empty($_SERVER[$header])) { $ip_array = explode(',', $_SERVER[$header]); $ip = trim($ip_array[0]); // 第一个IP通常是客户端真实IP break; } } // 简单过滤掉非法IP $ip = filter_var($ip, FILTER_VALIDATE_IP) ? $ip : '未知'; // 获取地理位置信息（只对公网IP有效） $location = ''; // 检查是否是内网IP if (!filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE)) { $location = '内网IP: ' . $ip; // 显示具体的内网IP地址 } else { // 方法1：使用太平洋IP库（覆盖较全面，国内外都支持） $url = "http://whois.pconline.com.cn/ipJson.jsp?ip={$ip}&json=true"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 3); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36'); curl_setopt($ch, CURLOPT_ENCODING, 'gzip,deflate'); $response = curl_exec($ch); $errno = curl_errno($ch); curl_close($ch); if ($response && !$errno) { // 太平洋的接口返回的是GB2312编码，需要转换 $response = mb_convert_encoding($response, 'UTF-8', 'GBK'); $data = json_decode($response, true); if ($data && isset($data['pro']) && isset($data['city'])) { $region = ''; if (!empty($data['pro'])) { $region .= $data['pro']; } if (!empty($data['city']) && $data['city'] != $data['pro']) { $region .= ' ' . $data['city']; } // 根据IP段判断运营商 $carrier = judgeCarrier($ip); if ($carrier) { $region .= ' ' . $carrier; } $location = $region ? $region : '未知区域'; } } // 方法2：使用IpInfo API（国外IP支持较好） if (empty($location)) { $url = "https://ipinfo.io/{$ip}/json"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 3); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36'); $response = curl_exec($ch); curl_close($ch); if ($response) { $data = json_decode($response, true); if ($data && isset($data['region']) && isset($data['city'])) { $region = ''; if (!empty($data['country'])) { $region .= getCountryName($data['country']); } if (!empty($data['region'])) { $region .= ' ' . $data['region']; } if (!empty($data['city'])) { $region .= ' ' . $data['city']; } if (!empty($data['org'])) { $region .= ' ' . preg_replace('/^AS\d+\s+/', '', $data['org']); } else { // 补充运营商信息 $carrier = judgeCarrier($ip); if ($carrier) { $region .= ' ' . $carrier; } } $location = $region ? $region : '未知区域'; } } } // 方法3：使用IPIP.net的免费接口（国内移动网络支持较好） if (empty($location)) { $url = "https://freeapi.ipip.net/{$ip}"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 3); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36'); $response = curl_exec($ch); curl_close($ch); if ($response && $response != '{}') { $data = json_decode($response, true); if (is_array($data) && count($data) >= 4) { // IPIP.net返回格式：["中国","福建","厦门","","移动"] $region = ''; if (!empty($data[1])) { $region .= $data[1]; // 省份 } if (!empty($data[2]) && $data[2] != $data[1]) { $region .= ' ' . $data[2]; // 城市 } if (!empty($data[4])) { $region .= ' ' . $data[4]; // 运营商 } else { // 补充运营商信息 $carrier = judgeCarrier($ip); if ($carrier) { $region .= ' ' . $carrier; } } $location = $region ? $region : '未知区域'; } } } // 方法4：使用淘宝IP库（作为备用） if (empty($location)) { $url = "https://ip.taobao.com/outGetIpInfo?ip=" . $ip . "&accessKey=alibaba-inc"; $opts = array( 'http' => array( 'method' => "GET", 'timeout' => 3, ) ); $context = stream_context_create($opts); $response = @file_get_contents($url, false, $context); if ($response !== false) { $data = json_decode($response, true); if (isset($data['data']) && $data['data']) { $result = $data['data']; $region = ''; if (!empty($result['region'])) { $region .= $result['region']; } if (!empty($result['city']) && $result['city'] != $result['region']) { $region .= ' ' . $result['city']; } if (!empty($result['isp'])) { $region .= ' ' . $result['isp']; } else { // 补充运营商信息 $carrier = judgeCarrier($ip); if ($carrier) { $region .= ' ' . $carrier; } } $location = $region ? $region : '未知区域'; } } } // 方法5：极速数据网络IP库（移动网络特别友好） if (empty($location)) { $url = "http://ip.jisuapi.com/api/ip/geo?ip={$ip}"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 3); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $response = curl_exec($ch); curl_close($ch); if ($response) { $data = json_decode($response, true); if (isset($data['result']) && $data['result']) { $result = $data['result']; $region = ''; if (!empty($result['province'])) { $region .= $result['province']; } if (!empty($result['city']) && $result['city'] != $result['province']) { $region .= ' ' . $result['city']; } if (!empty($result['isp'])) { $region .= ' ' . $result['isp']; } else { // 补充运营商信息 $carrier = judgeCarrier($ip); if ($carrier) { $region .= ' ' . $carrier; } } $location = $region ? $region : '未知区域'; } } } // 方法6：仅使用IP段进行精准匹配（最后保障） if (empty($location)) { // 根据IP段匹配位置信息 $ipLocation = getIpLocation($ip); if ($ipLocation) { $location = $ipLocation; } else { // 至少返回运营商信息 $carrier = judgeCarrier($ip); if ($carrier) { $location = $carrier; } else { $location = "公网IP"; } } } } // 返回IP信息 echo json_encode([ 'ip' => $ip, 'location' => $location, 'debug' => $debug_headers // 添加调试信息 ]); exit; } /** * 根据IP地址判断归属运营商 * @param string $ip IP地址 * @return string 运营商名称 */ function judgeCarrier($ip) { // 特殊IP段映射 $special_ip_carriers = [ // 移动特殊段 '39.128.' => '中国移动', '39.129.' => '中国移动', '39.130.' => '中国移动', '39.131.' => '中国移动', '39.132.' => '中国移动', '39.133.' => '中国移动', '39.134.' => '中国移动', '39.135.' => '中国移动', '39.136.' => '中国移动', '39.137.' => '中国移动', '39.138.' => '中国移动', '39.139.' => '中国移动', '39.140.' => '中国移动', '39.141.' => '中国移动', '39.142.' => '中国移动', '39.143.' => '中国移动', '39.144.' => '中国移动', '39.145.' => '中国移动', '39.146.' => '中国移动', '39.147.' => '中国移动', '39.148.' => '中国移动', '39.149.' => '中国移动', '39.150.' => '中国移动', '39.151.' => '中国移动', '39.152.' => '中国移动', '39.153.' => '中国移动', '39.154.' => '中国移动', '39.155.' => '中国移动', '39.156.' => '中国移动', '39.157.' => '中国移动', '39.158.' => '中国移动', '39.159.' => '中国移动', '39.176.' => '中国移动', '40.128.' => '中国移动', '40.129.' => '中国移动', '40.130.' => '中国移动', '41.128.' => '中国移动', '42.128.' => '中国移动', '43.128.' => '中国移动', // 联通特殊段 '44.128.' => '中国联通', '45.128.' => '中国联通', '46.128.' => '中国联通', // 电信特殊段 '48.128.' => '中国电信', '49.128.' => '中国电信', '50.128.' => '中国电信', '51.128.' => '中国电信', ]; // 检查特殊IP段映射 foreach ($special_ip_carriers as $prefix => $carrier) { if (strpos($ip, $prefix) === 0) { return $carrier; } } // 移动 $china_mobile = [ '39', '40', '41', '42', '43', // 新的移动段 '47.0', '47.1', '47.2', '47.3', // 兼容部分联通和移动混用 '178.', '180.', '182.', '183.', '184.', '157.', '158.', '159.', '165.', '172.', '120.204.', '120.205.', '120.206.', '120.207.', '120.208.', '120.209.', '120.210.', '120.211.', '120.212.', '120.213.', '120.214.', '120.215.', '221.130.', '221.131.', '221.132.', '221.133.', '221.134.', '221.135.', '221.136.', '221.137.', '221.138.', '221.139.', '211.103.', '211.137.', ]; // 联通 $china_unicom = [ '44', '45', '46', // 新的联通段 '47.4', '47.5', '47.6', '47.7', '47.8', '47.9', // 兼容部分联通和移动混用 '130.', '131.', '132.', '155.', '156.', '186.', '145.', '146.', '166.', '175.', '171.', '175.', '176.', '185.', '186.', '166.', '120.64.', '120.65.', '120.66.', '120.67.', '120.68.', '120.69.', '120.70.', '120.71.', '120.72.', '120.73.', '120.74.', '120.75.', '120.76.', '120.77.', '120.78.', '120.79.', '120.80.', '120.81.', '121.76.', '121.77.', '121.78.', '121.79.', '121.80.', '121.81.', '218.100.', '218.104.', '218.108.', '211.90.', '211.91.', '211.92.', '211.93.', '211.94.', '211.95.', '211.96.', '211.97.', '211.98.', '211.99.', '211.100.', '211.101.', '211.102.', ]; // 电信 $china_telecom = [ '48', '49', '50', '51', // 新的电信段 '133.', '153.', '173.', '177.', '180.', '181.', '189.', '199.', '120.128.', '120.129.', '120.130.', '120.131.', '120.132.', '120.133.', '120.134.', '120.135.', '120.136.', '120.137.', '120.138.', '120.139.', '120.140.', '120.141.', '120.142.', '120.143.', '120.144.', '120.145.', '113.64.', '113.65.', '113.66.', '113.67.', '113.68.', '113.69.', '113.70.', '113.71.', '113.72.', '113.73.', '113.74.', '113.75.', '125.64.', '125.65.', '125.66.', '125.67.', '125.68.', '125.69.', '125.70.', '125.71.', '125.72.', '125.73.', '125.74.', '125.75.', '210.5.', '210.12.', '210.14.', '210.21.', '210.32.', '210.51.', '210.52.', '210.77.', '210.192.', ]; // 铁通/广电/其他 $china_other = [ '36', '37', '38', // 其他杂段 '1700', '1705', '1709', // 虚拟运营商 ]; // 特定省份IP段 $province_ip_map = [ // 河南移动IP段范围 '39.144.25' => '河南 南阳 中国移动', '39.144.26' => '河南 南阳 中国移动', '39.144.27' => '河南 南阳 中国移动', // 福建电信IP段范围 '120.32.2' => '福建 厦门 中国电信', '120.32.3' => '福建 厦门 中国电信', '120.32.4' => '福建 厦门 中国电信', ]; // 检查特定省份IP段映射 foreach ($province_ip_map as $prefix => $location) { if (strpos($ip, $prefix) === 0) { return $location; } } foreach ($china_mobile as $prefix) { if (strpos($ip, $prefix) === 0) { return '中国移动'; } } foreach ($china_unicom as $prefix) { if (strpos($ip, $prefix) === 0) { return '中国联通'; } } foreach ($china_telecom as $prefix) { if (strpos($ip, $prefix) === 0) { return '中国电信'; } } foreach ($china_other as $prefix) { if (strpos($ip, $prefix) === 0) { return '其他运营商'; } } return ''; } /** * 根据IP前缀识别地理位置 * @param string $ip IP地址 * @return string 地理位置 */ function getIpLocation($ip) { // 特定地区IP段映射表 $ip_location_map = [ // 河南移动 '39.144.2' => '河南 中国移动', '39.144.25' => '河南 南阳 中国移动', '39.144.26' => '河南 南阳 中国移动', // 福建电信 '120.32.2' => '福建 厦门 中国电信', '120.32.3' => '福建 厦门 中国电信', // 北京联通 '111.200.' => '北京 中国联通', '111.201.' => '北京 中国联通', // 上海电信 '180.166.' => '上海 中国电信', '180.167.' => '上海 中国电信', // 广东移动 '120.231.' => '广东 中国移动', '120.232.' => '广东 中国移动', // 浙江电信 '115.192.' => '浙江 杭州 中国电信', '115.193.' => '浙江 杭州 中国电信', ]; // 逐段检查，从最长前缀到最短 $segments = explode('.', $ip); // 检查前三段 (如 192.168.1) if (count($segments) >= 3) { $prefix3 = $segments[0] . '.' . $segments[1] . '.' . $segments[2]; if (isset($ip_location_map[$prefix3])) { return $ip_location_map[$prefix3]; } } // 检查前两段 (如 192.168) if (count($segments) >= 2) { $prefix2 = $segments[0] . '.' . $segments[1]; if (isset($ip_location_map[$prefix2])) { return $ip_location_map[$prefix2]; } } // 检查第一段 (如 192) if (count($segments) >= 1) { $prefix1 = $segments[0]; if (isset($ip_location_map[$prefix1])) { return $ip_location_map[$prefix1]; } } return ''; } /** * 获取国家名称（将ISO代码转为中文名称） * @param string $code 国家代码 * @return string 国家名称 */ function getCountryName($code) { $countries = [ 'CN' => '中国', 'US' => '美国', 'JP' => '日本', 'KR' => '韩国', 'GB' => '英国', 'DE' => '德国', 'FR' => '法国', 'RU' => '俄罗斯', 'CA' => '加拿大', 'AU' => '澳大利亚', 'HK' => '香港', 'TW' => '台湾', ]; return isset($countries[$code]) ? $countries[$code] : $code; } /** * 获取详细的操作系统信息 * @return string */ function getDetailedOsInfo() { if (stristr(PHP_OS, 'WIN')) { return php_uname('s') . ' ' . php_uname('r'); } if (@is_readable('/etc/os-release')) { $vars = parse_ini_file('/etc/os-release'); if (!empty($vars['PRETTY_NAME'])) return $vars['PRETTY_NAME']; if (!empty($vars['NAME'])) return $vars['NAME'] . (isset($vars['VERSION']) ? ' ' . $vars['VERSION'] : ''); } return php_uname('s') . ' ' . php_uname('r'); } // 定义要输出的内容 $serverInfo = array( 'serverTime' => date('Y-m-d H:i:s', $unixTimestamp), 'serverUptime' => array( 'days' => $serverUptime['days'], 'hours' => $serverUptime['hours'], 'mins' => $serverUptime['mins'], 'secs' => $serverUptime['secs'] ), 'serverUtcTime' => date('Y/m/d H:i:s', $unixTimestamp), 'diskUsage' => array( 'value' => disk_total_space(__FILE__) - disk_free_space(__FILE__), 'max' => disk_total_space(__FILE__) ), 'sysInfo' => php_uname('s') . ' ' . php_uname('r'), 'osInfo' => getDetailedOsInfo(), // This is new ); $serverStatus = array( 'sysLoad' => array($serverLoad['1m'], $serverLoad['5m'], $serverLoad['15m']), 'cpuUsage' => array( 'user' => $cpuUsage['user'], 'nice' => $cpuUsage['nice'], 'sys' => $cpuUsage['sys'], 'idle' => $cpuUsage['idle'] ), 'memRealUsage' => array( 'value' => $memoryInfo['mRealUsed'], 'max' => $memoryInfo['mTotal'] ), 'memBuffers' => array( 'value' => $memoryInfo['mBuffers'], 'max' => $memoryInfo['mTotal'] ), 'memCached' => array( 'value' => $memoryInfo['mCached'], 'max' => $memoryInfo['mTotal'] ), 'swapUsage' => array( 'value' => $memoryInfo['swapUsed'], 'max' => $memoryInfo['swapTotal'] ), 'swapCached' => array( 'value' => $memoryInfo['swapCached'], 'max' => $memoryInfo['swapTotal'] ) ); $networkStats = array( 'networks' => GetNetwork() ); // 将以上内容合并为一个数组 $output = array( 'serverInfo' => $serverInfo, 'serverStatus' => $serverStatus, 'networkStats' => $networkStats ); // 将数组转换为JSON字符串并输出 echo json_encode($output); /** * 获取系统运行时长 * * @return array */ function getUpTime() { $uptime_str = GetContents("/proc/uptime"); if (false === $uptime_str) { return array('days' => 0, 'hours' => 0, 'mins' => 0, 'secs' => 0); } $uptime = (float)$uptime_str; $days = floor($uptime / 86400); $hours = floor(($uptime % 86400) / 3600); $minutes = floor((($uptime % 86400) % 3600) / 60); $seconds = floor(($uptime % 3600) % 60); return array( 'days' => $days, 'hours' => $hours, 'mins' => $minutes, 'secs' => $seconds ); } /** * 获取系统负载 * * @return array|false|string[] */ function GetLoad() { $str = GetContents("/proc/loadavg"); if (false === $str) { return ['1m' => 0, '5m' => 0, '15m' => 0]; } $loads = explode(' ', $str); if (count($loads) >= 3) { return [ '1m' => $loads[0], '5m' => $loads[1], '15m' => $loads[2], ]; } return ['1m' => 0, '5m' => 0, '15m' => 0]; } function GetCPUInfo() { $load = sys_getloadavg(); $user = $load[0]; $nice = $load[1]; $sys = $load[2]; $idle = 100 - ($user + $nice + $sys); return [ 'user' => $user, 'nice' => $nice, 'sys' => $sys, 'idle' => $idle, ]; } /** * 内存信息 * * @param bool $bFormat 格式化 * * @return array */ function GetMem(bool $bFormat = false) { $defaults = [ 'mTotal' => 0, 'mFree' => 0, 'mBuffers' => 0, 'mCached' => 0, 'mUsed' => 0, 'mPercent' => 0, 'mRealUsed' => 0, 'mRealFree' => 0, 'mRealPercent' => 0, 'mCachedPercent' => 0, 'swapTotal' => 0, 'swapFree' => 0, 'swapUsed' => 0, 'swapPercent' => 0, 'swapCached' => 0 ]; $str = GetContents("/proc/meminfo"); if (false === $str) { return $defaults; } preg_match_all("/MemTotal\s{0,}\:+\s{0,}([\d\.]+).+?MemFree\s{0,}\:+\s{0,}([\d\.]+).+?Cached\s{0,}\:+\s{0,}([\d\.]+).+?SwapTotal\s{0,}\:+\s{0,}([\d\.]+).+?SwapFree\s{0,}\:+\s{0,}([\d\.]+)/s", $str, $mems); preg_match_all("/Buffers\s{0,}\:+\s{0,}([\d\.]+)/s", $str, $buffers); preg_match("/SwapCached\s{0,}\:+\s{0,}([\d\.]+)/s", $str, $swap_cached_match); if (!isset($mems[1][0], $mems[2][0], $mems[3][0], $mems[4][0], $mems[5][0], $buffers[1][0])) { return $defaults; } $mtotal = $mems[1][0] * 1024; $mfree = $mems[2][0] * 1024; $mbuffers = $buffers[1][0] * 1024; $mcached = $mems[3][0] * 1024; $stotal = $mems[4][0] * 1024; $sfree = $mems[5][0] * 1024; $swap_cached = !empty($swap_cached_match[1]) ? $swap_cached_match[1] * 1024 : 0; $mused = $mtotal - $mfree; $sused = $stotal - $sfree; $mrealused = $mtotal - $mfree - $mcached - $mbuffers; $rtn['mTotal'] = !$bFormat ? $mtotal : size_format($mtotal, 1); $rtn['mFree'] = !$bFormat ? $mfree : size_format($mfree, 1); $rtn['mBuffers'] = !$bFormat ? $mbuffers : size_format($mbuffers, 1); $rtn['mCached'] = !$bFormat ? $mcached : size_format($mcached, 1); $rtn['mUsed'] = !$bFormat ? ($mtotal - $mfree) : size_format($mtotal - $mfree, 1); $rtn['mPercent'] = (floatval($mtotal) != 0) ? round($mused / $mtotal * 100, 1) : 0; $rtn['mRealUsed'] = !$bFormat ? $mrealused : size_format($mrealused, 1); $rtn['mRealFree'] = !$bFormat ? ($mtotal - $mrealused) : size_format($mtotal - $mrealused, 1); $rtn['mRealPercent'] = (floatval($mtotal) != 0) ? round($mrealused / $mtotal * 100, 1) : 0; $rtn['mCachedPercent'] = (floatval($mcached) != 0) ? round($mcached / $mtotal * 100, 1) : 0; $rtn['swapTotal'] = !$bFormat ? $stotal : size_format($stotal, 1); $rtn['swapFree'] = !$bFormat ? $sfree : size_format($sfree, 1); $rtn['swapUsed'] = !$bFormat ? $sused : size_format($sused, 1); $rtn['swapPercent'] = (floatval($stotal) != 0) ? round($sused / $stotal * 100, 1) : 0; $rtn['swapCached'] = !$bFormat ? $swap_cached : size_format($swap_cached, 1); return $rtn; } /** * 获取网络数据 * * @param bool $bFormat * * @return array */ function GetNetwork(bool $bFormat = false) { $rtn = []; $netstat = GetContents('/proc/net/dev'); if (false === $netstat) { return []; } $bufe = preg_split("/\n/", $netstat, -1, PREG_SPLIT_NO_EMPTY); foreach ($bufe as $buf) { if (preg_match('/:/', $buf)) { list($dev_name, $stats_list) = preg_split('/:/', $buf, 2); $dev_name = trim($dev_name); $stats = preg_split('/\s+/', trim($stats_list)); if (count($stats) < 10) { continue; } $rtn[$dev_name]['name'] = $dev_name; $rtn[$dev_name]['rx'] = !$bFormat ? $stats[0] : netSize($stats[0]); $rtn[$dev_name]['in_packets'] = $stats[1]; $rtn[$dev_name]['in_errors'] = $stats[2]; $rtn[$dev_name]['in_drop'] = $stats[3]; $rtn[$dev_name]['tx'] = !$bFormat ? $stats[8] : netSize($stats[8]); $rtn[$dev_name]['out_packets'] = $stats[9]; $rtn[$dev_name]['out_errors'] = $stats[10] ?? 0; $rtn[$dev_name]['out_drop'] = $stats[11] ?? 0; } } return $rtn; }使用宝塔面板配置说明若使用宝塔面板环境，请修改网站根目录中的 .user.ini 文件，在 open_basedir 后面追加 :/proc/：open_basedir=/www/wwwroot/your.domain/:/tmp/:/proc/PHP安全设置调整（可选）在Debian系统上，需要确保PHP可以执行shell命令。修改php.ini文件： 找到 disable_functions 行，确保 shell_exec, exec, system 未被禁用 如果在该行找到这些函数，请删除它们（用逗号分隔） Apache配置（可选）如果使用Apache服务器，可能需要修改配置允许执行系统命令： 编辑网站的虚拟主机配置文件或 .htaccess 文件 添加以下内容： <Directory /var/www/html> Options +ExecCGI </Directory>常见问题排查如果遇到问题，可以尝试以下排查步骤： 检查PHP是否有权限执行shell命令cd /path/to/your/website php -r "echo shell_exec('whoami');"如果返回用户名，说明PHP有权限执行shell命令 检查是否可以访问/proc目录php -r "var_dump(file_get_contents('/proc/uptime'));"如果返回内容而不是false或错误，说明可以访问/proc目录 检查必要的命令是否可用which top free ifconfig ip确保这些命令都可用 CPU核心数默认是8核，可在headnav.php中修改 数据加载缓慢时尝试调整PHP版本为8.0并按照上述教程解禁函数，然后重启服务器 如有其他问题，欢迎在评论区留言
简介自从iOS 26 的液态玻璃设计火了之后，就一直想把手底下的网站改一改样式，思来想去只有网盘最合适，刚好用的就是openlist。于是就修改为玻璃拟态主题，并加入了视频背景和自定义底部内容。特点 玻璃拟态效果：所有 UI 元素采用高级玻璃质感设计 动态视频背景：支持响应式视频背景（桌面/移动端自适应） SVG 滤镜特效：使用高级 SVG 滤镜实现液体玻璃效果 暗色模式支持：完美适配 Hope UI 暗色模式 响应式设计：全面适配桌面和移动设备 优雅动画：平滑过渡和悬停效果 详细步骤 登录 OpenList/AList 管理后台 进入「设置」→「全局」→「自定义头部」将以下内容添加到对应位置 进入「设置」→「全局」→「自定义内容」将以下内容添加到对应位置 <filter id="liquid-glass-filter" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox"><feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence"></feTurbulence><feComponentTransfer in="turbulence" result="mapped"><feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5"></feFuncR><feFuncG type="gamma" amplitude="0" exponent="1" offset="0"></feFuncG><feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5"></feFuncB></feComponentTransfer><feGaussianBlur in="turbulence" stdDeviation="3" result="softMap"></feGaussianBlur><feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight"><fePointLight x="-200" y="-200" z="300"></fePointLight></feSpecularLighting><feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage"></feComposite><feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap></filter> 保存设置并刷新页面查看效果 自定义配置您可以根据需要修改以下配置： 视频源： 修改 config.video.mobileSource 和 config.video.desktopSource 替换为您的视频链接 背景图片（防止视频失效）： 在 CSS 中修改 --mobile-background-image 和 --desktop-background-image 变量值 页脚信息： 在 config.footer.blog 中修改博客链接 在 getFooterHtml() 方法中自定义页脚 HTML 效果展示 移动设备（小屏）： 桌面设备（大屏）：