Hello World - 主题美化
type: channel
link: https://blog.chario.cn/index.php/category/theme/
items: OpenList Moe - 全局毛玻璃美学 · 日夜间适配
items: handsome主题美化及优化：10.1.0最新版
items: handsome主题添加服务器状态栏最新版（Linux通用版）
items: OpenList/AList样式美化：玻璃拟态主题
items: Typecho添加实时在线人数统计功能

OpenList Moe - 全局毛玻璃美学 · 日夜间适配
type: item
date: 2026-02-15T22:11:00+08:00
description: 转载自Sajuna? OpenList Moe为OpenList全局注入半透明模糊效果，支持日夜切换，覆盖文件列表/预览/后台等全组件一个适用于文件列表程序 OpenList 的美化✨ 特性? 兼容日/夜间模式 - 不同背景与配色? 全元素毛玻璃效果 - 半透明元素结合背景模糊? 多层次透明度调校 - 完美的视觉层次? 预览首页桌面端移动端要不去预览站点看看？跟我来，点击右侧文字前往 宸玚的资料库? 使用自定义头部<!-- 修改 href 和 font-family 以自定义字体，删除字体 和字体 CSS 则使用 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

handsome主题美化及优化：10.1.0最新版
type: item
date: 2026-01-15T22:15:00+08:00
description: 主题标题居中打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义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() {…

handsome主题添加服务器状态栏最新版（Linux通用版）
type: item
date: 2026-01-15T22:13:00+08:00
description: 本文转自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…

OpenList/AList样式美化：玻璃拟态主题
type: item
date: 2026-01-15T22:10:00+08:00
description: 简介自从iOS 26 的液态玻璃设计火了之后，就一直想把手底下的网站改一改样式，思来想去只有网盘最合适，刚好用的就是openlist。于是就修改为玻璃拟态主题，并加入了视频背景和自定义底部内容。特点​玻璃拟态效果​：所有 UI 元素采用高级玻璃质感设计​动态视频背景​：支持响应式视频背景（桌面/移动端自适应）​SVG 滤镜特效​：使用高级 SVG 滤镜实现液体玻璃效果​暗色模式支持​：完美适配 Hope UI 暗色模式​响应式设计​：全面适配桌面和移动设备​优雅动画​：平滑过渡和悬停效果详细步骤NaN. 登录 OpenList/AList 管理后台NaN. 进入「设置」→「全局」→「自定义头部」将以下内容添加到对应位置 进入「设置」→「全局」→「自定义内容」将以下内容添加到对应位置 <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> 保存设置并刷新页面查看效果自定义配置您可以根据需要修改以下配置：NaN. 视频源：修改 config.video.mobileSource 和 config.video.desktopSource 替换为您的视频链接NaN. 背景图片（防止视频失效）：在 CSS 中修改 --mobile-background-image 和 --desktop-background-image 变量值NaN. 页脚信息：在 config.footer.blog 中修改博客链接在 getFooterHtml() 方法中自定义页脚 HTML效果展示移动设备（小屏）：桌面设备（大屏）：

Typecho添加实时在线人数统计功能
type: item
date: 2026-01-15T22:03:00+08:00
description: 效果预览添加此功能后，您可以在博客侧边栏或页脚等位置实时显示当前网站的在线访客数量，如下图所示：实现步骤步骤一：添加统计函数代码默认主题：/usr/themes/default/functions.phpHandsome主题：/usr/themes/handsome/functions.php在文件末尾添加以下代码：/** * 在线人数统计函数 */ function online_users() { // 基本配置参数 $filename = 'online.txt'; // 数据文件路径，默认在网站根目录 $cookiename = 'Typecho_Online'; // Cookie名称，用于标识访客 $onlinetime = 30; // 在线有效时间（秒），超过此时间未活动则视为离线 // 读取在线用户数据文件 $online = file_exists($filename) ? file($filename) : array(); $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; } } // 处理当前访客的Cookie if(isset($_COOKIE[$cookiename])) { // 已有Cookie，获取访客ID $uid = $_COOKIE[$cookiename]; } else { // 无Cookie，生成新的唯一访客ID $vid = 0; do { $vid++; $uid = 'U'.$vid; } while(array_key_exists($uid, $nowonline)); // 设置Cookie，默认会话期有效 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); } return $total_online; }步骤二：在模板中显示在线人数通用方法（适用于任何位置）在需要显示在线人数的模板文件中，添加以下代码： 当前在线: <?php echo online_users(); ?> 人 Handsome主题侧边栏添加方法NaN. 编辑文件：/usr/themes/handsome/component/sidebar.phpNaN. 在适当位置（如"统计信息"部分）添加： <?php echo online_users() ?> <?php _me("在线人数") ?> 页脚添加方法编辑主题的footer.php文件，在合适位置添加： 当前在线: <?php echo online_users(); ?> 人 转载自Xuan's blog文章标题：Typecho添加实时在线人数统计功能 本文地址：https://blog.ybyq.wang/archives/331.html