前言

本文将介绍如何在主页侧边栏添加当前访客信息，具体效果如下：

操作

注意：必须确保使用了Hexo tag 外挂标签的span的样式（👈点击跳转），否则显示的内容没有彩色样式。

  1. 在 themes\Butterfly\layout\includes\widget\ 下创建 card_ip.pug 文件，并写入以下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .card-widget.card-ip
      .card-content
      .item-headline
        i.fa.fa-user(aria-hidden="true")
        span= _p('aside.card_ip')
      .ip_content
       = _p('欢迎来自 ')
       span(class="p red")= _p('未知区域')
       = _p(' 的小伙伴')
       b
       = _p('访问IP为： ')
       span(class="p cyan")= _p('未知IP')
       b
       = _p('浏览器版本：')
       span(class="p blue")= _p('未知浏览器')

  2. 在 themes\Butterfly\layout\includes\widget\index.pug中添加如下内容：
    如果主题版本小于3.6，添加如下内容

    1
    2
    if theme.aside.card_ip
        !=partial('includes/widget/card_ip', {}, {cache: theme.fragment_cache})

    如果主题版本大于3.6，添加如下内容

    1
    2
    if theme.aside.card_ip
        !=partial('includes/widget/card_ip', {}, { cache:true })

    具体添加位置如下图所示：

  3. 编辑 themes\Butterfly\languages\zh-CN.yml 文件，在 aside 处添加card_ip: 当前访问用户代码（如下）：

    1
    2
    aside:
      card_ip: 当前访问用户

  4. 配置主题文件_config.butterfly.yml，在aside 处添加card_ip: true代码（如下）：

    1
    2
    aside:
      card_ip: true

  5. 在 themes\Butterfly\source\js 下创建 ip_content.js，并添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    //获取当前IP地址和浏览器标识
    function getBrowserInfo() {
        var agent = navigator.userAgent.toLowerCase();

        var regStr_ie = /msie [\d.]+;/gi;
        var regStr_ff = /firefox\/[\d.]+/gi
        var regStr_chrome = /chrome\/[\d.]+/gi;
        var regStr_saf = /safari\/[\d.]+/gi;

        //IE
        if (agent.indexOf("msie") > 0) {
            return agent.match(regStr_ie);
        }

        //firefox
        if (agent.indexOf("firefox") > 0) {
            return agent.match(regStr_ff);
        }

        //Chrome
        if (agent.indexOf("chrome") > 0) {
            return agent.match(regStr_chrome);
        }

        //Safari
        if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
            return agent.match(regStr_saf);
        }
    }

    var ip_content = document.querySelector(".ip_content");

    if (ip_content != null && typeof (returnCitySN) != undefined) {
        ip_content.innerHTML = '欢迎来自 <span class="p red">' + returnCitySN["cname"] + "</span> 的小伙伴<br>" + "访问IP为： <span class='p cyan'>" + returnCitySN["cip"] + "</span><br>浏览器版本：<span class='p blue'>" + getBrowserInfo() + '</span>';
    }

  6. 配置主题文件_config.butterfly.yml，在inject的bottom处引入以下内容：

    1
    2
    3
    bottom:
      - <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
      - <script src="/js/ip_content.js"></script>

  7. 至此完成配置，重新部署博客看看效果吧。

后记

ip位置通过访问：https://pv.sohu.com/cityjson?ie=utf-8 获得。

参考链接：https://zykj.js.org/posts/e55bad60/
参考链接：https://cloud.tencent.com/developer/article/1945527