主题适配移动端的一点想法（碎碎念）

以下内容可能出现：条理不清、思路紊乱、话题乱飞等。

文章主要是对同时适配电脑界面和移动端界面的想法，只适配任一端无需这么复杂

序言

移动端可以安装主题，但是过程相当曲折。需要移动端伺服安装主题并启用，每次更新主题还得再伺服再更新。所以更多人在移动端上使用的就是默认的官方主题。

后来，主题集市出现了一个为移动端设计的主题，但是它只为移动端设计，根本不考虑在电脑上的适配。我在看到这个主题之后就想能不能将我喜欢的主题安装到移动端上，让我在各端获得相对统一的体验。但是安装过程非常困难，我一度放弃了，直到近期才成功将 VSCode Lite Edit 安装到手机上（因为这个是我自己修改的，更符合我自己的喜好）（我手机上更多用于随时看一下笔记，很少编辑，已经打开默认只读了）。

但是安装完之后就出现了问题，电脑端的主题适配不全面，只有编辑器区域有自定义效果，有些地方应当对移动端有特殊的适配。但是这个没法在移动端调试，移动端的界面可没有开发者工具，于是我想能不能在电脑上调成移动端的界面来调试，就像伺服时启用电脑端界面一样。

调试主题

在电脑上调试思源笔记不算复杂，用 location.href 可以看到当前的链接地址，也可以调整链接地址。思源电脑端启动默认是/stage/build/app 这个路径，将 app 调成 mobile 就是移动端的界面，调成 desktop 就是电脑端的界面（不完全和 app 相同）。

在找到方法启动移动端的界面之后，我就开始找怎么判断当前是移动端还是电脑，但是没找到一个合适的方法，现在的主题大多都是只适配电脑端，没有安装在移动端上的。后来在模仿 Savor 的方法做配置面板时，看到 Savor 有简单的判断方法，就 copy 下来备份（最终没用上）。

获取移动端独有的标记

虽然没有用上 Savor 的判断，但是借助 Savor 判断方法的提示，我发现在 app/ 链接下 body 元素有一个类叫 body--win32，用 mobile/ 和 desktop/ 都没有这个类。同时在 mobile/ 下编辑器专门用一个 div#editor 装着，笔记的正文都在这里面渲染。如果用 Savor 的获取 #editor 元素来判断是否是移动端的话，好像一直会触发，即使当前是电脑端视图，所以这个没法用。而 Savor 判断电脑端的 body.body--window 在我的 app/ 下又一直没有这个类，所以也不能用。

对编辑器中的元素进行操作

于是在获取到一个移动端界面独占的元素之后，就可以借助这个元素对移动端的主题（目前只有编辑器部分）进行操作了。对于移动端的官方主题，编辑器是不显示滚动条的，因为动态加载会让滚动条滚到底之后又加载导致回弹，并且无法通过滚动条移动到整个文档对应的位置，只能移动到目前动态加载的块的相对位置。因为 VSCode Lite Edit 没有做适配，所以第一个试验就是模仿官方主题隐藏编辑器右侧的滚动条。

要隐藏也很简单，滚动条是编辑器里的 webkit 特殊组件，通过 #editor .protyle~::webkit-scroll-bar~ 这样的方法就可以选出滚动条进行隐藏（我忘记怎么写的了，大概长这样）。于是这样测试之后就可以在移动端隐藏滚动条了（使用 mobile/ 测试）。

对其他部分元素进行操作

但是这样只能对编辑器的元素进行控制，没法对其他部分进行控制。而其他元素我还没细看有什么区别，有可能是移动端独占的类名，或者特殊的文档元素结构，也可能和电脑端几乎一致但是主题就是不适配。而如果没有明显可以区分移动端的属性，可以尝试使用 js 获取当前链接，使用 split('/') 取出 mobile 部分并判断是否是 mobile，这个位置是固定的，可以从切完的数组中取出固定元素进行比较。如果是 mobile 就对 body 添加主题自己的标识符，并用这个标识符向下适配主题。因为思源的界面显示只通过访问链接的不同来区分，所以产出这个思路。

这一段的思路我还没有实际验证，只是“或许可行”。

后记

移动端的主题还存在一些问题，比如

1. 底部有一个状态栏，和电脑端的位置一样，但是只显示电脑端底部栏左侧的状态文本（云同步、数据快照等），并且在没有文本时会隐藏到几 px 高度。（我的主题修改了状态栏颜色所以很显眼）
2. 编辑器以外的地方不能通过 #editor 选中元素，需要通过 js 判断是否是移动端界面。
3. 同时维护主题在电脑端和移动端的界面相当耗费时间精力，是成倍的工作量，平时使用环境还不算多（很多人做电子笔记都是在电脑、平板上做的，看的都是电脑端界面），为爱发电性价比低，还可能浪费时间
4. 移动端的功能不全（相比起电脑端来说的），适配不易，主题迁移到移动端只有编辑器部分生效，其余地方都要重新适配。

不过或许以后会有人愿意开发更多的移动端主题，只适配移动端还是相当容易的（就是不好调试，需要手动改路径），感谢你看我的碎碎念到这里，实在很长很啰嗦，或许还存在错误，不管怎样，都感谢阅读，感谢指正。