当前位置：网站首页 > 博客教程 > Typecho教程 > 正文

Typecho 友情链接获取Favicon图标

作者：xlnxin发布时间：2021-04-15分类：Typecho教程浏览：677

导读：对于Favicon大家都不陌生，它就是网址前的那个小图标，演示可看浏览器地址栏网址前的小图标。刚才在我的Typecho博客的每个友情链接前面都显示各自的Favicon...

对于 Favicon 大家都不陌生，它就是网址前的那个小图标，演示可看浏览器地址栏网址前的小图标。刚才在我的Typecho博客的每个友情链接前面都显示各自的Favicon图标，该方法我是在木木木木木博客上找到的，其是给WordPress博客写的JS，但JS是通用的，所以也可以用在Typecho上面。

获取Favicon图标实现原理：

获得每个友情链接的地址，提取出域名部分，提交给 Google，Google 返回的就是一个16×16的 PNG 图片，对于没有被 Google 缓存 Favicon 的网站，会得到一个小地球的蓝色图标。

Typecho 友情链接获取Favico图标的方法：

先检查自己的Typecho博客主题是否有加载jQuery库，通常是在header.php文件的<head></head>之间，如果没有就把下面代码添加到<head></head>之间
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

加载jQuery库后，再在</head>之前添加下面的JS代码，下面的代码便是获取Favicon图标的代码

<script type="text/javascript">
///友情链接图标favicon
jQuery(document).ready(function($){ 
$(".blogroll a").each(function(e){
	$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=float:left;padding:5px;>");
}); 
});
</script>

具体含义就是：命令jQuery游历所有class=“blogroll”（修改为自己的class）下的a标签，然后在相对应a标签内添加img，src是GG服务器加对应a标签内的href主网址，并添加样式左浮动（即显示在左边）填充5px。

保存文件，刷新友情链接的页面，是显示了友情链接网站的Favicon图标吧！！

演示地址：http://www.xiy.in（右下角）

提示：在WordPress上实现的方法和上面一样，按同样步骤操作就可以了。

标签：wordpress typecho 域名服务器主题博客

上一篇：Typecho博客搬家换空间方法教程
下一篇：Typecho 博客的个人设置

Typecho 友情链接获取Favicon图标

相关推荐