Notion客戶端不好看?手把手教你美化它。

安哥拉95發表於2021-05-11

圖片

題圖:來自 Dribbble @Alexander Shatov

Hello 大家好,我是安哥。

今天繼續來介紹介紹多合一的筆記工具 Notion 的一些用法,包含美化客戶端、為網頁版 Notion 新增側邊目錄,以及解決 Notion 匯出 Markdown 圖片丟失的問題。

01. 美化 Notion 客戶端

下圖是 Notion Windows 客戶端美化之前預設的介面:

圖片

再給各位看一下美化之後的效果,作為對比:

變化最明顯的地方在於,美化之後的客戶端去掉了頂部左上角的頁面標題和工具欄,原先位於下方的使用者名稱移動到了左側的頂部,且右側的最小化、關閉按鈕的位置向下移動了,看起來更舒服。

圖片

美化 Notion 客戶端,需要為我們電腦安裝一個名為 Notion enhancer 的外掛,這個外掛除了可以美化客戶端,還可以為客戶端增加一些額外的功能,例如視窗置頂、滑動到頁面頂部、字數統計等。

圖片

安裝 Notion enhancer 外掛之前,需要為你的電腦安裝 Node.js ,它是一個程式設計師經常會用到的 JavaScript 執行環境,可通過它整合的 npm 包管理工具來安裝我們需要的 Notion 美化外掛。

如果看不懂上面的內容也沒關係,開啟 Node.js 官網,選擇下載左側的 14.16.1 版本,下載之後按照普通軟體的安裝——點選多次「下一步」——直至完成安裝。

圖片

Node.js 官網: nodejs.org/en/

在進行下面的操作之前,請先徹底退出正在執行的 Notion 程式,保險起見,你可以使用工作管理員關閉當前正在執行的 Notion。

使用快捷鍵 Win + S 開啟 Windows 自帶的搜尋功能,輸入 cmd,上方會返回「命令提示符」,右擊此選項,選擇「以管理員身份執行」。

圖片

在開啟的命令列視窗中,輸入 npm i -g notion-enhancer 並按下Enter鍵,等待下方返回外掛的版本號 notion-enhancer@0.10.2 ,則表示完成了美化外掛的安裝。

image.png

但是,安裝這個外掛之後,會導致 Notion 無法正常開啟,這可能是因為外掛與 Notion 不相容所導致的,因此我們還需要對安裝的外掛程式碼進行一點小修改。

按照路徑 C:\Users*電腦使用者名稱*\AppData\Roaming\npm\node_modules\notion-enhancer\mods\core 開啟外掛安裝的位置。

對於不同的電腦,路徑中的「電腦使用者名稱」並不是統一的,需要根據你的使用者名稱進行相應的變化。

下圖就是美化外掛在我電腦上的安裝位置,我們需要**修改的檔案有兩個:client.js 和 createWindow.js **。

圖片

右擊需要修改的 client.js 檔案,選擇「開啟方式」,你可以選擇以「記事本」開啟,也可以使用專業的程式碼編輯器,例如 Visual Studio Code 開啟。

這裡建議使用程式碼編輯器開啟,因為等會找起程式碼來比較方便。

圖片

開啟 client.js 之後,找到第 108 行程式碼,這時就可以體現出使用程式碼編輯器開啟檔案的好處了:它會在檔案的左側欄顯示當前的程式碼行數

先複製下方的程式碼,接著用滑鼠選中第 108 行的內容,使用 Ctrl + V **貼上替換 **client.js 檔案中原有的程式碼。

!document.querySelector('.notion-topbar > div[style*="display: flex"]')
複製程式碼

圖片

替換之後,點選軟體左上角的「File」,選擇「Save」儲存剛做出的變化,當然直接使用快捷鍵 Ctrl + S,同樣可以儲存修改。

圖片

接著開啟另外一個需要修改的檔案 createWindow.js ,找到第 19 行,會發現這一行是空白的,我們需要往這一行新增新的程式碼。

圖片

複製下方的程式碼,將其貼上到上圖的第 19 行空白處,接著同樣按下 Ctrl + S,儲存剛作出的修改。

__exports.getIndexUrl = require(`${helpers
    .getNotionResources()
    .replace(/\\/g, '/')}/app/helpers/urlHelpers.js`).getIndexUrl;
複製程式碼

如果你覺得上面修改兩個檔案程式碼的操作比較麻煩,可以考慮另外一種方法:下載我修改好的兩個檔案,將其放到 Notion enhancer 外掛的安裝位置,替換原有的檔案。

替換檔案下載連結: wwx.lanzoui.com/iNIVmov5hna

完成以上操作之後,重啟 Notion,Notion 就可以正常開啟了,細心的朋友可能還會發現,桌面右下角工作列的 Notion 圖示也變了

圖片

右擊 Notion 圖示,會發現彈出的皮膚中的選項也變了,這裡我們選擇「Enhancements」,開啟 Notion 功能增強皮膚

圖片

開啟的增強皮膚,會在右側以一個獨立的小視窗顯示,在增強皮膚中,我們可以看到外掛提供的多項功能。

