文章内链接自动增加网站 icon

December 05, 2016

为什么做这个

之前使用罗磊的一款名为【Yasuko】的主题时发现了一个很有意思的功能：文章内的链接能自动增加来源站的 icon。效果大概是下面这样，如果你现在来看这篇文章应该已经实现好这个功能了。我感觉这个功能能给单调的文章增添一些活力，也能给那些来源站做做宣传 = w=，所以便想着在现在的这个主题上增加这个功能。

实现过程

我查看了一下罗磊写的相关代码，发现他是单独做了一些判断，并且使用的是预设好的 webfont 字体做的图标，这样更为稳定，也更快速，但是缺陷就是大部分不在清单内的网站并不会显示网站图标。凑巧我知道一个黑科技，以前在使用 wordpress 的时候用过小影的 C7V5 的时候发现他做的友链页面便可以自动获取网站的 icon 用作展示，发现只是一个第三方的获取网站 icon 的工具：//api.byi.pw/favicon?url=。你只需要把你想要获取 icon 的网站的地址放在 url 后输入浏览器便能轻松获取网站图标了。

有了这个黑科技实现这个功能就更加简单了，用 jquery 获取文章内容主体内的所有 a 链接，并用 echo 函数遍历每一个链接对象后再单独设置每个链接的 css 即可。

$(".content a").each(function(){
        $(this).css({"padding-left":"20px","margin":"0px 5px","background":"url(//api.byi.pw/favicon?url="+this.hostname+")  no-repeat"});
    })

敲完代码，打开页面刷新后再看看。是不是既简单、效果又酷炫？哈哈，希望能帮到你。