Typora+PicGo-Core搭建個人在線筆記

1、本文檔解決的問題

Typora 是一款 Markdown 文檔編寫工具，也可以用來編寫日常的工作記錄。但是這個軟件有個小問題，就是如果文檔中插入了圖片，在跨機器查看文檔的時候圖片就沒法正常顯示。

好在 Typora 提供了一些插件可以解決這個問題，我們可以在編寫文檔時把圖片上傳到網絡上，這樣無論在哪裏，只要有網絡文檔就可以正常顯示。

可以存儲 Typora 的服務有很多，比如說 阿里雲、騰訊雲、SM.MS、七牛雲、GitHub等，但是上述的像阿里雲、騰訊雲都需要收費、而七牛雲有域名限制、GitHub網絡又不好。所以再三思索下決定使用 Gitee，這樣既可以存圖片，又可以存 markdown 文檔一舉兩得。

2、軟件安裝

我們需要下載兩個軟件：

• Typora 最新版本的安裝包

• Node 軟件安裝包（用來安裝插件）

2.1、Typora 安裝

下載完 Typora 之後，點擊安裝就可以了。如果想完成圖片自動上傳，則需要 Typora 支持上傳服務設定。也就是在 偏好設置 的 圖像 設置中要有下面這個選項纔可以。比較低的版本是沒有這個的，所以最好下載最新版。

2.2、插件安裝

安裝插件前需要先安裝 Node，安裝完之後執行如下命令可以檢驗是否安裝成功

C:\Users\denggh\Desktop>node -v
v12.16.3

需要用到的插件有兩個，他們是 PicGo-Core 和 gitee-uploader 。安裝的相關命令如下：

// 設置倉庫爲淘寶的，這樣下載速度就會比較快
C:\Users\denggh\Desktop>npm config set registry https://registry.npm.taobao.org

// 安裝 picgo-core
C:\Users\denggh\Desktop>npm install picgo -g

// 查看 picgo-core 安裝到哪裏了
C:\Users\denggh\Desktop>where picgo
C:\Users\denggh\AppData\Roaming\npm\picgo
C:\Users\denggh\AppData\Roaming\npm\picgo.cmd

// 安裝 gitee-uploader 插件
C:\Users\denggh\Desktop>picgo install gitee-uploader

picgo 默認安裝到 ~/AppData/Roaming/npm 目錄下。gitee-uploader 插件安裝到 ~/.picgo/node_modules 目錄下，如果不想放到這個目錄其實可以修改的。修改文件 ~/AppData/Roaming/npm/node_modules/picgo/dist/src/core/PicGo.js文件找到以下內容，修改後面這個 config.json 文件位置即可。

this.configPath = os_1.homedir() + '/.picgo/config.json';

2.3、Gitee 倉庫配置

我們登錄 Gitee 創建一個倉庫，倉庫需要公開的，不然圖片無法訪問。同時我們還需要創建一個倉庫的私人令牌。在個人中心 安全設置 私人令牌 哪裏就可以創建。

倉庫名稱就叫做 document 他有兩個分支：master markdown-picture 。master 分支用來存放 md 文檔，markdown-picture 用來存放圖片。裏面以年份作爲文件夾存放當年的編寫 md 文件的圖片。

參考：https://gitee.com/readiay/document

2.4、插件相關配置

我們找到config.json 文件，並修改他爲如下內容

{
  "picBed": {
    "current": "gitee",
    "uploader": "gitee",
    "gitee": {
      "branch": "markdown-picture", // 圖片上傳到這個分支
      "customPath": "",
      "customUrl": "",
      "path": "2020/", // 路徑
      "repo": "readiay/document", // <用戶名>/<倉庫名稱>
      "token": "34097jy0142b767hy64569baadeac247" // token 令牌
    }
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true
  },
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2020-05-07 11:43:43"
  }
}

然後進入 Typora 軟件，進行如下配置

4、測試運行

配置完之後，我們就可以進行 md 文檔編寫了，然後截圖之後直接拷貝到 md 文檔中選擇上傳圖片即可。他會自動把圖片的URL替換成對應的網絡圖片URL。