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

很多博客都有的功能，当进入网站时会弹出一个对话框显示访客的一些信息，想了想，今天就分享一下如何给JOE主题博客添加一个访客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: '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
     },
})

位置如图所示：

参数说明

imageConfig 参数说明：

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