存档

文章标签 ‘链接页美化’

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

Jan 4th Tue, 2011/JiaJieChan/折腾/1,712 阅读/8 comments
在今天无意中看到别人的博客链接页里都显示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图片垂直居中对齐
}


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