[WIP] 简悦 站点适配技巧及注意事项

[binsee]

普通适配

TODO:

高级适配

TODO:

• 注入代码，实现高级适配操作

懒加载图片的处理

现代网页会有很多图片、视频等富媒体信息来丰富页面内容种类，而大量图片会导致页面加载时间变长体验变差，且增加图片服务器的流量压力。因此很多站点使用了懒加载图片的方式，来延迟加载图片。
但这种技术会影响简悦获取图片信息，因此需要进行一些特殊处理。

• 解决思路： [Feature][提案]通用化处理懒加载图片 #1108

单页面应用（SPA）

单页面应用的内容，会从服务器动态加载然后显示，而很多单页面应用中不同文章的网址（URL）是相同的，这就会导致多篇文章无法重复加入稍后读。
为单页面应用站点制作适配规则时，除了要处理懒加载的问题，还要额外处理不同文章的URL，来确保不同文章的URL是不同的，便可以让不同的文章顺利加入稍后读。

• 解决方式：为网址加锚点（hash）值，可以用文章标题或文章id之类的非重复值来做区分。
• 关键代码：

window.location.hash=title;  //这里的 title 是在js中取到的文章标题

• 参考案例： 单页面应用的不同文章因页面url一样，无法加入稍后读 #2317

特殊适配

TODO:

• 跟踪调试

注意事项

隐藏列表对「稍后读 - 阅读模式」的影响

文章被加入到稍后读后，如果导出html到了output目录下，且稍后读中开启了『优先加载本地的离线文件』。
在进入「稍后读 - 阅读模式」界面后，简悦会通过同步助手从本地的导出目录（output目录）读取html文件，然后在处理过程中，会执行文章原站点适配规则的隐藏列表，如果适配规则中隐藏列表有特殊的js代码，可能会导致「稍后读 - 阅读模式」出现非预期的异常问题。

• 参考案例：b站笔记导出到本地离线html，在「稍后读 - 阅读模式」 显示异常 #2319
• 解决方式：在使用了js代码的隐藏列表项中，加入判断当前url的判断，不符合则直接返回不执行。如：

  [[{
    (()=>{
      if (!/bilibili.com/.test(window.location.hostname)) return;
      //...
    })()
  }]]

「稍后读」中，a标签链接前缀为//时会导致错误链接

a标签的链接前缀为 // 时，浏览器会自动补充为当前页面相同协议。

当前页面协议	示例链接	浏览器推断后的链接	备注
http	//github.com	http://github.com	正常，非加密http通讯协议
https	//github.com	https://github.com	正常，加密https通讯协议
chrome-extension	//github.com	chrome-extension://github.com	「简悦 - 稍后读」@chrome
extension	//github.com	extension://github.com	「简悦 - 稍后读」@edge

• 修复方案：

// video_url 为js代码中取到的url地址
if(!/^http/.test(video_url)) video_url='https://'+video_url.replace(/^[\\/:]+/,'');

「稍后读」中，非公开的页面资源，在已登录状态下可加载，未登陆则无法加载

以b站笔记功能举例：

b站笔记是登陆账号才可以显示的，而笔记中嵌入的视频截图也是登陆后才能显示的。

• 当将某篇笔记加入到稍后读后，且保存html到本地。
• 在稍后读中开启了「优先加载本地的离线文件」，打开此条笔记的「阅读模式」。
• 此时，是否已登录b站账号，显示的内容是有区别的：
  • 已登录：可以加载并显示笔记中的视频截图。
    如果笔记所属的b站账号不是当前已登录的b站账号，则图片会无法显示或显示错误。因为笔记的图片不是当前账号下的。
  • 未登陆：无法加载笔记中的视频截图。