添加访客信息欢迎卡片
1、开篇废话
第一次写这种记录文章 没什么经验 其实还是自己看的啦 也没什么关系!👻
这次是使用的腾讯的接口获取的IP地址,之前在使用的是搜狐的地址,不过发现搜狐的地址并不是很准确,首先他仅仅可以精确到市级地址,其次就是部分城市返回的json数据仅仅是china,这效果看上去就很像是设置的固定输出语句啦,当天就申请了腾讯的api,但是当时想省事紧紧想把原来嫖的搜狐代码改一下就用啦,结果当然不尽人意了,就一直搁置了,后来见到忘记了是哪位大佬的代码了,身为cv工程师我就,嘿嘿,都懂的,做了一些适当的调整之后就OK啦!
废话说完,那就开始吧👻
哦 忘记啦 先展示一下效果 这里图片不清楚可以直接去我首页查看!
2、注册腾讯位置服务
2.1 注册腾讯位置服务
注册腾讯位置服务注册就算便啦!
2.2 创建应用
到应用管理-我的应用界面点击+创建应用
,然后名称类型随便填
这里的白名单
填不填都行的,省事就不填。
2.3 获取key值
完事之后就可以获取自己的key
了,这个保存好,一会要用!
3、创建js
在目录Blogroot(博客所在根目录)\source\js下创建nkt_txmap.js
,插入以下代码。
天地浩瀚无尽头,等待回复如此久,望眼欲穿心如悬,期待佳音回复至。
4、创建css
这里我是放在了公告栏里,如果不放公告栏可以不加这个css👻
在目录Blogroot(博客所在根目录)\source\css下创建nkt_txmap.css,插入以下代码。
当然也阔以自己写啦!
.card-announcement {
background: linear-gradient(to top left, #ffc4f7 0%, #94f3d5 100%) !important;
color:white;
line-height:30px;
font-size:16px;
}
/* 公告栏突出颜色 */
:root {
--naokuoteng-color: #fffc56;
}
.card-announcement .item-headline span{
margin-left:0!important;
}
.card-announcement span{
font-weight:bold;
font-size:20px!important;
color:var(--naokuoteng-color);
}
5、引入js、css和jq
在_config.butterfly.yml里引入刚刚创建的js、css和JQ
5.1 js和jq在inject的bottom下引入
#访客信息
- <script src="/js/jquery-3.6.1.min.js"></script>
- <script src="/js/nkt_txmap.js"></script>
5.2 css在inject的head下引入
- <link href="/css/nkt_txmap.css">
5.3 下载jq文件
随便搜索一下就有啦,注意版本号与刚刚引入的一至,如果不一致可更改刚刚引入的jq名字,将其下载到Blogroot(博客所在根目录)\source\js下。
补:
这里补一下我用的jq文件吧
下载jq
6、将语句放在要展示的位置
以公告栏为例 pug文件具有严格缩进,直接删除 + 就好
.../themes/butterfly/layout/includes/widget/card_announcement.pug
if theme.aside.card_announcement.enable
.card-widget.card-announcement
.item-headline
i.fas.fa-bullhorn.fa-shake
span= _p('aside.card_announcement')
.announcement_content!= theme.aside.card_announcement.content
+ #welcome-info
补:
如果你也用了公告栏小人,把其放在如下位置:
if theme.aside.card_announcement.enable
.card-widget.card-announcement
.item-headline
i.fas.fa-bullhorn.card-announcement-animation
span= _p('aside.card_announcement')
.announcement_content!= theme.aside.card_announcement.content
+ #welcome-info
.xpand(style='height:200px;')
canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')
…
如此,功至大成!!!👻


这是一个测试
OωO
{!{data:image/webp;base64,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}!}
{!{data:image/webp;base64,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}!}
{!{data:image/webp;base64,UklGRmQFAABXRUJQVlA4WAoAAAAQAAAADQEAKwEAQUxQSHEDAAABoEXbtmk7WrFt27Zt27btsm3brti2bdvGs+fHnofJOdnFExETIIH/A/8H/v+f6c9phsD/gf8D//+XZpXvhuiEp+KBnRohBgB66gOo3bRBNdJLG4SSarpgAtTLoglrQA3Jpwsuk06iCb+C+oNownFQI0UTtgdtpQkq3SKjRQ9m3Qn1ddGEf0L9TTThBqjb0mqCVVCvlhE9+A5oa/HQInM/GuhbngIdKR7a5A6A7eUehrpvzQtPiA05POMRNhp0sXhpf6gh7dy3CMbn0j+qeoO+IZ7ahwBjXNbwFMyG1HRRswH9Jr302dEbh16pm9qxVvHkQ/HYWQyvuyn9TlgMbeGSWu9FwGz0kdm5Hal1C+pX4rmDwgiOp3RNpyhYTnjdBZVfPQLrUU86UOoE1J/Eg3OtItieyyXPgYf9XCpd8aejFKCbQyU+2wSbf7Et53aoc8STU/xMsLOUG4osAv+1tKjlDhN0c6LAWjh4o4Y9eY9CXZLcm0S+Jjhd27lu90Ejh4hh5sMEr9k34RZMRl1f88kLE/u9+vlWA2CeHdXuQV2bQTx7PcG91k4tBt9QWEwm3UvQzabWa2Fy9sBsYpy2+VqGH6w1vgp1aw7x8CEEeMuRwgvA3xKLfxB0s6PYFzDeMDyPWC1/nGB2WgsdQqDeLCCe3uoawbsOtD4Pen+QWN5P8Iq1aTfAw34sJLZ+QnC8vam+4B3F4yvtIliez67p4Geqi407CaZb6HcdPO7VzGL3XIKEd02MBg1vK56f8yjBjR62ZD0Bvi6N2PoHwRITuV64AMPZNcTBYQQI6ce+Ar3UQPzgSgI8ZUO9U6ARw8XuTQRnW5Mmv4fC8EBfcbZ9OAE+ryJSfy3okcriD4cyfJ3MynDwTVXE/kMEOD979667MI5/Ka04XSOGAVeugm8rKn6x4UWCHRXMLQd/Txx9jlk82EbcON/AeEcO8Y95rhHEfZ3DqOFh8CfF4TetfdtQXFr7irl9qcVXPkcAfDu2WApJ3WwL+Kls4njDveZ+qCgu/jbC6MQQ8ZstDNTQOBj+KK588T67cmhRQXF3icVsfgbxn6XPmzD5vri1Zb+v/nyiuDyUDRsO7pNWfGn6HZbW15XH+0af3TMT+bQ8/icZdOJ6GICw3yenE12YrUYWCfwf+D/wf+D/wP+B/wP/B/4P/B+sFwBWUDggzAEAABAhAJ0BKg4BLAE/cbjVZLSuKqchsthqkC4JZ27hdKEPUqoRW3w5/99e/QD+AfgB9fvf4E42sEZdPG5WCMunjcrBGXTxuVgjLp43KwRl08blYIy6eNysEZdPG5WCMunjcrBGXTxuVgbwV+XgN4Mk5VT/YxG+6yHNO0zgTlJWBPAptGdPychGZSn4Iznebgu2kIY0RtqHqmj6iKd31Z9PAi4GhlVTAKkUeQv+KuTr2I92I5up+ojG+utFp4Lj6h/ugIy6ePIC3KwRl04uYaYv0xG8cdA2xfph/KsyByEDbF+mH800IHIQNsX6Yf/OQgbYv0w/lSN446BtrOL9MP/nIQNsbZfr8mI3jjoG2s4wMPTEAAD+/mQQAAAAAATN18D50sZhbS+3ALn9gu3crt3vx8zqWrVTmE74KU/afxGL5t3GFGI3RrjwpZK0TMjiAOf6jIiNlLn4pyrwEOUY/r5wZ2AzShKZsiax1sAYuxfvtjpLr2fh0tMRlFVZo7Xx25lpWLRZ+rX6HnoEbLxdJHrTLXIGwsjTZTMhamUmEsqTmR/8nyj6TXRcWj/wBtkZj9zkSPkrUsV+pAAY2oUAAHNUmkIcFlg3sIAAGgCAAAA=}!}