例如開啟「always on top」功能之後,它會在 Notion 的右上角增加一個「視窗置頂」的按鈕,點選按鈕就可以將 Notion 置於其他軟體視窗的上方。

圖片

此外,我們還可以更換 Notion 預設的主題,下圖是啟用「cherry cola」(櫻花可樂??) 主題之後的效果:

圖片

每次開啟某個功能之後,它不會即刻顯示出相應的功能或效果,需要右擊右下角的 Notion 圖示,選擇「Relaunch」,重新啟動 Notion,才可以看到剛剛啟用的功能。

圖片

關於這個外掛的更多功能,這裡就不展開介紹了,留給感興趣的朋友去探索吧~

如果你覺得這個美化外掛對你有幫助的話,請不要忘了前去 GitHub 網站,給這個專案的開發者點個 Star

你的 Star,就像是「一鍵三連」一樣,可能就是讓這個專案的開發者繼續維護下去的動力。

圖片

notion-enhancer GitHub 專案地址: github.com/notion-enha…

02. Notion Boost

之前在一篇文章中說到,Notion 不像 wolai 那樣——會在頁面的右側自動生成「懸浮目錄」,導致在 Notion 中檢視長文件並不是很方便。

後來有位朋友在留言區向我安利了一個瀏覽器外掛「Notion Boost」,它可以在網頁版的 Notion 側邊欄自動生成目錄,效果如下圖所示。

這個目錄屬於固定目錄,當你往下滑動時,它會一直固定在右側邊欄,不會因為你滑動到頁面下方,就被隱藏起來,可以說是彌補了 /table of contents 命令的不足。

圖片

這個外掛不止有生成側邊目錄的功能,還有其他額外的功能,例如像前面介紹的 Notion enhancer 外掛內建的滑動到頁面頂部的功能,一些可免費使用,有些需要付費後才能解鎖。

圖片

Notion Boost 外掛安裝地址: www.crx4chrome.com/crx/217033/

03. 將內容匯出為 Markdown

Notion 雖然支援將文件匯出為 Markdown,但自帶的匯出功能存在一個致命的問題:當匯出的文件包含較多圖片時,圖片會丟失

圖片

之所以會想到將 Notion 文件匯出 Markdown 檔案,是考慮到未來如果自己不再使用 Notion,我存放在 Notion 的資料該如何遷移的問題。

為了解決 Notion 匯出 Markdown 圖片丟失的問題,我測試了兩種藉助第三方工具匯出 Markdown 的方法:

一種是由 @王樹義 老師寫的一個工具「Notion Markdown Exporter」,這個工具是基於 GitHub 上的一個專案「notion2md」發展而來的,不過實測已經無法使用了。

圖片

線上工具 Notion Markdown Exporter 網址: notion-to-markdown.herokuapp.com/

另外一個從 Notion 中匯出 Markdown 的方法,則需要用到一個瀏覽器外掛「簡悅」,實測匯出的 Markdown 文件還是可以接受的,解決了圖片匯出丟失的問題

圖片

簡悅外掛支援的瀏覽器列表如下,你可以從瀏覽器的應用商店下載,也可以從官網下載外掛的 crx 安裝包。

圖片

簡悅官網: ksria.com/simpread/

使用簡悅外掛將 Notion 文件匯出為 Markdown 的流程是這樣的:開啟網頁版的 Notion 文件 → 使用簡悅外掛進入閱讀模式 → 匯出為本地 Markdown 文件。

由於 Notion 的頁面元素比較特殊,可能包含我們嵌入的各種元件,例如程式碼、視訊媒體等,直接使用外掛進入閱讀模式,會遇到內容提取失敗的問題。

圖片

因此,在使用簡悅外掛之前,需要先對外掛進行設定,新增外掛作者提供的 Notion 閱讀模式適配站點。

圖片

如何在 Notion 使用簡悅的閱讀模式: github.com/Kenshin/sim…

點選瀏覽器右上角安裝的簡悅外掛,選擇「選項」,開啟外掛的設定頁面。

圖片

切換到「站點管理」選項卡,將下面的連結貼上到頁面的「第三方適配源」中,再點選下方的「匯入到第三方適配列表」。

https://gist.github.com/Kenshin/aa3188b22f2d5dcd130610ce41cf6a7b/raw/website_list.json
複製程式碼

圖片

接著切換到「高階設定」選項卡,往下滑動頁面,找到「延遲載入列表」,在其中新增 Notion 的域名 notion.so 。

圖片

完成以上操作之後,回到網頁版的 Notion 頁面,滑鼠左鍵單擊簡悅外掛圖示,就可以進入簡悅提供的閱讀模式了。

圖片

進入閱讀模式之後,點選右下角的更多按鈕「…」,將開啟的皮膚切換到「動作」,匯出中提供了「匯出為離線 Markdown」的選項。

圖片

匯出之後,為了檢視匯出的 Markdown 文件的效果,我在 VS Code 中開啟了由簡悅匯出的 Markdown 文件,效果如下圖,圖片沒有丟失,Perfect!

左側是 Markdown 文件渲染前,右側是渲染後的效果

以上就是本次想和你分享的內容。
看完文章如果覺得對你有幫助的話,別忘了點選底部的「點贊/在看」鼓勵一下我,謝謝。

相關文章