[Halo] Joe美化 - 给博客添加一个访客IP签名档
编辑
938
2022-09-08
博客有了,但是总感觉还缺点什么,想了想,好像忘记访客了,那就给博客添加一个访客IP签名档。
功能描述
访客IP签名档
- 支持:PC显示访客IP和归属地信息;
- 支持:PC显示访客系统和浏览器信息;
- 支持:如果您的博客没有禁用右键或者自定义鼠标右键功能,那么鼠标右键签名档的时候可以直接将其保存到本地;
- 不支持:暂不支持移动端;
上图预览:
代码使用
老粉都知道,简单的三步走!!!
老粉都知道,简单的三步走!!!
老粉都知道,简单的三步走!!!
第一步:下载文件
包含两个文件:
样式文件:evan-id-card.min.css
脚本文件:evan-id-card.min.js
第二步:引入css样式文件
引用css的方式有三种,分别如下:
第1种:主题设置-自定义-外部css链接
中填写 evan-id-card.min.css
的文件地址,如图:
第2种:主题设置-自定义-自定义css
中拷贝 evan-id-card.min.css
的文件内容粘贴到此处,如图:
第3种:
joe主题编辑,在 template/common/header.ftl
文件中,加入evan-id-card.min.css
css文件链接地址(注意,这个链接地址是你自己的地址,请不要直接使用我的地址),如图:
第三步:引入js文件
在joe主题设置中,找到自定义,在 外部JS链接(head)
配置中加入evan-id-card.min.js
js文件链接。
代码如下:
<!-- 如果博客不是https(ssl),此行代码可不需要引入 -->
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<!-- 核心代码,不可缺少 -->
<script src="https://cos.925i.cn/blog-plugins/id-card/evan-id-card.min.js"></script>
如图:
第四步:初始化插件
找到,joe 主题设置-> 自定义-> 自定义JS(body)
,添加以下代码(具体参数请参考下方说明):
// 游客身份卡
new EvanIdCard({
nickname: '小莫', // 博主昵称
logo: "https://b.925i.cn/logo", // 博主头像(最好是圆形)
title: "小莫唐尼", // 网站名称
desc: '一个爱凑热闹、喜欢捣鼓前端的博主。',
link: 'https://b.925i.cn',
bgColor: "#FF6F91", // 背景颜色 如:#209FEC
interval:0, // 访问者下次访问时候,自动弹出间隔时间(单位小时,0=每次弹出)
position: "c", // 位置 lt=左上 l=左中 lb=左下 t=上中 c=居中 b=下中 rt=右上 r=右中 rb=右下
zIndex:101, // 卡片层级
image: "https://blog-oss.925i.cn/blog-files/c30f0e9dbb26ef521852c11783e72795.jpg", // 右侧图片,请将图片下载并上传至您自己的服务器,或者您自己找别的图片也可以
imageConfig: {
width: 200,
height: 310,
left: 300,
bottom: 22
},
})
位置如图所示:
参数说明:
参数名 | 参数类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
nickname | String | 是 | " " | 博主的昵称 |
logo | String | 是 | “” | 博主头像(最好是圆形) |
title | String | 是 | “” | 博客的标题(尽量不要太长) |
desc | String | 是 | “” | 博客的简介(尽量不要太长) |
link | String | 是 | “” | 博客的URL地址 |
bgColor | String | 是 | “#FF6F91” | 签名档的背景颜色 |
interval | Number | 是 | 0 | 签名档的自动弹出的时间间隔(单位小时),0=访客每次访问都弹出 |
position | String | 是 | “c” | 签名档的显示位置,位置 lt =左上 l =左中 lb =左下 t =上中 c =居中 b =下中 rt =右上 r =右中 rb =右下 |
zIndex | Number | 是 | 101 | 签名档的层级,防止别的元素遮挡,数值越大层级越高 |
image | String | 是 | “” | 签名档右侧形象图片地址(最好透明) |
imageConfig | Object | 是 | “” | 签名档右侧形象设置(看下方说明) |
imageConfig 参数说明:
参数名 | 参数类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
width | Number | 是 | 200 | 形象的宽度 |
height | Number | 是 | 310 | 形象的高度 |
left | Number | 是 | 300 | 形象距离左边的位置(数值越大越往右) |
bottom | Number | 是 | 22 | 形象距离底部的位置(数值越大越往下) |
😘😘😘 大功告成,快去试试吧,给你的博客也加访客的IP签名档效果~
- 15
- 6
-
赞助
微信支付微信赞赏QQ赞赏支付宝赞赏 -
分享