首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

将文章内的超链接改成卡片式链接展示

目前知乎或者其他网站上,都采用了【卡片式链接】的展示方式,与普通链接相比,卡片式链接不仅美观,还可以展示更多信息,如:标题、图片、网址等。...超链接效果图 卡片式效果图 CardLink CardLink 引入JS 博客的话,采用CDN JS的方式。放在head标签的位置。 npm相关的方式,请参见GitHub。...document.querySelectorAll('article a[target=_blank]')) 当前主题方式:即为div的id=post-content内的超链接,采用卡片式...2.得到结果,使用 new DOMParser() 解析请求结果的 HTML 内容,并使用 dom API 解析获取信息 (如果你厉害你可以使用正则表达式匹配) 3.编辑卡片式链接的 HTML 以及...CSS 样式 4.将解析到的信息插入之前编辑好的 HTML 模板中,并渲染到当前页面 问题 由于这是前端发送请求获取 HTML,可能部分网站会存在跨域 (CORS) 问题,所以 cardLink 允许你使用代理服务器去请求目标网站的

1.3K20

如何交互可视化你的卡片式笔记网络?

1 痛点 在《如何高效实践卡片式写作?》和《如何用卡片法写论文?》两篇文章中,我为你详细介绍了卢曼的卡片盒式(slipbox)笔记和写作方法。尤其是谈及了它在学术写作中的用法。...我个人的体会,是卡片式写作里面,最影响积累和写作心境的,是后顾之忧。这次咱们来谈谈这个问题,以及解决方法。 我主要担心的,是写了的东西,将来再也找不到了。...你看,用卡片式写作,原本的要旨,就是写得轻松愉快。如果总是担心笔记写好了,将来却找不到,哪还有什么写作的积极性呢? 你可能会纳闷儿: 老师,你为什么不用个靠谱一点儿的笔记工具呢?...也恰恰因为你会遗忘,所以卡片式笔记才是一种不断采撷珍贵想法进行积累的有用方法。 如果你记得有这条笔记,还可以通过关键词检索等方式,把它找回来。 可有的时候,你可能连写过它,都不记得了。...之前写《如何高效实践卡片式写作?》那一篇的时候,我曾经给你看了这样一张图。 ? 于是很多读者都后台留言,问我这张图是用什么工具做的? 我一直没有回复,是怕误导你。

1.2K40

形式与功能 – 卡片式设计思考 - 腾讯ISUX

这种排版优化的方法有很多种,我这里主要围绕卡片式设计的理论进行深入探讨,相信大家对卡片式设计已非常熟悉,虽然已流行了好多年,但是设计形式并不是随着使用年龄的增长而消失,芝加哥学派路易斯.H.沙利文提出过...如上图,现在卡片式设计的应用场景非常广泛,最有代表性的是微软Win8、Win Phone 7的metro风格,他们也是采用了大量的卡片式设计,据说这种Metro的设计灵感也来自于机场、地铁指示牌。...正是因为卡片式设计在微软、谷歌的产品界面的大量运用,很多互联网企业也纷纷采用这种设计,这是应用在PC端的界面,内容部分也都采用了卡片式设计,如下图: ?...这是印刷类的杂志界面,如下图杂志里的部分展示信息,也采用了这种卡片式风格。 ?...注明出处格式:腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

96420

卡片式UI不再流行,列表式UI将是王牌

随着 Material Design 的流行,卡片式 UI 已经成为现代 web 设计的一部分。尤其是你在提供一个汇总归档信息的界面时。 卡片是提供详细信息的入口。...基于卡片式UI设计的APP截图 文章排版设计的反馈 在重新设计后,经常用户群会有及时的负面反应。紧随其后的是大量的投诉和电子邮件,要求你撤回到旧的 UI 界面。...来自:HotJar 卡片式增加了汉堡菜单的使用 比较菜单图标的使用。我们可以看到一个基于卡片式的网站的更大的用途。...顶行是卡片式网站。 底部是列表式网站。 下面是“最好的”案例 - 你可以看到最多的新闻。 ? 最好的位置看到最多的新闻。 顶行是卡片式。 底部是列表式。...虽然卡片式有更大的影响。 图片是抓住用户的注意。 附加信息如摘录和标签,也可以出现在卡上。 在用户提交请求之前给他们更多的信息。

