惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园_首页
大猫的无限游戏
大猫的无限游戏
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Apple Machine Learning Research
Apple Machine Learning Research
B
Blog
B
Blog RSS Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
P
Proofpoint News Feed
MyScale Blog
MyScale Blog
Engineering at Meta
Engineering at Meta
量子位
H
Hackread – Cybersecurity News, Data Breaches, AI and More
T
Tailwind CSS Blog
Stack Overflow Blog
Stack Overflow Blog
N
Netflix TechBlog - Medium
T
The Blog of Author Tim Ferriss
U
Unit 42
aimingoo的专栏
aimingoo的专栏
博客园 - 叶小钗
博客园 - 【当耐特】
云风的 BLOG
云风的 BLOG
博客园 - Franky
博客园 - 聂微东

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
Notion 在 Windows 上的客户端太难看了?我们一起来美化一下...
2020-02-13 · via 少数派

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 这一页面持续更新工具及其相应的功能和配置方法,感兴趣的同学可以持续关注。本文的介绍就到这里,感谢阅读。

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

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