hexo博客+butterfly主题之自定义侧边栏添加访客定位欢迎信息

正在加载···

AI摘要

HunYuan-Lite

添加自定义侧边栏

参考 自定义侧边栏，在 hexo 博客根目录的 source/_data（若没有先创建）文件夹中创建一个 widget.yml 文件，内容如下：

bottom:
  - class_name: card-welcome
    id_name:
    name: 当前访客
    icon: fas fa-user
    order: 0
    html: '<div id="welcome-info"></div>'

或

top:
  - class_name: card-welcome
    id_name:
    name: 当前访客
    icon: fas fa-user
    html: '<div id="welcome-info"></div>'

参数解释：
top - 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示）
bottom - 创建的 widget 会出现在 sticky 区域（除了文章页都会显示）
class_name - 所创建的 widget 父类 class 名（可选）
id_name - 所创建的 widget 父类 id 名（可选）
name - 所创建的 widget 标题
icon - 所创建的 widget 图标
order - 所创建的 widget 排序（可选）（博客资料和公告位置固定，其它的能排序，需要设置主题配置文件_config.yml中的对应侧边栏的 sort_order 值）
html - 所创建的 widget 相关代码

申请奶思猫 API KEY

1. 注册 奶思猫 账号
2. 点击左侧 用户控制台 中的 秘钥管理 申请API KEY密钥

奶思猫 API 提供免费的全球IPv4/IPv6信息查询
接口地址：https://api.nsmao.net/api/ipip/query
返回格式：application/json
请求方式：HTTPGET
请求示例：https://api.nsmao.net/api/ipip/query?key=你的key
返回示例：

{  
    "code": 200,  
    "msg": "Success",  
    "data": {  
        "ip": "1.28.32.163",  
        "country": "中国",  
        "province": "内蒙古",  
        "city": "呼和浩特",  
        "isp": "联通",  
        "lat": "40.842585",  
        "lng": "111.749181"  
    },  
    "exec_time": 0.022458,  
    "ip": "10.28.20.160"  
}

添加 .js 文件

在 Butterfly 主题根目录下的 source/js/（若没有先创建）文件夹中创建一个 welcome.js 文件，内容如下：

// 进行 fetch 请求
fetch('https://api.nsmao.net/api/ipip/query?key=你的key') //改为你自己的Key，申请地址：https://api.nsmao.net
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        ipLocation = data;
        if (isTargetClassExist()) {
            showWelcome();
        }
    })
    .catch(error => console.error('Error:', error));

function getDistance(e1, n1, e2, n2) {
    const R = 6371;
    const { sin, cos, asin, PI, hypot } = Math;
    let getPoint = (e, n) => {
        e *= PI / 180;
        n *= PI / 180;
        return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) };
    };

    let a = getPoint(e1, n1);
    let b = getPoint(e2, n2);
    let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z);
    let r = asin(c / 2) * 2 * R;
    return Math.round(r);
}

