侧边栏壁纸
博主头像
小莫唐尼博主等级

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 20 篇文章
  • 累计创建 35 个标签
  • 累计收到 106 条评论

目 录CONTENT

文章目录

Joe美化(9):给博客添加一个访客IP签名档

小莫唐尼
2022-09-08 / 11 评论 / 11 点赞 / 314 阅读 / 1,174 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

博客有了,但是总感觉还缺点什么,想了想,好像忘记访客了,那就给博客添加一个访客IP签名档。

功能描述

访客IP签名档

  • 支持:PC显示访客IP和归属地信息;
  • 支持:PC显示访客系统和浏览器信息;
  • 支持:如果您的博客没有禁用右键或者自定义鼠标右键功能,那么鼠标右键签名档的时候可以直接将其保存到本地;
  • 不支持:暂不支持移动端;

上图预览:
image

image

代码使用

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

第一步:下载文件

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

第二步:引入css样式文件

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

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

image

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

image-1660530454036

第3种:

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

image

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

如图:

image

第四步:初始化插件

找到,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
     },
}) 

位置如图所示:
image

参数说明:
参数名 参数类型 是否必填 默认值 说明
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签名档效果~

11

评论区