具体效果见:https://immmmm.com/friends
其实,下篇文章码的就是教程。
那,现在这篇又什么情况呢?哈,是基于 mixin
又精简了代码。
\`\`\`code 反斜杠补丁
mixin friends(href,mail,name)
a.friends(href=href,target="_blank")
img(src="/service/gravatar/"+(mail).md5)
span.name= name
+friends('http://immmmm.com','[email protected]','林木木')
\`\`\`
只需按照 +friends('网址','邮箱','昵称')
这种格式添加即可,省去了N多html代码!
当然样式什么的还是得有~
.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;}