在上一篇博文中，我們通過(guò) GitHub+PicGo+jsDelivr 構(gòu)建了一個(gè)非常穩(wěn)定的圖床。

在我們寫(xiě)博客的過(guò)程中，經(jīng)常需要貼很多圖片，不管是本地、網(wǎng)絡(luò)、還是截圖；一般情況是先將圖片上傳到圖床，然后將鏈接粘貼到編輯器中，比如我之前使用 Sublime寫(xiě)Markdown 或 Typora 時(shí)就需要這樣，但這樣很不方便！

然而，好消息是，Typora 編輯器在新版本上(≥ 0.9.9.32 on macOS or 0.9.84 on Windows / Linux) 增加了一個(gè) 上傳圖片 的功能，通過(guò)第三方app或腳本在插入圖片時(shí)將圖片上傳到網(wǎng)絡(luò)，然后文檔中會(huì)直接插入圖片的圖床鏈接。

接下來(lái)介紹Typora如何通過(guò)PicGo來(lái)自動(dòng)/手動(dòng)上傳圖片到我的圖床。

前提

根據(jù)我的上一篇博文《Github + PicGo + jsDelivr 創(chuàng)建穩(wěn)定、免費(fèi)圖床》來(lái)創(chuàng)建一個(gè)GitHub圖床

設(shè)置Typora插入圖片時(shí)自動(dòng)上傳圖片

image

1. 進(jìn)入“文件 -> 偏好設(shè)置 -> 圖片”，在“插入圖片時(shí)”區(qū)域，下拉框選擇“上傳圖片”，勾選如下三項(xiàng)（勾選即開(kāi)啟自動(dòng)上傳）：

   • 對(duì)本地位置的圖片應(yīng)用上述規(guī)則

     • 即當(dāng)插入本地圖片（包括從菜單中插入，截圖，copy & paste，drag & drop）時(shí)，會(huì)自動(dòng)上傳該圖片

     • 插入截圖時(shí)，首先會(huì)將截圖自動(dòng)保存在本地，然后再自動(dòng)上傳

       本地路徑：C:\Users\<User>\AppData\Roaming\Typora\typora-user-images

   • 對(duì)網(wǎng)絡(luò)位置的圖片應(yīng)用上述規(guī)則

     • 重新上傳網(wǎng)絡(luò)圖片到你的圖床（我試驗(yàn)沒(méi)成功, 在最新的版本0.9.94中可以直接對(duì)網(wǎng)絡(luò)圖片上傳，右擊“上傳圖片”）

   • 允許根據(jù) YAML 設(shè)置自動(dòng)上傳圖片

     • 通過(guò)讀取 YAML 配置來(lái)決定是否自動(dòng)上傳圖片

     • 在勾選該選項(xiàng)的前提下，在 Markdown 文件的 YAML front matter 中添加如下配置，則Typora會(huì)在你插入圖片時(shí)自動(dòng)上傳圖片：

       typora-copy-images-to: upload

2. 在“上傳服務(wù)設(shè)定”區(qū)域：

   • 上傳服務(wù)：下拉框選擇 “PicGo(app)”，即通過(guò)PicGo app來(lái)上傳圖片

   • PicGo路徑：選擇PicGo的安裝路徑

   • 下載PicGo(app)：如果本地沒(méi)有安裝，點(diǎn)擊該按鈕時(shí)會(huì)引導(dǎo)到PicGo安裝頁(yè)面

   • 驗(yàn)證圖片上傳選項(xiàng)：點(diǎn)擊該按鈕來(lái)驗(yàn)證當(dāng)前配置是否能成功上傳圖片到圖床

     • 如果成功的話，會(huì)將Typora的兩個(gè)logo上傳到你的圖床，我的上傳到如下路徑了

       https://cdn.jsdelivr.net/gh/chenshifangcheng/PictureBed/BlogImg/20200712095247.png

       https://cdn.jsdelivr.net/gh/chenshifangcheng/PictureBed/BlogImg/20200712095248.png

       image

選擇手動(dòng)上傳圖片

1. 如下場(chǎng)景需手動(dòng)上傳：

   • 自動(dòng)上傳沒(méi)有成功
   • 未開(kāi)啟自動(dòng)上傳圖片的功能，即沒(méi)有勾選“插入圖片時(shí)”區(qū)域的選項(xiàng)

2. 圖片拖入、上傳或粘貼到 Typora后，右鍵圖片會(huì)看到一個(gè)“上傳圖片”的選項(xiàng)，點(diǎn)擊上傳即可

   image-20200712123354421

3. 如果文件中有許多本地圖片沒(méi)有上傳，則可以通過(guò)如下菜單一次性上傳

   菜單→ 格式 → 圖像 → 上傳所有本地圖片

   image-20200712124000782

參考鏈接

https://support.typora.io/Upload-Image/