为什么我要用butterfly作为hexo的主题？而不是程序员搭博客普遍采用的Next？

因为，butterfly是数码宝贝第1部的主题曲啊！

一开始搭建博客的时候有些本末倒置了，过度关心怎么搭的更好，及怎么改造主题，怎么做SEO等等等等。刹那间幡然醒悟，我只是为了搭个博客做记录，要用什么功能，可以边搭边补充。

不过也难免，尝试新东西的时候总会迷路一阵子的。

此篇博客记录我搭建博客时，遇到的或者花了一定时间的问题或者说需求。

butterfly主题添加当前访客信息

阅读并跟着操作：Hexo添加当前访客信息

问题：https://pv.sohu.com/cityjson?ie=utf-8 此链接失效了

借用：获取IP地址及归属地的免费接口 / 截止2024.7.13可用，失效了请找新的

我以：https://myip.ipip.net/json 这个接口为例

其实只改造：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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//获取当前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);
    }
}

// ip_content.js

// 确保代码在页面加载时可以直接执行，但需要确保 ip_content 元素在这段代码执行时已经存在于 DOM 中

async function fetchIPInfo() {
    const url = 'https://myip.ipip.net/json';

    try {
        const response = await fetch(url);
        const data = await response.json();

        if (data.ret === 'ok') {
            const ip = data.data.ip;
            const locationArray = data.data.location;

            // 过滤空值并去掉最后一个值和最后一个逗号
            const filteredLocation = locationArray.filter(Boolean);
            const location = filteredLocation.length > 1 ? filteredLocation.slice(0, -1).join('-') : filteredLocation[0];

            // 打印 IP 和位置信息到控制台
            console.log(`IP: ${ip}`);
            console.log(`位置: ${location}`);

            // 插入到指定的 HTML 元素中
            const ipContentElement = document.querySelector(".ip_content");
            if (ipContentElement) {
                ipContentElement.innerHTML = `欢迎来自 <span class="p">${location}</span> 的小伙伴<br>访问IP为： <span class='p'>${ip}</span><br>浏览器版本：<span class='p'>${navigator.userAgent}</span>`;
            } else {
                console.error('找不到类名为 ip_content 的元素');
            }
        } else {
            console.error('请求失败或返回数据格式错误');
        }
    } catch (error) {
        console.error('发生网络错误:', error);
    }
}

// 调用函数获取 IP 信息
fetchIPInfo();

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

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

以上代码通过ChatGPT就可以生成 😕

询问方式：

1
2
3
4
5
帮我写一段js代码，发起http请求并解析，请求地址是 https://myip.ipip.net/json，请求结果是：
{"ret":"ok","data":{"ip":"112.10.247.224","location":["中国","浙江","杭州","","移动"]}}
要求1:该段代码可以以 <script src="/js/ip_content.js"></script> 的格式插入；
要求2:将请求结果插入到html布局中，布局代码是：
<div class="ip_content">欢迎来自 <span class="p">未知区域</span> 的小伙伴<br>访问IP为： <span class="p">未知IP</span><br>浏览器版本：<span class="p">未知浏览器</span></div>

butterfly的打赏图片和微信、支付宝大小不兼容

改动：themes/butterfly/source/css/_layout/reward.styl 下.post-reward.reward-main.reward-all.reward-item.img 的 width 为120px，height为180px

思路：全局搜索 reward ，扫一眼就觉得该改这里；

有序列表和无序列表为什么不显示标号？

bufferfly主题导致

证明：_config.yml 的 theme 不填，可以显示；

不要butterfly首页的图片

太花哨了，把 _config.butterfly.yml 下的 disable_top_img设置为true