一键美化 Notion 客户端,Windows 版本也能好看又实用
2020-02-14 17:01:01 Author: sspai.com(查看原文) 阅读量:412 收藏

Notion 在 Windows 上的客户端太难看了?我们一起来美化一下它

Matrix 精选

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


相信不只是我,用过(或看过)macOS 和 Windows 两个版本 Notion 客户端的同学,应该都会觉得 Windows 上的 Notion 用户「处于水深火热」之中。😂

Notion 的桌面客户端是「网页套壳」的成果,受限于 Windows 上的 Electron API,Notion 官方的 Windows 客户端拥有 Windows 桌面应用的一切特征:

  • 对 Notion 来说没有什么用处的「工具栏」
  • 粗大的 Windows 老式「滚动条」
  • 与 Notion 整体颜色不符的「标题栏」
  • ……

不过 Notion 客户端是用 Electron 封装的,其样式、布局等和网页的定义方法一致。因此我们可以通过一些手段对 Notion 的 Windows 客户端进行定制,使之更符合我们的审美与使用习惯。比如下面这样:

魔改之后的 Notion Windows 客户端
魔改之后的 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 工具就安装成功了。

验证 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 客户端内部实际功能区的样式
    • ……
Notion Enhancer 下载得到的文件

我们将 NotionScriptsV4 文件夹放置妥当(可以放在云存储同步文件夹中,方便后续保管),在 PowerShell 中定位至这一文件夹,进行接下来的「安装」操作。

关掉所有 Notion 客户端,在 PowerShell 中输入下面的命令,执行 Python 脚本:

python 'Customization Patcher.py'
执行 Customization Patcher 脚本

在这一步骤中,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 客户端恢复原样

功能与配置

事实上,Notion Enhancer 为我们添加、修改并自定义了很多 Notion 客户端的功能与样式。

Windows 默认控件的修改

首先 Notion Enhancer 最大、最值得使用的功能特性就是将 Notion 原有的 Windows 菜单栏、工具栏与滚动条全部去掉,修改成了更符合 Notion 整体风格的样式。下面是一个对比:

Notion Enhancer 修改效果
Notion Enhancer 修改效果

可以看到,Notion Enhancer 将 Windows 原生的与 Notion 界面风格不匹配的控件全部隐藏了起来,并重绘了右上角的「最小化」、「最大化」和「关闭窗口」的控件,并将「滚动条」也重新绘制,使之与无论在深色主题还是浅色主题下都能完美契合。

另外,Notion Enhancer 还在右上角添加了一个实用的新控件 ,用于置顶 Notion 窗口。

表格视图去掉两侧空白

Notion Enhancer 将 Notion 表格、看板视图左右两侧的「空白区域」去掉,从而让二者能显示更多的横向内容。

去掉表格视图两侧的空白部分
去掉表格视图两侧的空白部分

这部分样式在文件 custom_style.css 的 87 行往下开始定义的,如果不希望开启这一功能,我们直接删掉或注释掉 87 行至 97 行与 103 行至 107 行的代码内容(即下图中蓝色框中代码内容)即可。另外也可以在 Notion 客户端里面用快捷键 Ctrl + R 重新加载样式。

表格与看板视图的 CSS 样式定义

调整图标与头图的位置

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 样式

快捷键显示隐藏 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 任务栏设置图标

小结

为了拯救 Notion 的 Windows 用户于水深火热之中,Notion Enhancer 的作者也是煞费苦心,为我们修改了 Notion 的界面并提供了诸多增强功能,包括能够任意自定义 Notion 页面样式的入口:custom_style.css

Notion Enhancer 目前已经更新至第四个版本,作者将在 Notion Enhancer - Notion 这一页面持续更新工具及其相应的功能和配置方法,感兴趣的同学可以持续关注。本文的介绍就到这里,感谢阅读。

> 参与 少数派年度征文,瓜分五万元奖品 💃🏻

> 下载少数派 客户端、关注 少数派公众号,找到更多工作生活灵感 ✨

SpencerWoo


文章来源: https://sspai.com/post/58796
如有侵权请联系:admin#unsafe.sh