function showWelcome() {
    if (!ipLocation || !ipLocation.data) {
        console.error('ipLocation data is not available.');
        return;
    }

    let dist = getDistance(121.413921, 31.089290, ipLocation.data.lng, ipLocation.data.lat); //改为你自己的经度（121.413921）纬度（31.089290）
    let pos = ipLocation.data.country;
    let ip = ipLocation.ip;
    let posdesc;

    // 新增ipv6显示为指定内容
    if (ip.includes(":")) {
        ip = "<br>好复杂，咱看不懂~(ipv6)";
    }
    
    // 以下的代码需要根据新API返回的结果进行相应的调整
    switch (ipLocation.data.country) {
        case "日本":
            posdesc = "よろしく，一起去看樱花吗";
            break;
        case "美国":
            posdesc = "Let us live in peace!";
            break;
        case "英国":
            posdesc = "想同你一起夜乘伦敦眼";
            break;
        case "俄罗斯":
            posdesc = "干了这瓶伏特加！";
            break;
        case "法国":
            posdesc = "C'est La Vie";
            break;
        case "德国":
            posdesc = "Die Zeit verging im Fluge.";
            break;
        case "澳大利亚":
            posdesc = "一起去大堡礁吧！";
            break;
        case "加拿大":
            posdesc = "拾起一片枫叶赠予你";
            break;
        case "中国":
            pos = ipLocation.data.province + " " + ipLocation.data.city;
            switch (ipLocation.data.province) {
                case "北京":
                    posdesc = "北——京——欢迎你~~~";
                    break;
                case "天津":
                    posdesc = "讲段相声吧";
                    break;
                case "河北":
                    posdesc = "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山";
                    break;
                case "山西":
                    posdesc = "展开坐具长三尺，已占山河五百余";
                    break;
                case "内蒙古":
                    posdesc = "天苍苍，野茫茫，风吹草低见牛羊";
                    break;
                case "辽宁":
                    posdesc = "我想吃烤鸡架！";
                    break;
                case "吉林":
                    posdesc = "状元阁就是东北烧烤之王";
                    break;
                case "黑龙江":
                    posdesc = "很喜欢哈尔滨大剧院";
                    break;
                case "上海":
                    posdesc = "众所周知，中国只有两个城市";
                    break;
                case "江苏":
                    switch (ipLocation.data.city) {
                        case "南京":
                            posdesc = "这是我挺想去的城市啦";
                            break;
                        case "苏州":
                            posdesc = "上有天堂，下有苏杭";
                            break;
                        default:
                            posdesc = "散装是必须要散装的";
                            break;
                    }
                    break;
                case "浙江":
                    switch (ipLocation.data.city) {
                        case "杭州":
                            posdesc = "东风渐绿西湖柳，雁已还人未南归";
                            break;
                        default:
                            posdesc = "望海楼明照曙霞,护江堤白蹋晴沙";
                            break;
                    }
                    break;
                case "河南":
                    switch (ipLocation.data.city) {
                        case "郑州":
                            posdesc = "豫州之域，天地之中";
                            break;
                        case "信阳":
                            posdesc = "品信阳毛尖，悟人间芳华";
                            break;
                        case "南阳":
                            posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
                            break;
                        case "驻马店":
                            posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
                            break;
                        case "开封":
                            posdesc = "刚正不阿包青天";
                            break;
                        case "洛阳":
                            posdesc = "洛阳牡丹甲天下";
                            break;
                        default:
                            posdesc = "可否带我品尝河南烩面啦？";
                            break;
                    }
                    break;
                case "安徽":
                    posdesc = "蚌埠住了，芜湖起飞";
                    break;
                case "福建":
                    posdesc = "井邑白云间，岩城远带山";
                    break;
                case "江西":
                    posdesc = "落霞与孤鹜齐飞，秋水共长天一色";
                    break;
                case "山东":
                    posdesc = "遥望齐州九点烟，一泓海水杯中泻";
                    break;
                case "湖北":
                    switch (ipLocation.data.city) {
                        case "黄冈":
                            posdesc = "红安将军县！辈出将才！";
                            break;
                        default:
                            posdesc = "来碗热干面~";
                            break;
                    }
                    break;
                case "湖南":
                    posdesc = "74751，长沙斯塔克";
                    break;
                case "广东":
                    switch (ipLocation.data.city) {
                        case "广州":
                            posdesc = "看小蛮腰，喝早茶了嘛~";
                            break;
                        case "深圳":
                            posdesc = "今天你逛商场了嘛~";
                            break;
                        case "阳江":
                            posdesc = "阳春合水！博主家乡~ 欢迎来玩~";
                            break;
                        default:
                            posdesc = "来两斤福建人~";
                            break;
                    }
                    break;
                case "广西":
                    posdesc = "桂林山水甲天下";
                    break;
                case "海南":
                    posdesc = "朝观日出逐白浪，夕看云起收霞光";
                    break;
                case "四川":
                    posdesc = "康康川妹子";
                    break;
                case "贵州":
                    posdesc = "茅台，学生，再塞200";
                    break;
                case "云南":
                    posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天";
                    break;
                case "西藏":
                    posdesc = "躺在茫茫草原上，仰望蓝天";
                    break;
                case "陕西":
                    posdesc = "来份臊子面加馍";
                    break;
                case "甘肃":
                    posdesc = "羌笛何须怨杨柳，春风不度玉门关";
                    break;
                case "青海":
                    posdesc = "牛肉干和老酸奶都好好吃";
                    break;
                case "宁夏":
                    posdesc = "大漠孤烟直，长河落日圆";
                    break;
                case "新疆":
                    posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风";
                    break;
                case "台湾":
                    posdesc = "我在这头，大陆在那头";
                    break;
                case "香港":
                    posdesc = "维港晚风温柔，一起去太平山顶看夜景吧";
                    break;
                case "澳门":
                    posdesc = "大三巴的光影，藏着澳门的温柔～";
                    break;
                default:
                    posdesc = "带我去你的城市逛逛吧！";
                    break;
            }
            break;
        default:
            posdesc = "带我去你的国家逛逛吧";
            break;
    }

    // 根据本地时间切换欢迎语
    let timeChange;
    let date = new Date();
    if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span>🌤️ 早上好，一日之计在于晨</span>";
    else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span>☀️ 中午好，记得午休喔~</span>";
    else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span>🕞 下午好，饮茶先啦！</span>";
    else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span>🚶‍♂️ 即将下班，记得按时吃饭~</span>";
    else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>🌙 晚上好，夜生活嗨起来！</span>";
    else timeChange = "夜深了，早点休息，少熬夜";

    let welcomeInfoElement = document.getElementById("welcome-info");

    if (welcomeInfoElement) {
        welcomeInfoElement.innerHTML =
            `欢迎来自 <b><span style="color: var(--anzhiyu-main)">${pos}</span></b> 的朋友💖<br>当前位置距博主约 <b><span style="color: var(--anzhiyu-main)">${dist.toFixed(2)}</span></b> 公里！<br>${timeChange}<br>Tip：<b><span style="font-size: 15px;">${posdesc}</span></b>`;
    } else {
        console.log("Pjax无法获取元素");
    }
}

// Pjax完成页面切换的事件回调处理
function handlePjaxComplete() {
    if (isTargetClassExist()) {
        showWelcome();
    }
}


function isTargetClassExist() {
    const targetClassName = 'card-welcome'; //示例类名，替换为你在 widget.yml 文件中定义的 class_name
    
    //1. 查询所有该类名的元素，返回伪数组
    const classElements = document.getElementsByClassName(targetClassName);
    
    //2. 长度>0说明存在至少一个该类名元素，返回true；否则返回false
    return classElements.length > 0;
}

// 添加pjax:complete事件监听
window.onload = function () {
    if (isTargetClassExist()) {
        showWelcome();
    }
    document.addEventListener("pjax:complete", handlePjaxComplete);
};

• 将 key 改为前面你申请的 key
• 将经纬度改为你自己的经纬度

引入 .js 文件

在 Butterfly 主题配置文件 _config.yml 中的 inject 配置项中的 bottom 引入 welcome.js

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
    - <script src="/js/welcome.js"></script>

预览效果

hexo clean –> hexo g –> hexo s