Hexo添加当前访客信息

发表于 更新于 分类于 阅读次数：
本文字数： 1.6k 阅读时长 ≈ 1 分钟
本文将介绍如何在主页侧边栏增加当前访客信息

前言

年前有一位小伙伴给我提供了一个API（在此表示感谢），希望实现当前访客功能，具体效果如下：

注：本篇修改基于 Butterfly 4.2.2

操作

  1. 在\themes\butterfly\layout\includes\widget目录下新建card_visitor.pug文件，并写入如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    if theme.aside.card_visitor.enable
      .card-widget.card-visitor
        .card-content
          .item-headline
            i.fas.fa-user
            span 当前访客
          #visitor-container
            .visitor

  2. 在\themes\butterfly\layout\includes\widget\index.pug文件中page项添加如下代码：

    1
    !=partial('includes/widget/card_visitor', {}, {cache: true})

  3. 在\themes\butterfly\source\js目录下新建visitor.js文件，并写入如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    fetch('https://api.gmit.vip/Api/UserInfo').then(data=>data.json()).then(data=>{
        let html = '<style>.visitor_location{color:#cb4c46;font-weight:bold;}.visitor_ip{color:#2d80c2;font-weight:bold;}</style>'
        html += '<div class="visitor">'
        html += '欢迎来自 ' + '<span class="visitor_location">' + data.data.location + '</span>' + ' 的小伙伴！'
        html += '</br>'
        html += '访问IP：' + '<span class="visitor_ip">' + data.data.ip + '</span>'
        html += '</div>'
        document.getElementById('visitor-container').innerHTML = html
    }).catch(function(error) {
        console.log(error);
    });

    并在主题配置文件_config.butterfly.yml的bottom处引入该文件：

    1
    2
    3
    inject:
      bottom:
        - <script src="/js/visitor.js"></script>

  4. 在主题配置文件_config.butterfly.yml的aside处添加如下配置：

    1
    2
    3
    4
    aside:
        card_visitor:
        enable: true
        sort_order: # Don't modify the setting unless you know how it works

    可以在配置文件中选择开启或关闭

  5. 重新部署，即可看到效果。

后记

用到的API：https://api.gmit.vip/Api/UserInfo

故梦API：https://api.gmit.vip/

相关文章