> 本文非常適合 Electron 入門選手，牆裂推薦！ 

本文作者：HelloGitHub-蔡文心

大家好！這裡是 HelloGitHub 推出的[《講解開源專案》](https://github.com/HelloGitHub-Team/Article)系列，今天給大家帶來的一款基於 Electron 和 PHP 實現的**桌面腦圖工具**開源專案——**DesktopNaotu**。 不知道各位小夥伴有沒有發現，現在許多工作崗位與圖表製作的接觸越來越多，時不時你就會接到個加急製作圖表任務。市面上的多數圖表製作軟體要麼收費，要麼讓充 VIP。充個月卡，很有可能只用 1 次，就沒用了。這兩件事加在一起就像渣 * 一邊 PUA 你，一邊還騙你錢！ 如果你身邊有這樣的朋友，請介紹給我，我來負責。 如果你沒有，那你現在有了，因為很不幸我就是被 PUA 的一個  好產品收費當然無可厚非，不過你可是 HG 的讀者，而我們 HG 的背後是開源世界！今天帶來的 DesktopNaotu 是一個開源專案，一個完全免費的腦圖製作工具。話不多說，讓我們來看看它的使用說明和功能吧！ ## 一、介紹 DesktopNaotu 是基於百度腦圖的本地化版本，能夠幫助你在沒有網際網路環境的情況下，依然可以使用腦圖工具。 > 官網：https://inaotu.org/  ### 1.1 跨平臺 DesktopNaotu 目前支援 macOS、Linux 和 Windows 7/10。 ### 1.2 功能 - 包含百度腦圖的基本功能 - 支援本地 .km 檔案的操作 - 支援拖拽開啟 .km 檔案 - 支援關聯開啟 .km 檔案 - 支援自動儲存檔案功能 - 支援匯出多種格式檔案 - 提供 **百度腦圖** 檔案的下載方式 - 提供 **ProcessOn** 思維導圖的下載方式 ## 二、安裝 ### 2.1 下載安裝包 - 百度雲：https://pan.baidu.com/s/1jHNBL7C - GitHub：https://github.com/NaoTu/DesktopNaotu/releases ### 2.2 解壓 將 DesktopNaotu-darwin-x64 資料夾解壓至應用程式目錄。  ### 2.3 啟動 好了，到這一步軟體已經能夠啟動了，但是大家可能注意到了選單怎麼是英文的呢，官網示例明明是中文的呀。沒錯這裡的確是有個 bug，不過我已經找到了解決方案，請看下一步：  ### 2.4 解決語言問題 目前測試了 Windows10 和 macOS 兩個較為常用的平臺，發現在 Windows10 下安裝後能夠顯示中文語言。所以如果是 Windows10 使用者就可以跳過這塊內容了。 像我一樣想要使用中文選單的 macOS 使用者請放心，我已將幫你們趟過這個坑了。  #### 2.4.1 語言設定 在終端輸入以下命令： ```shell cd '~/Library/Application Support/desktopnaotu' vi naotu.config.json ``` 接下來會看到以下資訊，將其中的 `locale: en` 改為 `locale: zh_CN`： ```json { "locale": "en", "defSavePath": "/Users/caim014/Library/Application Support/desktopnaotu/backup", "isAutoSave": true, "recentMaxNum": 5, "recently": [{ "time": "2021-01-21 18:07:58", "path": "/Users/caim014/Library/Application Support/desktopnaotu/backup/Main Topic1.km" }, { "time": "2021-01-20 15:57:05", "path": "/Users/caim014/Library/Application Support/desktopnaotu/backup/Main Topic.km" }], "version": "v0.1" } ``` 最後 Esc 並輸入 `:wq` 後回車。重啟 Desktopnaotu 程式就能看到效果了。  好啦，到這為止你就可以正常使用 Desktopnaotu 來繪製腦圖了。 ## 三、技術棧 前端： - Electron：使用了 Electron 實現跨平臺應用開發 - TypeScript 後端：PHP ## 四、最後 在今天的文章中比較有意思的是設定語言問題，由於官方也沒有針對這個問題做解釋，加上之前我也沒有接觸過 Electron 框架，對桌面程式的配置檔案也沒有太多瞭解。為了解決語言設定問題，也是費了很大一番功夫，當然也可能是我比較菜: ) 1. 查閱專案倉庫的 issue，沒有找到相關提問 2. 加入官方群詢問官方。官方開發手邊沒有 Mac，無法直接幫忙解決，但是給了重要線索—— `naotu.config.json` 檔案 3. 使用 asar 工具解壓 app.asar 在根目錄尋找 `naotu.config.json` 檔案。繞了很大的圈子還沒解決，因為不在根目錄下 最後,克隆程式碼到本地在編譯時在控制檯輸出發現了 `naotu.config.json` 檔案的路徑。過程中也想放棄推薦這個開源專案，雖然我也可以只拿 Win10 平臺做演示，但我認為這就等於將《開源講解》中的**講解**拋棄了。 這也算是做這個系列的樂趣之一了，之後也會給官方提交 PR 在 Readme 中補充這一點。 我是 HelloGitHub 團隊的文心，如果你喜歡這篇文章，請給我點個贊吧，這將是我繼續堅持下去的最大動力！ --- 關注 **HelloGitHub 公眾號** 收到第一時間的更新。 還有更多開源專案的介紹和寶藏專案等待你的發掘。