Typora + PicGo-Core + Github 實現圖片上傳到Github

為了解決為知筆記使用Typora編輯markdown文件圖片丟失的問題，我采用了PicGo-Core + Github實現了自定圖床的功能。

下載PicGo-Core

由於我的電腦有nodejs環境，所以我使用的是npm命令安裝picgo, 命令如下：

npm install picgo -g

安裝完成后，檢查命令行輸出, 記錄下紅色框內的路徑。

輸入命令查看版本，如果有輸出則添加成功。

picgo -v

安裝github-plus

官方提供的github上傳圖庫不好用，安裝一款新的上傳插件github-plus, 命令行執行：

picgo install github-plus

安裝成功后會有提示。

Typora圖像設置

在Typora中配置圖像上傳信息。

設置PicGo的配置信息

如上圖所示，分為2個步驟：

1. 上傳服務選擇PicGo-Core(command line)
2. 打開配置文件，在打開的配置文件，添加相關信息。
   

   {
    "picBed": {
      "uploader": "githubPlus",
      "current": "githubPlus",
      "githubPlus": {
        "branch": "master",// 倉庫分支
        "customUrl": "https://cdn.jsdelivr.net/gh/jxiaow/cdn-images@latest", // 訪問的自定義url
        "origin": "github", // 存放的圖片類型
        "repo": "jxiaow/cdn-images", // 存放圖片的倉庫
        "path": "blog-images",// 存放圖片的倉庫目錄下的文件夾
        "token": "" // 訪問github的倉庫的token, 不知道怎么設置的自行百度
      }
    },
    "picgoPlugins": {
      "picgo-plugin-github-plus": true // 啟用github-plus插件
    },
    "picgo-plugin-github-plus": {
      "lastSync": "2020-11-05 07:54:47"
    }
   }

   測試配置

   根據上述配置完畢后我們需要進行測試鏈接是否成功，在測試之前還要進行如圖所示的修改：
   

3. 上傳服務修改為Custom Command
4. 自定義命令 ： picgo upload
5. 點擊驗證圖片上傳選項
6. 如果顯示驗證成功，則表示配置完成。

圖片上傳

將圖片拖入Typora中，然后在圖片單擊右鍵，圖片上傳即可。

安裝文件重命名插件 picgo-plugin-rename-file

picgo-plugin-rename-file 插件可以幫我們安裝一定的規則將文件進行重命名，具體設置請看github。

輸入一下命令安裝:

picgo install rename-file

安裝完成后，打開picgo的配置文件C:\Users\xxx\.picgo\config.json末尾最后一個大括號前添加一下信息即可。

,
"picgo-plugin-rename-file": {
    "format": "{y}/{m}/{d}/{hash}-{origin}-{rand:6}"
}

添加水印

注意：此插件目前會導致文件上傳重命名插件不生效

插件地址: picgo-plugin-watermark ，watermark插件可以幫我們在上傳圖片的時候添加水印。

安裝命令：

picgo install watermark

安裝成功后，C:\Users\xxx\.picgo\config.json末尾最后一個大括號前添加一下信息即可。

,
"picgo-plugin-watermark": { // 以下配置信息參考插件地址說明
    "text": "jxiaow", // 水印名稱
    "fontSize": 18, // 水印字體大小
    "position":"rm" // 水印位置
},

注意：由於這個插件安裝過程中需要下載字體，會導致下載特別慢，盡可能使用代理。

website: xiaowujiang.cn

來自為知筆記(Wiz)

附件列表