[Halo] Joe美化 - 给博客添加一个访客IP签名档

博客有了，但是总感觉还缺点什么，想了想，好像忘记访客了，那就给博客添加一个访客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签名档效果~