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><!--html end-