Notion 在 Windows 上的客户端太难看了？我们一起来美化一下它
Matrix 精选
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
相信不只是我，用过（或看过）macOS 和 Windows 两个版本 Notion 客户端的同学，应该都会觉得 Windows 上的 Notion 用户「处于水深火热」之中。😂
Notion 的桌面客户端是「网页套壳」的成果，受限于 Windows 上的 Electron API，Notion 官方的 Windows 客户端拥有 Windows 桌面应用的一切特征：
- 对 Notion 来说没有什么用处的「工具栏」
- 粗大的 Windows 老式「滚动条」
- 与 Notion 整体颜色不符的「标题栏」
- ……
不过 Notion 客户端是用 Electron 封装的，其样式、布局等和网页的定义方法一致。因此我们可以通过一些手段对 Notion 的 Windows 客户端进行定制，使之更符合我们的审美与使用习惯。比如下面这样：
这里用到的是来自乌克兰的开发者 @Uzver 的 Notion Enhancer，借助这款工具，我们可以对 Notion 的 Windows 桌面客户端进行一系列魔改和美化。
准备工作
在开始美化 Notion 客户端之前我们需要安装一些工具，为接下来的魔改进行准备工作。下面的步骤在 Windows 10 Pro 19041.25 版本下进行，使用 Windows 上的软件包管理工具 Scoop 进行安装。
关联阅读：「一行代码」搞定软件安装卸载，用 Scoop 管理你的 Windows 软件
首先，Notion Enhancer 本身是一个 Python 脚本，我们需要安装 Python 环境。打开 PowerShell，在其中输入：
scoop install python
等待安装完成即可。
接下来，由于 Notion 的桌面客户端是 Electron 套壳应用，用 Node.js 作为其运行环境，因此我们需要安装 Node.js 与 npm 包管理工具。在 PowerShell 中继续输入：
scoop install nodejs
等待安装完成即可。
最后，我们需要使用 npm 包管理工具安装 asar 工具，用来解密 Electron 应用包，从而改造 Electron 应用（也就是 Notion 客户端）的内部代码。在 PowerShell 中继续输入：
npm install -g asar
在 PowerShell 中输入 asar，如果出现如下的结果，那么我们的 asar 工具就安装成功了。
至此，准备工作就基本完成了。
安装「美化」套装
接下来，我们下载「美化」套装：Notion Scripts V4。解压之后我们会得到这样的几个文件：
Customization Patcher.py：Python 脚本，用于将样式施加于 Notion 客户端Customization Remover.py：Python 脚本，用于移除已经添加的样式- resources 资源文件夹：
main.user.js：用户 JavaScript 脚本，用于加载用户 CSS 样式，并修改 Notion 客户端外壳的样式（比如标题栏、窗口控件等）custom_style.css：用户 CSS 样式表，用于自定义 Notion 客户端内部实际功能区的样式- ……
我们将 NotionScriptsV4 文件夹放置妥当（可以放在云存储同步文件夹中，方便后续保管），在 PowerShell 中定位至这一文件夹，进行接下来的「安装」操作。
关掉所有 Notion 客户端，在 PowerShell 中输入下面的命令，执行 Python 脚本：
python 'Customization Patcher.py'
在这一步骤中，Customization Patcher.py 实际上为我们做了以下的事情：
- 找到 Notion 客户端的安装地点，并将其 Electron 核心软件包
app.asar用我们刚刚安装的asar工具解压（解密）并放置在./Notion/resources/app位置。同时将原先的app.asar进行备份（重命名为app.asar.bak） - 在解压之后的 Electron 软件包里面，加载我们的自定义用户 CSS 文件
custom_style.css与自定义用户 JavaScript 文件main.user.js - 修改 Notion 桌面客户端的窗口属性为「无边框窗口」，并调整相应的「可拖拽区域」
- 修改 Notion 桌面客户端的入口，添加「显示与隐藏 Notion 窗口」的注册快捷键
- 为 Notion 客户端添加任务栏图标（方便设置开机启动与窗口恢复样式）
随后重启 Notion 客户端就可以看到样式已经生效，客户端被我们成功魔改。
另外，如果后续希望将 Notion 客户端恢复原样，我们同样直接运行移除样式脚本 Customization Remover.py 即可：
python 'Customization Remover.py'
功能与配置
事实上，Notion Enhancer 为我们添加、修改并自定义了很多 Notion 客户端的功能与样式。
Windows 默认控件的修改
首先 Notion Enhancer 最大、最值得使用的功能特性就是将 Notion 原有的 Windows 菜单栏、工具栏与滚动条全部去掉，修改成了更符合 Notion 整体风格的样式。下面是一个对比：
可以看到，Notion Enhancer 将 Windows 原生的与 Notion 界面风格不匹配的控件全部隐藏了起来，并重绘了右上角的「最小化」、「最大化」和「关闭窗口」的控件，并将「滚动条」也重新绘制，使之与无论在深色主题还是浅色主题下都能完美契合。
另外，Notion Enhancer 还在右上角添加了一个实用的新控件 ↑，用于置顶 Notion 窗口。
表格视图去掉两侧空白
Notion Enhancer 将 Notion 表格、看板视图左右两侧的「空白区域」去掉，从而让二者能显示更多的横向内容。
这部分样式在文件 custom_style.css 的 87 行往下开始定义的，如果不希望开启这一功能，我们直接删掉或注释掉 87 行至 97 行与 103 行至 107 行的代码内容（即下图中蓝色框中代码内容）即可。另外也可以在 Notion 客户端里面用快捷键 Ctrl + R 重新加载样式。
调整图标与头图的位置
Notion Enhancer 将带有头图的页面也进行了相应的调整。为了使纵向空间充分利用，Notion Enhancer 将图标向上移动至头图中央，并调整了头图的显示区域。
需要注意这部分样式定义是作者针对 15.6 寸与 24 寸显示器进行的参数调整，如果发现自己的 Notion 客户端显示出现了问题，那么我们需要手动调整这部分参数，也就是 custom_style.css 的第 109 行下面的部分。
这里我们需要调整两个 height 参数，其中 12vh、20vh 分别代表 Notion 页面内容距离顶端的高度与头图的显示高度，我们适当进行调整，使得图标在头图里面垂直居中即可。
添加自定义的 Notion 样式
在上面的两个例子中可以看到，无论是桌面客户端的 Notion 还是网页版本的 Notion，其样式实际上是完全可以很大程度上进行自定义的。我们直接在 custom_style.css 里面添加或修改相应的 CSS 样式定义内容即可让 Notion 界面按照我们希望的样子显示。
快捷键显示隐藏 Notion 窗口
Notion Enhancer 还为我们添加了隐藏/显示 Notion 窗口的快捷键定义。
默认的隐藏 / 显示 Notion 快捷键是 Ctrl + Shift + A，不过我们也可以自定义这一功能。在 Customization Patcher.py 中，第 34 行定义了快捷键 windowToggleHotkey 的变量，这里我们就可以将默认定义的：
windowToggleHotkey = "'ctrl+shift+a'"
修改为我们自己的快捷键，比如 Win + Shift + N：
windowToggleHotkey = "'super+shift+n'"
这里的修改需要重新运行 Customization Patcher.py，再次给 Notion 客户端打补丁，才能让快捷键生效。
添加任务栏设置图标
最后，为了方便设置 Notion 开机自启以及启动的窗口样式，Notion Enhancer 还添加了一个任务栏设置区域，方便我们设置 Notion 开启启动、自动隐藏窗口、自动最大化窗口与最小化到托盘等选项。
小结
为了拯救 Notion 的 Windows 用户于水深火热之中，Notion Enhancer 的作者也是煞费苦心，为我们修改了 Notion 的界面并提供了诸多增强功能，包括能够任意自定义 Notion 页面样式的入口：custom_style.css。
Notion Enhancer 目前已经更新至第四个版本，作者将在 Notion Enhancer - Notion 这一页面持续更新工具及其相应的功能和配置方法，感兴趣的同学可以持续关注。本文的介绍就到这里，感谢阅读。
> 参与 少数派年度征文，瓜分五万元奖品 💃🏻