TYPECHO WIKI
每一个作品都值得被记录

Typecho 友情链接获取Favicon图标

Typecho维基君Typecho教程 • 993次浏览 • 发布 2021-08-24 • 更新 2021-08-24

对于 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上实现的方法和上面一样,按同样步骤操作就可以了。

广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,Typecho.Wiki所有文章均包含本声明。
厂商投放

【腾讯云】🎉五一云上盛惠!云服务器99元/月续费同价!

腾讯云五一劳动节海量产品 · 轻松上云!云服务器首年1.8折起,买1年送3个月!超值优惠,性能稳定,让您的云端之旅更加畅享。快来腾讯云选购吧!

广告
添加新评论 »