AI摘要

本文介绍了最新版handsome主题添加服务器状态栏的升级内容和实现步骤。升级内容包括新增缓存命中率、系统信息等显示,添加图标,固定标签颜色,优化性能和增加Apache适配,以及保留IP真实性。实现步骤包括安装系统工具、修改headnav.php和footer.php文件,以及创建serverInfo.php文件。还提供了宝塔面板配置说明和PHP安全设置调整建议。最后,提供了常见问题排查方法。

背景说明

这个版本和之前的做了以下升级:
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 sysstat

2. 修改 headnav.php 文件

文件位置:usr/themes/handsome/component/headnav.php

在找到如下代码段:

<!-- statitic info-->
<?php
if (@Utils::getExpertValue("show_static",true) !== false): ?>
<ul class="nav navbar-nav hidden-sm">

    <!-- 在此追加代码 -->

    <li class="dropdown pos-stc">

添加代码:

展开查看添加代码

<!-- 引入Font Awesome图标库 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        <li class="dropdown pos-stc" id="StateDataPos">
            <a id="StateData" href="#" data-toggle="dropdown" class="dropdown-toggle feathericons dropdown-toggle">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                </svg>
                <span class="caret"></span>
            </a>
            <div class="dropdown-menu wrapper w-full bg-white">
                <div class="row">
                    <div class="col-sm-4 b-l b-light">
                        <div class="m-t-xs m-b-xs font-bold">运行状态</div>
                        <div class="">
                            <span class="pull-right text-danger" id="cpu">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-microchip fa-fw" aria-hidden="true"></i> CPU占用
                                <span class="badge badge-sm bg-dark">8核心</span>
                            </span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-default">
                            <div id="cpu_css" class="progress-bar bg-danger" data-toggle="tooltip" style="width: 100%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-danger" id="memory">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-memory fa-fw" aria-hidden="true"></i> 占用内存
                                <span class="badge badge-sm bg-dark" id="memory_data">
                                    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                                </span>
                            </span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-default">
                            <div id="memory_css" class="progress-bar bg-danger" data-toggle="tooltip" style="width: 100%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-danger" id="disk">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-hdd fa-fw" aria-hidden="true"></i> 磁盘占用
                                <span class="badge badge-sm bg-dark" id="disk_data">
                                    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                                </span>
                            </span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-default">
                            <div id="disk_css" class="progress-bar bg-danger" data-toggle="tooltip" style="width: 100%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-danger" id="memCached">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-database fa-fw" aria-hidden="true"></i> 内存缓存
                                <span class="badge badge-sm bg-dark" id="memCached_data">
                                    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                                </span>
                            </span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-default">
                            <div id="memCached_css" class="progress-bar bg-danger" data-toggle="tooltip" style="width: 100%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-danger" id="memBuffers">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-layer-group fa-fw" aria-hidden="true"></i> 内存缓冲
                                <span class="badge badge-sm bg-dark" id="memBuffers_data">
                                    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                                </span>
                            </span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-default">
                            <div id="memBuffers_css" class="progress-bar bg-danger" data-toggle="tooltip" style="width: 100%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-danger" id="state_s">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-tachometer-alt fa-fw" aria-hidden="true"></i> 系统负载
                                <span id="state">
                                    <span class="badge badge-sm bg-dark">
                                        <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                                    </span>
                                </span>
                            </span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-default">
                            <div id="state_css" class="progress-bar bg-danger" data-toggle="tooltip" style="width: 100%"></div>
                        </div>
                        <div class="">
                            <span class="pull-right text-danger" id="cacheHitRate">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-bolt fa-fw" aria-hidden="true"></i> 缓存命中率</span>
                        </div>
                        <div class="progress progress-xs m-t-sm bg-default">
                            <div id="cacheHitRate_css" class="progress-bar bg-info" data-toggle="tooltip" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="col-sm-4 b-l b-light visible-lg visible-md">
                        <div class="m-t-xs m-b-xs font-bold">网络状态</div>
                        <div class="">
                            <span class="pull-right text-default" id="io">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-exchange-alt fa-fw" aria-hidden="true"></i> IO</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="io1">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-random fa-fw" aria-hidden="true"></i> 实时IO</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="eth">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-globe fa-fw" aria-hidden="true"></i> 网络</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="eth1">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-wifi fa-fw" aria-hidden="true"></i> 实时网络</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="time">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="far fa-clock fa-fw" aria-hidden="true"></i> 服务器时间</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default">
                                <span class="badge badge-sm bg-dark"><?php echo $_SERVER['SERVER_SOFTWARE']; ?></span></span>
                            <span><i class="fas fa-server fa-fw" aria-hidden="true"></i> WEB服务器</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default">
                                <span class="badge badge-sm bg-dark"><?php echo $_SERVER['SERVER_PROTOCOL']; ?></span>
                            </span>
                            <span><i class="fas fa-route fa-fw" aria-hidden="true"></i> 通信协议</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default">
                                <span class="badge badge-sm bg-dark"><?php echo PHP_VERSION; ?></span>
                            </span>
                            <span><i class="fas fa-code fa-fw" aria-hidden="true"></i> PHP版本</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="sys_info_badge">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-cogs fa-fw" aria-hidden="true"></i> 系统信息</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="os_info_badge">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-server fa-fw" aria-hidden="true"></i> 操作系统</span>
                        </div>
                        <br />
                    </div>
                    <div class="col-sm-4 b-l b-light visible-lg visible-md">
                        <div class="m-t-xs m-b-sm font-bold">访客信息</div>
                        <div class="">
                            <span class="pull-right text-default" id="u_time">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-hourglass-half fa-fw" aria-hidden="true"></i> 持续运行</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="ip">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-map-marker-alt fa-fw" aria-hidden="true"></i> 您的IP</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="address">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-location-arrow fa-fw" aria-hidden="true"></i> 网络地址</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="b">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fab fa-chrome fa-fw" aria-hidden="true"></i> 浏览器信息</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="sys">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="fas fa-laptop fa-fw" aria-hidden="true"></i> 您的设备</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default">
                                <span class="badge badge-sm bg-dark"><?php echo $_SERVER['REQUEST_METHOD']; ?></span></span>
                            <span><i class="fas fa-paper-plane fa-fw" aria-hidden="true"></i> 请求方法</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default">
                                <span class="badge badge-sm bg-dark"><?php echo $_SERVER['HTTP_ACCEPT_LANGUAGE']; ?></span></span>
                            <span><i class="fas fa-language fa-fw" aria-hidden="true"></i> 服务语言</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default">
                                <span class="badge badge-sm bg-dark"><?php echo (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? "HTTPS" : "HTTP"; ?></span>
                            </span>
                            <span><i class="fas fa-lock fa-fw" aria-hidden="true"></i> 连接类型</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default">
                                <span class="badge badge-sm bg-dark"><?php echo $_SERVER['HTTP_HOST']; ?></span>
                            </span>
                            <span><i class="fas fa-globe fa-fw" aria-hidden="true"></i> 当前域名</span>
                        </div>
                        <br />
                        <div class="">
                            <span class="pull-right text-default" id="sys_times">
                                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                            </span>
                            <span><i class="far fa-calendar-alt fa-fw" aria-hidden="true"></i> 您的设备时间</span>
                        </div>
                    </div>
                </div>
            </div>
        </li>

3. 修改 footer.php 文件

文件位置:usr/themes/handsome/component/footer.php

在找到如下代码位置:

<?php $this->options->bottomHtml(); ?>

   <!-- 在此追加代码 -->

</body>
</html><!--html end-->

添加如下JavaScript代码:

此处内容需要评论回复后(审核通过)方可阅读。

4. 创建 serverInfo.php 文件

在网站根目录创建 serverInfo.php 文件,内容如下:

此处内容需要评论回复后(审核通过)方可阅读。

使用宝塔面板配置说明

若使用宝塔面板环境,请修改网站根目录中的 .user.ini 文件,在 open_basedir 后面追加 :/proc/

open_basedir=/www/wwwroot/your.domain/:/tmp/:/proc/

PHP安全设置调整(可选)

在Debian系统上,需要确保PHP可以执行shell命令。修改php.ini文件:

  1. 找到 disable_functions 行,确保 shell_exec, exec, system 未被禁用
  2. 如果在该行找到这些函数,请删除它们(用逗号分隔)

Apache配置(可选)

如果使用Apache服务器,可能需要修改配置允许执行系统命令:

  1. 编辑网站的虚拟主机配置文件或 .htaccess 文件
  2. 添加以下内容:
<Directory /var/www/html>
    Options +ExecCGI
</Directory>

常见问题排查

如果遇到问题,可以尝试以下排查步骤:

  1. 检查PHP是否有权限执行shell命令

    cd /path/to/your/website
    php -r "echo shell_exec('whoami');"

    如果返回用户名,说明PHP有权限执行shell命令

  2. 检查是否可以访问/proc目录

    php -r "var_dump(file_get_contents('/proc/uptime'));"

    如果返回内容而不是false或错误,说明可以访问/proc目录

  3. 检查必要的命令是否可用

    which top free ifconfig ip

    确保这些命令都可用
    4.CPU核心数默认是2核,可在headnav.php中修改

如有问题,欢迎在评论区留言,也可私信我

如果觉得我的文章对你有用,请随意赞赏
END
本文作者:
文章标题:handsome主题添加服务器状态栏最新版(Linux通用版)
本文地址:https://blog.ybyq.wang/archives/325.html
版权说明:若无注明,本文皆Xuan's blog原创,转载请保留文章出处。