【Flarum】IP显示问题-Abyss-博客

前言

好久没更新了，水一篇文章先，最近在折腾Flarum，有一些关于显示IP的心得分享一下

页脚显示IP

实际显示效果如上图

国旗+IP | 加载时长

我的解决方案是这样的

首先在网站目录的public文件夹下（public文件夹是flarum的运行目录）新建一个ip.php，里面的代码如下：

<?php
$ip = $_SERVER['HTTP_CF_CONNECTING_IP'];
$fh = file_get_contents('https://api.ipdata.co/'.$ip.'?api-key=YOUR-APIKEY'); 
$fh = json_decode($fh, true);
echo 'var returnCitySN = {"cip": "'.$ip.'", "cid": "00", "cname": "'.$fh['emoji_flag'].$fh['country_name'].'"};';
?>

里面需要注意的地方有：

由于我的Flarum网站使用了CF的CDN，所以为了获取真实的IP需要使用HTTP_CF_CONNECTING_IP标头，如果使用的是其它的CDN，请使用相对应的标头（我不知道不要问我），没有使用CDN可以直接使用REMOTE_ADDR
请先去https://ipdata.co/注册一个账号，将YOUR-APIKEY替换为你的APIKEY（注意，该API免费版一天支持1500次调用）

进入Flarum后台-外观-编辑自定义页脚，插入如下的代码：

<!doctype html>
<!-- 外链跳转 -->
<script>
    document.addEventListener('click', event => {
        let t = event.target;
        if (t.matches('.Post-body a')) {
            let url = new URL(t.href);
            if (url.origin == document.location.origin) {
                t.removeAttribute('target');
                t.removeAttribute('rel');
            }else{
                t.setAttribute('target', '_blank');
            }
        }
    }, false);
</script>

<script>
    window.onload = function () {
        $('.Afrux-NewsWidget-line').each((i, item) => {
            let match = item.innerHTML.match('[a-zA-z]+://[^\s]*');
            if (math) {
                $(item).html(`<a href="${match.input.substring(match.index)}" style="display:flex;align-items:center;">${match.input.substring(0, match.index).trim()} <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>`)
            }
        })
    }
</script>

<!-- 页脚 -->
<footer>
    <div class="site-footer">
        <div style="color: rgb(137, 137, 140);font-size:0.9em;" class="footer-container rm-link-color">
            <p>
                <!-- 加载时间 -->
                <script>
                    var start_time = new Date();
                    var end_time = "";
                    var loadt = setInterval(function () {
                        if (document.readyState == "complete") {
                            showLoadTime();
                        }
                    }, 500)

                    function showLoadTime() {
                        end_time = new Date();
                        loadtime_span.innerHTML = "加载时长 " + (end_time.getTime() - start_time.getTime()) + " ms";
                        clearInterval(loadt);
                    }
                </script>
                <!-- IP -->
	        <span id="ip_span" align=center></span>
                <script src="你的网站ip.php的网址"></script>
                <script type="text/javascript">
                    ip_span.innerHTML = returnCitySN["cname"] + " " + returnCitySN["cip"];
                </script>

                <span class="mx-2">|</span>

                <span id="loadtime_span">加载时长：</span>


            </p>
        </div>
    </div>
</footer>

该页脚代码修改自https://github.com/FFans/FlarumCN-Site-Backup/

记得把src中的网址替换为你的网站的ip.php的网址

编辑自定义样式

/* 页脚 */
.site-footer {
	margin:0;
	/*margin-top:64px;*/
	padding-top:30px;
	padding-bottom:30px;
	color:hsla(0,0%,100%,.9);
	box-sizing:inherit;
	text-align:center;
	font-size:1em
}
@media (max-width:991px){
    .site-footer {
	padding-top:0px;
    }
}
.site-footer p {
	margin:0
}
.rm-link-color > p > a {
	text-decoration:none;
	color:#89898c
}
.rm-link-color > p > a:hover {
	text-decoration:underline
}