今天,我爱“折腾”的毛病又犯了,看到友情链接页面松松垮垮的放着朋友们的博客链接,实在不太好看,于是乎想到利用bitcron的smart page建立一个新的友链页面。

Smart Page真的是一个好东西,可以傻瓜化、一键生成一个高大上的专属页面,显得博主倍儿有品位。但是试用之后也发现了一些弊端,最突出的问题就是smart page似乎不支持一下子显示辣么多的链接。我尝试了,最多一个cover只能显示5个超链接,超出了集体不显示,甚是气人。我的小伙伴们想要显示全了需要三屏幕,看起来不是特别舒服。

但是,区区一个smart page的设定怎能阻挡住一个折腾的心呢。很快,我又从大神@林木木那里“偷师学艺”,copy了的友链样式,如下图所示:

进化史

具体的代码,我也厚着脸皮粘贴一下,版权还是归林木木大神所有:

```code
mixin friends(href,mail,name)
    a.friends(href=href,target="_blank")
        img(src="/service/gravatar/"+(mail).md5)
        span.name= name

style
    .hentry .post-content,blockquote{max-width:90% !important;margin:0 auto;}
    .friends{display:inline-block;margin:0 18px 18px 0;min-height:32px;background-color:#f7f7f7;border:1px solid #dcdcdc;border-radius:4px;vertical-align:top;overflow:hidden;}
    .friends img{width:36px;height:36px;vertical-align:middle;}
    .friends .name{display:inline-block;padding:0 11px;font-size:14px;}    

+friends('https://8kg.org/','blog@139.com','博客八公斤')
```

只需按照 +friends('网址','邮箱','昵称') 这种格式添加友情链接即可,确实省去了N多html代码!

×