Joe主题美化:给博客添加一个访客IP签名档

Jaysun

很多博客都有的功能,当进入网站时会弹出一个对话框显示访客的一些信息,想了想,今天就分享一下如何给Joe主题博客添加一个访客IP签名档。

功能描述

访客IP签名档

  • 支持:PC显示访客IP和归属地信息;

  • 支持:PC显示访客系统和浏览器信息;

  • 支持:如果您的博客没有禁用右键或者自定义鼠标右键功能,那么鼠标右键签名档的时候可以直接将其保存到本地;

  • 不支持:暂不支持移动端;

上图预览:

Joe主题美化:给博客添加一个访客IP签名档

Joe主题美化:给博客添加一个访客IP签名档

代码使用

老粉都知道,简单的三步走!!!
老粉都知道,简单的三步走!!!
老粉都知道,简单的三步走!!!

第一步:下载文件

包含两个文件:
样式文件:evan-id-card.min.CSS
脚本文件:evan-id-card.min.js

隐藏内容
评论可见
前往评论


第二步:引入css样式文件

引用css的方式有三种,分别如下:

第1种:主题设置-自定义-外部css链接 中填写 evan-id-card.min.css的文件地址,如图:

0b34871b9b56f18e836ff5c7e1cadd64.webp.jpg

第2种:主题设置-自定义-自定义css 中拷贝 evan-id-card.min.css的文件内容粘贴到此处,如图:

image-1660530454036.png


第3种:

joe主题编辑,在 template/common/header.ftl文件中,加入evan-id-card.min.css css文件链接地址(注意,这个链接地址是你自己的地址,请不要直接使用我的地址),如图:

c55ea2e9d649c70da0b11f42a13981b0.webp.jpg


第三步:引入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>

如图:

1.png


第四步:初始化插件

找到,joe 主题设置-> 自定义-> 自定义JS(body),添加以下代码(具体参数请参考下方说明):

  // 游客身份卡
new EvanIdCard({
     nickname: 'jaysun', // 博主昵称
     logo: "https://b.925i.cn/logo", // 博主头像(最好是圆形)
     title: "忆路吧博客", // 网站名称
     desc: '一个爱凑热闹、喜欢捣鼓前端的博主。',
     link: 'https://yiluxb.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
     },
})

位置如图所示:

2.png

参数说明

参数名参数类型是否必填默认值说明
nicknameString" "博主的昵称
logoString“”博主头像(最好是圆形)
titleString“”博客的标题(尽量不要太长)
descString“”博客的简介(尽量不要太长)
linkString“”博客的URL地址
bgColorString“#FF6F91”签名档的背景颜色
intervalNumber0签名档的自动弹出的时间间隔(单位小时),0=访客每次访问都弹出
positionString“c”签名档的显示位置,位置 lt=左上 l=左中 lb=左下 t=上中 c=居中 b=下中 rt=右上 r=右中 rb=右下
zIndexNumber101签名档的层级,防止别的元素遮挡,数值越大层级越高
imageString“”签名档右侧形象图片地址(最好透明)
imageConfigObject“”签名档右侧形象设置(看下方说明)
imageConfig 参数说明:
参数名参数类型是否必填默认值说明
widthNumber200形象的宽度
heightNumber310形象的高度
leftNumber300形象距离左边的位置(数值越大越往右)
bottomNumber22形象距离底部的位置(数值越大越往下)

??? 大功告成,快去试试吧,给你的博客也加访客的IP签名档效果~



您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 8 条评论,788人围观)
网友昵称:2858201296
2858201296 V 铂金VIP WeChat 8.0.45.2521 Android 13 8楼
01-29 来自广东 回复
文章不错,写的很好!感谢大佬分享!感谢大佬分享!
网友昵称:江鹤he
江鹤he V 普通用户 Google Chrome 120.0.0.0 Windows 10 x64 7楼
01-26 来自湖北 回复
我试试
网友昵称:Ronronner
Ronronner V 普通用户 Google Chrome 110.0.0.0 Android 11 6楼
2023-11-05 来自河北 回复
加油
网友昵称:Southerly
Southerly V 普通用户 Google Chrome 115.0.0.0 Windows 10 x64 地板
2023-08-20 来自陕西 回复
文章不错,写的很好!
网友昵称:ll123456
ll123456 V 普通用户 Google Chrome 114.0.0.0 Windows 10 x64 凉席
2023-07-10 来自上海 回复
好棒
网友昵称:langxing
langxing V 普通用户 Google Chrome 103.0.0.0 Windows 10 x64 板凳
2023-06-25 来自黑龙江 回复
这个是真棒
网友昵称:zhousiyi261925
zhousiyi261925 V 普通用户 IBrowse r Huawei Browser 椅子
2023-05-20 来自四川 回复
网友昵称:teishuaile
teishuaile V 普通用户 Google Chrome 108.0.5359.95 Windows 10 x64 沙发
2023-05-19 来自山东 回复
我试试

目录[+]

取消
微信二维码
微信二维码
支付宝二维码