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