一键美化 Notion 客户端,Windows 版本也能好看又实用

栏目: IT技术 · 发布时间: 4年前

内容简介:Matrix是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。文章代表作者个人观点,少数派仅对标题和排版略作修改。相信不只是我,用过(或看过)macOS 和 Windows 两个版本 Notion 客户端的同学,应该都会觉得 Windows 上的 Notion 用户「处于水深火热」之中。:joy:

Matrix 精选

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

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

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

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 工具就安装成功了。

一键美化 Notion 客户端,Windows 版本也能好看又实用
验证 asar 工具安装成功

至此,准备工作就基本完成了。

安装「美化」套装

接下来,我们下载「美化」套装: Notion Scripts V4 。解压之后我们会得到这样的几个文件:

  • Customization Patcher.py :Python 脚本,用于将样式施加于 Notion 客户端
  • Customization Remover.py :Python 脚本,用于移除已经添加的样式
  • resources 资源文件夹:
main.user.js
custom_style.css
一键美化 Notion 客户端,Windows 版本也能好看又实用
Notion Enhancer 下载得到的文件

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

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

python 'Customization Patcher.py'
一键美化 Notion 客户端,Windows 版本也能好看又实用
执行 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 客户端,Windows 版本也能好看又实用
将 Notion 客户端恢复原样

功能与配置

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

Windows 默认控件的修改

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

一键美化 Notion 客户端,Windows 版本也能好看又实用
Notion Enhancer 修改效果

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

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

表格视图去掉两侧空白

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

一键美化 Notion 客户端,Windows 版本也能好看又实用
去掉表格视图两侧的空白部分

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

一键美化 Notion 客户端,Windows 版本也能好看又实用
表格与看板视图的 CSS 样式定义

调整图标与头图的位置

Notion Enhancer 将带有头图的页面也进行了相应的调整。为了使纵向空间充分利用,Notion Enhancer 将图标向上移动至头图中央,并调整了头图的显示区域。

一键美化 Notion 客户端,Windows 版本也能好看又实用
调整图标与头图的位置

需要注意这部分样式定义是作者针对 15.6 寸与 24 寸显示器进行的参数调整,如果发现自己的 Notion 客户端显示出现了问题,那么我们需要手动调整这部分参数,也就是 custom_style.css第 109 行 下面的部分。

这里我们需要调整两个 height 参数,其中 12vh、20vh 分别代表 Notion 页面内容距离顶端的高度与头图的显示高度,我们适当进行调整,使得图标在头图里面垂直居中即可。

一键美化 Notion 客户端,Windows 版本也能好看又实用
修改头图与图标垂直高度

添加自定义的 Notion 样式

在上面的两个例子中可以看到,无论是桌面客户端的 Notion 还是网页版本的 Notion, 其样式实际上是完全可以很大程度上进行自定义的。 我们直接在 custom_style.css 里面添加或修改相应的 CSS 样式定义内容即可让 Notion 界面按照我们希望的样子显示。

一键美化 Notion 客户端,Windows 版本也能好看又实用
添加自定义 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 任务栏设置图标

小结

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

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

> 参与少数派年度征文,瓜分五万元奖品 :dancer|type_1_2:

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Hit Refresh

Hit Refresh

Satya Nadella、Greg Shaw / HarperBusiness / 2017-9-26 / USD 20.37

Hit Refresh is about individual change, about the transformation happening inside of Microsoft and the technology that will soon impact all of our lives—the arrival of the most exciting and disruptive......一起来看看 《Hit Refresh》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具