Hello World - 主题美化
type: channel
link: https://csblog.chario.cn/index.php/category/theme/
items: OpenList Moe - 全局毛玻璃美学 · 日夜间适配
items: handsome主题美化及优化：10.1.0最新版
items: handsome主题添加服务器状态栏最新版（Linux通用版）
items: OpenListAList样式美化：玻璃拟态主题

OpenList Moe - 全局毛玻璃美学 · 日夜间适配
type: item
date: 2026-02-15T11:12:20+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-15T11:13:09+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-15T11:12:56+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_…

OpenListAList样式美化：玻璃拟态主题
type: item
date: 2026-01-15T11:12:06+08:00
description: 简介自从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 效果展示 移动设备（小屏）： 桌面设备（大屏）：