修改Typora的代码以支持文件夹和文件混合排序
用Markdown文件写笔记,用文件夹做分类,整个笔记文档项目构成了一个树形结构。笔记文章之间、文章与分类之间经常有特定的先后顺序,于是就在文件名前面加上数字前缀来控制排序。但是,Windows的文件系统始终把文件夹和文件分开来排序,一般是所有文件夹排在所有普通文件之前,Typora也采用了这种策略,这对我的笔记组织造成了一些不便。因此,我尝试对Typora的程序代码进行一些修改,以支持文件夹和文件混合排序。

Typora是基于Electron的应用程序,编程语言是解释型的JavaScript,而不是编译型语言,因此应该可以找到其执行的JS文件,修改其中的代码以添加我们自己的逻辑。Typora还允许打开DevTools,这更方便我们调试。
在Typora中打开DevTools,观察到其加载了几个JS文件,其中一个是C:\Program Files\Typora\resources\appsrc\window\frame.js,猜测是整个应用程序窗口的代码。在文件最后添加一个alert(),重启Typora,看到有弹窗,说明确实可以执行我们自己的代码。
Typora中的JS文件都是编译压缩后的,修改前要先用VSCode或WebStorm格式化一下。因为经过编译,所以变量名、程序流程写法等都不容易阅读,需要一些耐心去理解。

在DevTools中查看侧边栏文件树的DOM结构,发现文件夹结点下的所有子文件(文件夹和普通文件)都位于.file-node-children元素中,因此,只要修改渲染这个DOM的逻辑,就可以实现自定义排序。

在frame.js中搜索file-node-children,共有3处,查看、调试分析,发现了渲染文件列表的核心方法renderNode()。每个文件结点数据中,子目录结点放在subdir属性(数组)中,子文章结点放在content属性(数组)中,它们是分开排序、分开渲染的。那么,只需要合并这两个数组,放在一起一次性排序、渲染就可以实现混排了。添加代码,重启Typora,发现成功了。



此外,还要继续分析、修改其他几处代码,才能让文件列表始终都能正确混合排序。过程类似,就略了。
一番分析、修改、调试下来,任务就完成了。实现不难,主要是走一遍这种逆向工程,把学到的知识用起来。
修改Typora的代码以支持文件夹和文件混合排序的更多相关文章
- java 查询路径中所有文件夹和文件的名称,支持文件名模糊查询
java 查询路径中所有文件夹和文件的名称,支持文件名模糊查询 有时候我们遇到需要查询服务器或者本机某个路径下有哪些文件?或者根据文件名称模糊搜索文件,那么就可以使用本方法:可以获取某个路径下所有文件 ...
- python文件夹遍历,文件操作,获取文件修改创建时间
在Python中,文件操作主要来自os模块,主要方法如下: os.listdir(dirname):列出dirname下的目录和文件os.getcwd():获得当前工作目录os.curdir:返回当前 ...
- C#实现对指定文件夹中文件按修改时间排序
string path = "~/Document/Introduction/团队管理制度/"; DirectoryInfo dirinfo = new Di ...
- Linux - 打印文件夹全部文件 代码(C)
列出文件夹全部文件 代码(C) 本文地址:http://blog.csdn.net/caroline_wendy 首先配置环境,參考:http://blog.csdn.net/caroline_wen ...
- Java访问文件夹中文件的递归遍历代码Demo
上代码: import java.io.File; /* * 需求:对指定目录进行所有内容的列出(包含子目录中的内容) * 也可以理解为 深度遍历. */ public class FindAllFi ...
- Linux中在主机上实现对备机上文件夹及文件的操作的C代码实现
需求描写叙述 编敲代码.完毕在主机上实现对备机上文件夹及文件的操作. 比如,主机为A,备机为B,要求编写的程序运行在A机上,该程序实如今B机上创建文件文件夹及复制文件的操作. 需求分析 我们先不考虑用 ...
- python调用另一个文件中的代码,pycharm环境下:同文件夹下文件(.py)之间的调用,出现红线问题
如何调用另一个python文件中的代码无论我们选择用何种语言进行程序设计时,都不可能只有一个文件(除了“hello world”),通常情况下,我们都需要在一个文件中调用另外一个文件的函数呀数据等等, ...
- 在Linux中要修改一个文件夹或文件的权限
在Linux中要修改一个文件夹或文件的权限我们需要用到linux chmod命令来做,下面我写了几个简单的实例大家可参考一下. 语法如下: chmod [who] [+ | - | =] [mode] ...
- Python模糊查询本地文件夹去除文件后缀(7行代码)
Python模糊查询本地文件夹去除文件后缀 import os,re def fuzzy_search(path): word= input('请输入要查询的内容:') for filename in ...
随机推荐
- GitHub不再支持密码验证解决方案:SSH免密与Token登录配置
今天提交代码,push到GitHub上,突然出现这个问题. remote: Support for password authentication was removed on August 13, ...
- 害...原来阿里面试Redis最常问的是它呀
一提到Redis缓存,我们不得不了解的三个问题就是:缓存雪崩.缓存击穿和缓存穿透.这三个问题一旦发生,会导致大量的请求直接请求到数据库层.如果并发压力大,就会导致数据库崩溃.那p0级的故障是没跑了. ...
- Elasticsearch IK分词器
Elasticsearch-IK分词器 一.简介 因为Elasticsearch中默认的标准分词器(analyze)对中文分词不是很友好,会将中文词语拆分成一个一个中文的汉字,所以引入中文分词器-IK ...
- K8s 部署 Gitlab CI Runner
K8s 版本:1.20.6 GitLab CI 最大的作用是管理各个项目的构建状态.因此,运行构建任务这种浪费资源的事情交给一个独立的 Gitlab Runner 来做就会好很多,而且 Gitlab ...
- CentOS7.6新增或修改SSH端口号的步骤
1.修改SSH配置文件(注意是sshd_config而不是ssh_config,多了个d) vim /etc/ssh/sshd_config 找到"#Port 22",这一行直接键 ...
- mysql 局域网连接
下面分别简述操作: 配置虚拟机网络 默认方式是NAT,但为了让宿主机之外的其它计算机也能访问虚拟机,NAT方式配置起来有些复杂,这里推荐用桥接模式,关于VM的几种网络方式的区别,可以参考这篇文章配置好 ...
- 小白5分钟创建WPF
创建WPF应用程序 基于生产这里选择.Net Framework进行开发 添加控件 由于不熟悉 高效点 我们这里直接拖拽控件 如果你有一点前端基础 你可以在控件对应Code 根据属性 对控件进行设置 ...
- springCloud之路API路由网关Zuul
1.简介 简单的理解就是,相当于在所有服务的调用前加了一层防火墙, 主要就是对外提供服务接口的时候,起到了请求的路由和过滤作用,也因此能够隐藏内部服务的接口细节,提高系统的安全性: 官方文档:http ...
- ArcGIS:从DEM数据提取对应点的高程
通过Extract Value to Points从DEM数据中提取所需点的高程. 方法/步骤 将DEM数据文件和一个shapefile点文件(分别命名为"DEM"和"P ...
- 设置Sublime插件快捷键--实现CSS颜色选取
安装插件ColorPicker 如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用.(译者扩充:)这是一个双向的功能,你既可以在调色板中选择一个颜色,然后按"确定&qu ...