欢迎访问服务器技术网-www.fuwuqijishu.com

采用JS的方式获取Typecho友情链接Favicon图标

网站建设 fuwuqijishu 2年前 (2022-09-04) 149次浏览 0个评论 扫描二维码

今天我们来讨论一下,在Typecho博客中友情链接Favicon图标的实现原理以及通过JS实现友情链接Favicon图标的办法。获取Favicon图标的实现原理:获得每个友情链接的地址,提取出域名部分,提交给 Google,Google 返回的就是一个16×16的 PNG 图片,对于没有被 Google 缓存 Favicon 的网站,会得到一个小地球的蓝色图标。

通过JS友情链接获取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图标了。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Warning: error_log(/www/wwwroot/fuwiqijishu/wp-content/plugins/spider-analyser/#log/log-2123.txt): failed to open stream: No such file or directory in /www/wwwroot/fuwiqijishu/wp-content/plugins/spider-analyser/spider.class.php on line 2900