3.1K70

树莓派是什么?能干什么?和单片机有什么区别?「建议收藏」

树莓派是由树莓派基金会发布的卡片式电脑,起初的目的是为了让更多的孩子们可以学习计算机编程,但是发布以后受到了广大计算机爱好者的喜爱。...树莓派被称为卡片式电脑,顾名思义它可以安装操作系统,并且接上显示屏鼠标键盘就可以正常使用,在上面可以用python或者C语言编程并运行。 树莓派和单片机的区别?...树莓派是卡片式电脑可以装操作系统,可以直接在上面编程并运行,而单片机是没有操作系统的它们是你在电脑上编好程序上传到板子上,这个板子就可以运行该程序。 树莓派使用的什么系统?...树莓派作为卡片式电脑可以用来做控制或者是做服务器这些都是可以的,主要还是看自己的能力,你的能力越强树莓派能做的事情就越多。 玩树莓派能学到什么?...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/139763.html原文链接:https://javaforall.cn

94910

树莓派是什么?能干什么?

树莓派是由树莓派基金会发布的卡片式电脑,起初的目的是为了让更多的孩子们可以学习计算机编程,但是发布以后受到了广大计算机爱好者的喜爱 树莓派被称为卡片式电脑,顾名思义它可以安装操作系统,并且接上显示屏鼠标键盘就可以正常使用...树莓派是卡片式电脑可以装操作系统,可以直接在上面编程并运行,而单片机是没有操作系统的它们是你在电脑上编好程序上传到板子上,这个板子就可以运行该程序。 三、树莓派使用的什么系统?...树莓派作为卡片式电脑可以用来做控制或者是做服务器这些都是可以的,主要还是看自己的能力,你的能力越强树莓派能做的事情就越多。 六、玩树莓派能学到什么?...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/133586.html原文链接:https://javaforall.cn

74710

想做卡片式设计,花瓣不在了该上哪里找参考?

作为承载信息的“容器”,卡片式设计能够包含文本、媒体和按钮等元素,而且能够适应不同设备、屏幕尺寸,平衡用户界面和用户体验之间的关系。 1 什么是卡片式设计?...现如今,我们浏览各个设计网站时,80%的网站设计都是卡片式风格。卡片式设计长什么样呢?来看一组图: ? ▲ 网站设计 ?...但用卡片式布局,即使是瀑布流,通过水平滑动也能显示更多内容。 提高可操作性 ? 卡片不仅仅是能够展示信息,同时卡片式设计还具有可以被覆盖、折叠、移动和滑动的特点。...卡片式设计,除了能尽可能展现信息以外,其实还具有“逻辑”,即使我们超快速浏览页面,也不会因信息多而感到混乱。卡片式设计将界面用块状分割开来,让页面更加整洁、赏心悦目。...卡片式设计在网站里随处可见,模块化让整个网站看起来井井有条。 Quora ? 作为一个内容网站,Quora用卡片式设计解决了如何在有限的布局内平衡显示内容和用户体验。

1.2K20

卡片式设计流行的秘密 — 看完这15个案例你就懂了!

所以今天摹客将为大家普及卡片设计的理念,整理一些优质的卡片式设计资源,希望能在设计上为你带来更多的思考和灵感。如果你对卡片式设计非常感兴趣,也可以免费下载Mockplus从原型设计开始制作。...二、卡片式设计的优势是什么? Google将它称之为“Inside Out design”(由内而外式),它的本质是更好的处理信息集合。那么卡片式设计具备哪些优势呢?...作为早期的卡片式设计先驱者,Pinterest的瀑布流设计的页面设计方式为用户提供了无缝式的流畅体验。同时,减少点击步骤也可以极大限度的留住用户。卡片式设计和瀑布流的结合也就是常听说的卡片流了。...卡片式设计能够帮助用户更好地进行列表归类。Trello的成功也是源自于它采用的卡片式设计。卡片式的任务列表可以灵活运用,使其很好地作用于用户,帮助用户管理任务和工作。...看了以上15个优质的卡片式UI设计实例,希望你能从中思考并且得到更多设计灵感。

2.8K30
领券