模仿知乎的链接卡片

今天逛知乎发现他们的链接卡片挺好看,就想写一个自己拿来博客用(扒下来知乎的代码),效果如下。
源码放在github,感兴趣的朋友可以自己拿。

兰州小红鸡的博客 小鸡背单词 github | 模仿知乎的卡片链接

如何使用

在需要把链接转换成卡片的地方,将<a>标签的class设置为LinkCard
然后再后面引入js文件就好了
例如

<a target="_blank" href="https://github.com/flymysql"  class="LinkCard">flymysql</a>

实现代码

就是直接地修改<a>标签地dom内容,好像没什么好说的,样式我是直接从知乎扒下来的。

模仿知乎的卡片链接

下面是一些我的建站笔记汇总,平常做的小手工,希望对大家有帮助

hexo博客搭建以及next美化教程 原生js实现网页图片点击展示效果 用回valine评论系统,valine评论框样式美化 给hexo静态博客添加动态相册功能 hexo建站笔记之首页文章轮播图 模仿知乎的链接卡片 开始使用腾讯云图床 将公众号文章爬到hexo博客 使用腾讯云cdn加速博客 hexo建站笔记之彩色标签云 手动修改博客css样式,打造属于自己的博客样式







我是小鸡,这篇文章的标题是——模仿知乎的链接卡片
喜欢的话可以转载,不过记得标记出处

2018年12月16日