网站虽千变万化,但其本质都是一样的,由一个个的 列表,标签页,图片
等基础组件组合而来。 无相就是忽略其表相,将其重新解构成一个个的组件,提取出来数据后使用原生的组件重新渲染这些数据。 从而既可以消除噪音,又可以提升性能,以及节省流量。
「无相」是一个应用引擎,或者类似微信小程序的一个“平台”。实现了一些常用的组件,比如 标签页、列表、阅读模式
等,当无相访问一个网站时,会查找是否有某一个「相」可以适配该网站(通过域名比对),如果有的话继续查找这个「相」中是否有某一个页面匹配了当前访问的 URL。 如果找到的话无相就会根据「相」的规则从 HTML 中提取出来信息后使用指定的布局和组件渲染成原生的页面。
「相」是无相的配置文件,做的就是教无相怎么解构某一个网站的数据,并且重新渲染。
✅ 文章已完成
- 从 0 创建 ifanr 网站的客户端 ✅
- 注册无相账号
- 填写基本信息
- 适配一个页面
- 相的基本介绍
⚠️ - 相的基本信息
- 相的域名匹配规则
- 网页匹配规则
- 选择器和取值器 ✅
- 选择器:如何选择元素和高级选择器技巧
- 取值器:查看各种
@
的取值器
- 无相的控件文档 ⭕️
- 相的建议
- 相图标的选择 (apple-touch-icon, icon, favicon)
- 相配置实例
- Discuz
- 常见问题
- 如何知道一个网站是不是静态加载的?
- 为什么明明正确的 CSS 规则,「无相」取不到数据?
- UA 使用 PC 还是 移动网站?
最简单的办法:查看网页源代码,然后搜索你在网页里面看到的关键词,试试能不能搜索的到。比如你看到一个网站“iPhone XXX" 然后再源代码中搜索 iPhone 如果能看到对应的代码那么「无相」就可以提取出来。
有两种可能
-
HTML 是动态加载的,比如你打开少数派的首页,虽然你能看到文章列表的样式,但是它的内容都是 AJAX 动态加载的,所以取不到数据。
-
User Agent 原因:适配网站时一定要选择正确的 UA,因为大部分网站都会针对 PC和手机版使用不同的模板,「无相」默认使用手机版的 UA,而你用 Chrome 开发者工具查看网页结构时一定不要忘了切换到
移动模式
后刷新。
这个要看具体情况,一般情况下重视移动端的公司移动版会做的很好,那就更有可能使用比较炫酷的技术,网站动态加载的可能性就更大。而 PC 版一般会显示更多的信息。
不过新闻资讯类网站很依赖 SEO,所以大部分都是静态站。