Typecho handsome主题 添加服务器状态栏最新版教程，附源代码

本文将介绍如何为Typecho博客的handsome主题添加服务器状态栏功能，通过此功能可以实时查看服务器CPU占用、内存使用、磁盘情况以及访客的IP、浏览器等信息。

作者：xuan 原文链接：免费学习 欢迎访问我的博客，获取更多技术文章和教程。

背景说明

使用网上的教程设置后，发现\”您的ip\”、\”网络地址\”、\”浏览器信息\”、\”您的设备\”都无法正常显示。经过排查，发现可能与CentOS 7停止维护有关。于是我对代码进行了优化，使其能在CentOS Stream 9上正常运行。

修改后效果预览

添加服务器状态栏后，可以在博客顶部点击状态图标查看服务器运行情况和访客信息，界面效果如下：

功能特点

• 实时监控服务器CPU、内存、磁盘使用率
• 显示服务器运行时间、IO和网络状态
• 准确获取访客IP、地理位置、设备和浏览器信息
• 全面支持电信、联通、移动等各类网络环境
• 兼容Linux系统（CentOS Stream 9测试通过）
• 环境要求：PHP 8.0+，Typecho 1.2.1+

实现步骤

1. 修改 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\”>

修改为：

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

<!— 这里开始是新追加的内容 —>
<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=\”fa fa-spinner fa-spin\” aria–hidden=\”true\”></i>
</span>
<span>CPU占用
<span class=\”badge badge-sm bg-info\”>2核心</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>
<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>
<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>
</div>
</div>
</li>
<!— 新追加的内容到此结束 —>

<li class=\”dropdown pos-stc\”>

2. 修改 footer.php 文件

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

在找到如下代码位置：

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

<!— 在此追加代码 —>

</body>
</html