之前看到同行博客底部友情链接都加了ico小图标,感觉很新颖,很好看。于是乎我也开始折腾,我不想每次添加友情链接的时候都得手动的去添加ico图标的小链接,浪费时间,然后就百度了以下,还真有教程,然后我就搬过来了自动添加img标签代码如下:
直接放在网站代码里:
<script type="text/javascript"> $("#link-home li a,#linkcat-1 li a").each(function(e){ $(this).prepend("<img src=https://f.ydr.me/"+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">"); });</script>
或者把代码中放入公用js文档中调用:
jQuery(document).ready(function($){ $("#link-home li a,#linkcat-1 li a").each(function(e){ $(this).prepend("<img src=https://f.ydr.me/"+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">"); });});
哪种方式都都可以,看自己的习惯吧。
其中:“#link-home li a”是友情链接的ID(也可以换成class名,具体需要查看你网站的写法)
给友情链接自动添加<img>标签已经完成了
以上是采用第三方网站“https://f.ydr.me/”获取ico下图标的,直接放在网页里面就行了。
如果你不喜欢用第三方图标那么就自己折腾吧,附上PHP源代码
此API为远程实时获取并显示网站的Favicon.ico文件,美化网站外链显示效果。
什么是Favicon?
Favicon就是出现在浏览器地址栏左侧的那个小图标,也叫做网站头像。
为什么要获取网站的favicon? 我们给一个网站加上超链接时,如果在超链接的旁边再附带上这个网站的favicon图标,能够带来非常好的显示效果。
如何获取favicon? 一般网站的favicon都存储在网站的根目录,并且命名为“favicon.ico”,所以我们可以先尝试直接获取这个文件, 如果获取失败,再尝试解析网站中的meta标签,从中读取favicon图标的url。 如果读取成功,就把相应的图标缓存在服务器,方便下次调用。
此代码采用了缓存机制,即不用每次都从各个友情链接网站的代码里面去抓取,挺方便的,下载源代码,放在网站目录里,然后用你的网址替换上面的“https://f.ydr.me/”为“你的网址/目录/?url=”
例如:我把下载的源代码上传到了网站的根目录,那么就将"https://f.ydr.me/"替换成"http://xxx.talklee.com/get.php?url=" 就可以了,当然,不想折腾和浪费服务器的资源最好用第三方网站,速度快而节省服务器的资源。
接下来就是你的表演时间~~~