相信不只是我，用過（或看過）macOS 和 Windows 兩個版本 Notion 客戶端的同學，應該都會覺得 Windows 上的 Notion 用戶「處於水深火熱」之中。
Notion 的桌面客戶端是「網頁套殼」的成果，受限於 Windows 上的 Electron API，Notion 官方的 Windows 客戶端擁有 Windows 桌面應用的一切特徵：
- 對 Notion 來說沒有什麼用處的「工具欄」
- 粗大的 Windows 老式「滾動條」
- 與 Notion 整體顏色不符的「標題欄」
- ……
不過 Notion 客戶端是用 Electron 封裝的，其樣式、佈局等和網頁的定義方法一致。因此我們可以通過一些手段對 Notion 的 Windows 客戶端進行定製，使之更符合我們的審美與使用習慣。比如下面這樣：
魔改之後的 Notion Windows 客戶端
這裡用到的是來自烏克蘭的開發者 @Uzver 的 Notion Enhancer，藉助這款工具，我們可以對 Notion 的 Windows 桌面客戶端進行一系列魔改和美化。
準備工作
在開始美化 Notion 客戶端之前我們需要安裝一些工具，為接下來的魔改進行準備工作。下面的步驟在 Windows 10 Pro 19041.25 版本下進行，使用 Windows 上的軟件包管理工具 Scoop 進行安裝。
關聯閱讀：「一行代碼」搞定軟件安裝卸載，用 Scoop 管理你的 Windows 軟件
首先，Notion Enhancer 本身是一個 Python 腳本，我們需要安裝 Python 環境。打開 PowerShell，在其中輸入：
<code>scoop install python
/<code>
等待安裝完成即可。
接下來，由於 Notion 的桌面客戶端是 Electron 套殼應用，用 Node.js 作為其運行環境，因此我們需要安裝 Node.js 與 npm 包管理工具。在 PowerShell 中繼續輸入：
<code>scoop install nodejs
/<code>
等待安裝完成即可。
最後，我們需要使用 npm 包管理工具安裝 asar 工具，用來解密 Electron 應用包，從而改造 Electron 應用（也就是 Notion 客戶端）的內部代碼。在 PowerShell 中繼續輸入：
<code>npm install -g asar
/<code>
在 PowerShell 中輸入 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 腳本：
<code>python 'Customization Patcher.py'
/<code>
執行 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 即可：
<code>python 'Customization Remover.py'/<code>
將 Notion 客戶端恢復原樣
功能與配置
事實上，Notion Enhancer 為我們添加、修改並自定義了很多 Notion 客戶端的功能與樣式。
Windows 默認控件的修改
首先 Notion Enhancer 最大、最值得使用的功能特性就是將 Notion 原有的 Windows 菜單欄、工具欄與滾動條全部去掉，修改成了更符合 Notion 整體風格的樣式。下面是一個對比：
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 Enhancer 還為我們添加了隱藏/顯示 Notion 窗口的快捷鍵定義。
默認的隱藏 / 顯示 Notion 快捷鍵是 Ctrl + Shift + A，不過我們也可以自定義這一功能。在 Customization Patcher.py 中，第 34 行定義了快捷鍵 windowToggleHotkey 的變量，這裡我們就可以將默認定義的：
<code>windowToggleHotkey = "'ctrl+shift+a'"
/<code>
修改為我們自己的快捷鍵，比如 Win + Shift + N：
<code>windowToggleHotkey = "'super+shift+n'"
/<code>
這裡的修改需要重新運行 Customization Patcher.py，再次給 Notion 客戶端打補丁，才能讓快捷鍵生效。
添加任務欄設置圖標
最後，為了方便設置 Notion 開機自啟以及啟動的窗口樣式，Notion Enhancer 還添加了一個任務欄設置區域，方便我們設置 Notion 開啟啟動、自動隱藏窗口、自動最大化窗口與最小化到托盤等選項。
添加 Notion 任務欄設置圖標
小結
為了拯救 Notion 的 Windows 用戶於水深火熱之中，Notion Enhancer 的作者也是煞費苦心，為我們修改了 Notion 的界面並提供了諸多增強功能，包括能夠任意自定義 Notion 頁面樣式的入口：custom_style.css。
Notion Enhancer 目前已經更新至第四個版本，作者將在 Notion Enhancer - Notion 這一頁面持續更新工具及其相應的功能和配置方法，感興趣的同學可以持續關注。本文的介紹就到這裡，感謝閱讀。
閱讀更多 少數派 的文章
關鍵字: 軟件 客戶端 PowerShell
