Typecho Joe主题 添加访客信息侧栏

Typecho 添加访客信息侧栏

作者博客迁移到 Halo ，并使用从Joe 迁移过来的 halo-theme-joe2.0

1. 效果图如下

   

2. 在 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;
   }
   

3. 在 functions.php 文件中函数，添加侧边栏访客信息开关

   $JAside_Visitor_Info = new Typecho_Widget_Helper_Form_Element_Select(
       'JAside_Visitor_Info',
       array(
           'off' => '关闭（默认）',
           'on' => '开启'
       ),
       'off',
       '是否开启访客信息模块 - PC',
       '介绍：用于控制是否显示访客信息模块 '
   );
   

   效果图如下

   

4. 在 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; ?>
   

5. 加入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);
           }
         }
       }
     }
   }