前言

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

操作

注意:必须确保使用了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