Typecho 添加访客信息侧栏
作者博客迁移到 Halo ,并使用从Joe 迁移过来的 halo-theme-joe2.0
-
效果图如下
-
在
core/function.php
文件中函数,解析访客的相关信息function _staticVisitorInfo() { $IP_STR = [ "X_FORWARDED_FOR", "PROXY_CLIENT_IP", "WL_PROXY_CLIENT_IP", "CLIENT_IP", "X_REAL_IP", "REMOTE_ADDR" ]; $JSON = [ "ip" => "0.0.0.0", "views" => 0, "city" => '未知' ]; foreach ($IP_STR as $val) { if (!empty($_SERVER[$val])) { $JSON['ip'] = $_SERVER[$val]; break; } if (!empty($_SERVER["HTTP_" . $val])) { $JSON['ip'] = $_SERVER["HTTP_" . $val]; break; } } // 查询总访问量 $db = Typecho_Db::get(); $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`;'); $JSON['views'] = number_format($row[0]['SUM(VIEWS)']); // 请求淘宝镜像IP库获取城市 $result = _curl("https://ip.taobao.com/outGetIpInfo?accessKey=alibaba-inc&ip=" . $JSON['ip']); $tmp = json_decode($result, true); if ($tmp['code'] === 0) { $JSON['city'] = $tmp['data']['city']; } return $JSON; }
-
在
functions.php
文件中函数,添加侧边栏访客信息开关$JAside_Visitor_Info = new Typecho_Widget_Helper_Form_Element_Select( 'JAside_Visitor_Info', array( 'off' => '关闭(默认)', 'on' => '开启' ), 'off', '是否开启访客信息模块 - PC', '介绍:用于控制是否显示访客信息模块 ' );
效果图如下
-
在
public/aside.php
文件中加入相关代码<?php if ($this->options->JAside_Visitor_Info === 'on') : $userAgent = $_SERVER['HTTP_USER_AGENT']; $json = _staticVisitorInfo(); ?> <section class="joe_aside__item visitor"> <div class="joe_aside__item-title"> <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"> <path d="M953.743 489.524c-8.019-10.468-199.156-256.42-440.908-256.42S79.945 479.056 71.926 489.524c-8.816 11.512-8.816 28.68 0 40.192 8.019 10.468 199.156 256.42 440.908 256.42s432.889-245.952 440.908-256.42c8.817-11.512 8.817-28.68 0.001-40.192zM512.834 725.057c-179.011 0-333.882-158.445-383.786-215.437 49.913-57.002 204.775-215.438 383.786-215.438S846.707 452.618 896.62 509.62c-49.913 57.002-204.775 215.437-383.786 215.437z"></path> <path d="M512.834 362.822c-80.942 0-146.797 65.855-146.797 146.798 0 80.942 65.855 146.798 146.797 146.798 80.943 0 146.798-65.856 146.798-146.798 0-80.943-65.855-146.798-146.798-146.798z m0 237.364c-49.939 0-90.566-40.627-90.566-90.566s40.627-90.567 90.566-90.567 90.567 40.627 90.567 90.567-40.627 90.566-90.567 90.566z"></path> </svg> <span class="text">访客信息</span> <span class="line"></span> </div> <div class="joe_aside__item-contain"> <div class="item"> <span>欢迎来自</span> <span><?php echo $json['city']; ?></span> <span>的朋友</span> </div> <div class="item"> <span>你是第</span> <span><?php echo $json['views'] + 1; ?></span> <span>位相遇的小伙伴</span> </div> <div class="item"> <span>您的IP是</span> <span><?php echo $json['ip']; ?></span> </div> <div class="item"> <span>你使用的是</span> <span><?php _getAgentOS($userAgent); ?></span> <span>操作系统</span> </div> <div class="item"> <span>你正在使用</span> <span><?php _getAgentBrowser($userAgent); ?></span> <span>浏览器</span> </div> </div> </section> <?php endif; ?>
-
加入SCSS样式信息
在 joe.global.min.scss 文件中的的关键词 &.flatterer 下方加入以下SCSS样式信息并编译该文件
&.visitor { background: var(--background); .joe_aside__item-contain { border-style: solid; border: none; padding: 15px; line-height: 1.8; color: var(--routine); .item { display: flex; align-items: center; font-size: 12px; color: var(--routine); line-height: 26px; white-space: nowrap; span { color: var(--routine); margin-right: 5px; &:nth-child(2) { font-size: 14px !important; color: var(--theme); } } } } }