链接页美化:在每个链接前面显示Favicons

Jan 4th Tue, 2011/JiaJieChan/折腾/1,516 阅读/8 评论
在今天无意中看到别人的博客链接页里都显示Ico了,而我的博客却还是那个默认图标,在做这个修改碰过不少壁。第一不知道链接页里的li标签在哪个CSS里面控制,第二知道后尝试在CSS里调用$bookmark->link_url,最后失败告终。第三不知道怎样调用Ico,原来是用URL/Favicons.ico来调用的,后来知道每个浏览器调用Favicons的方法都不同。

这个修改方法是自己总结的,要感谢强大的Google、感谢伟大的国家、感谢我的父母、感谢仁慈的工信部,因为有他们我才能够写完这篇文章。

方案思路

获得网站的Favicons,并且要让所有浏览器成功显示;去掉默认的链接图标(只针对INove,有些主题可能没有默认的图标);插入自动获取的Favicons图标;让图标与文字链接对齐,中间有一定的空间。

修改方法

在多方搜索下知道Google的Favicons缓存功能,获取方法 http://www.google.com/s2/favicons?domain_url= 在后面加入URL即可,Google还有第二个获取来源,就是从域名获取 http://www.google.com/s2/favicons?domain= ,这里要说一下域名与URL是不同的,URL是带http://的,而前者却没有。恰巧在WP中调用的链接地址却是URL形式,我第一次的时候只发现从域名获取的方式,后来才知道能从URL里获取,Google的Favicons缓存功能是在服务器获取Ico图标然后转换为图片再输出,因此我们调用到的是一个图片。

获取并插入链接的Ico图标

打开links.php (//后面的是代码的说明)

在<li>和<a target="_blink" href="' . $bookmark->中间插入

<img src="http://www.google.com/s2/favicons?domain_url=' . $bookmark->link_url . '" />      
//插入链接的Favicons图片


去掉Inove链接模块里默认的链接图标

打开style.css  (//后面的是代码的说明)

查找 /* linkcat START */       //连接页的CSS样式开始

将.post .content .linkcat ul li a{ ***这里省略*** }删掉

这样就可以去掉默认的图标,刷新后默认就会消失,而显示php上插入的Ico,到这里你是不是觉得很图标和链接很紧密,一点都不好看?  这样就要做下面的修改了。

让图标与文字链接对齐

接着上面的步骤,删除代码后同时为了有逻辑性,在原位置插入以下代码   
(//后面的是代码的说明;=>为下一级菜单、标题等等,下面的代码完全可以在Dr里面可视化的完成!)

.post .content .linkcat ul li img {          //控制链接页 li => Img标签
margin-right: 5px;                             //向右方腾出几个空位,px为像素
vertical-align: middle;                   //Favicons图片垂直居中对齐
}


到此覆盖修改过的文件,刷新网页看看就可以看的效果!

声明: 本文采用 BY-NC-SA 协议进行许可. 转载请出示版权信息.
  1. Oct 1st, 2011 at 01:43 / #Url

    @小左,其实我觉得这个Favicons应该要普及才是啊

  2. Sep 30th, 2011 at 17:58 / #Url

    杰杰同学,介个不错,顶!

  3. Jan 13th, 2011 at 17:34 / #Url

    @流金漩涡, 恩恩

  4. Jan 13th, 2011 at 17:33 / #Url

    @依然饭特稀, 换呀,请到链接页留言申请! 13:)

  5. Jan 13th, 2011 at 17:31 / #Url

    恩恩

  6. Jan 13th, 2011 at 17:28 / #Url

    好方法,学习了

  7. Jan 13th, 2011 at 10:02 / #Url

    蛮好的 需要的时候再来取~~
    现在还换友链吗?

  8. Jan 7th, 2011 at 16:17 / #Url

    这样看起来的确美观多了。。

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
支持使用Gravatar头像

JiaJieChan提醒您: 要回复某人的评论,请将鼠标移动到那条评论,评论右边就会出现Replay字样(一定是要鼠标指针中的评论),在评论框中出现的的后面下一行填写评论提交即可.被回复者将收到邮件通知噢; 要是想直接对本文评论请直接在评论框留言即可,然后点提交.