PicGo+Typora圖床自動化

PicGo

問題?

最近突發(fā)奇想,想要寫技術(shù)博客來鞏固自己的知識,以備以后在工作中能夠直接復(fù)制粘貼,一直使用Typora作為編輯器的我,遇到了一個棘手的問題,Typora圖片常規(guī)存儲在assets目錄下,而大多數(shù)博客網(wǎng)站無法上傳多文件,且不支持zip,rar等壓縮包格式,因此我選擇了免費圖床通過OSS存儲來替代我本地的圖片資源. 一開始我選擇了手動上傳的方式,但是隨著圖片的增多,一張一張圖片上傳不僅慢,而且效率極低,手動上傳幾十張圖片真是讓我崩潰,于是我就開始聯(lián)想有沒有自動上傳的方法,我發(fā)現(xiàn)了PicGo+Typora實現(xiàn)圖床自動,大大提高了我撰寫開發(fā)文檔和發(fā)表個人博客的效率.

image

1. 推薦三個實用穩(wěn)定免費的圖床

https://www.hualigs.cn/

https://sm.ms/login

https://imgtu.com/album/yfVZn

2. 開發(fā)文檔

開發(fā)文檔

https://picgo.github.io/PicGo-Doc/zh/guide/config.html

API開發(fā)文檔

https://picgo.github.io/PicGo-Core-Doc/

自主構(gòu)建PicGo(Vue跨平臺)

https://molunerfinn.com/tags/Electron-vue/

3.下載地址

https://github.com/Molunerfinn/PicGo/releases

4. 應(yīng)用概述

4.1 PicGo是什么?

一個用于快速上傳圖片并獲取圖片URL 鏈接的工具

4.2 兼容性可自研

PicGo 本體支持如下圖床:

  • 七牛圖床 v1.0
  • 騰訊云 COS v4\v5 版本 v1.1 & v1.5.0
  • 又拍云 v1.2.0
  • GitHub v1.5.0
  • SM.MS V2 v2.3.0-beta.0
  • 阿里云 OSS v1.6.0
  • Imgur v1.6.0

5. 功能介紹

  • 支持拖拽圖片上傳

  • 支持快捷鍵上傳剪貼板里第一張圖片

  • Windows 和 macOS 支持右鍵圖片文件通過菜單上傳 (v2.1.0+)

  • 上傳圖片后自動復(fù)制鏈接到剪貼板

  • 支持自定義復(fù)制到剪貼板的鏈接格式

  • 支持修改快捷鍵,默認快速上傳快捷鍵:

????command+shift+p(macOS)

???? control+shift+p(Windows\Linux)

  • 支持插件擴展開發(fā)

  • 支持通過發(fā)送 HTTP 請求調(diào)用 PicGo 上傳(v2.2.0+)

6. 快速上手

注意:確保安裝了node.js≥8

6.1頂部欄上傳提示

頂部欄上傳只支持macOS系統(tǒng)。

  1. 可以直接拖拽圖片到頂部欄PicGo圖標處上傳。
  2. 可以將圖片復(fù)制到剪貼板,然后點擊頂部欄PicGo圖標,點擊等待上傳區(qū)的圖片,就會自動上傳了。
fVEf5d.gif

6.2 主窗口上傳

在Mini窗口或者macOS的頂部欄圖標處右鍵 -> 打開詳細窗口,即可打開主窗口。

fVERVe.md.png
  1. 直接在主窗口上傳區(qū)域拖拽圖片上傳。
  2. 直接在主窗口上傳區(qū)域點擊,然后彈出文件瀏覽器后選擇圖片上傳。
  3. 可以將圖片復(fù)制到剪貼板,然后點擊剪貼板圖片上傳按鈕來上傳。

7. 配置手冊

PicGo的配置文件在不同系統(tǒng)里是不一樣的。

  • Windows: %APPDATA%\picgo\data.json<br />* Linux: $XDG_CONFIG_HOME/picgo/data.json or ~/.config/picgo/data.json<br />* macOS: ~/Library/Application\ Support/picgo/data.json<br />舉例,在windows里你可以在:
    C:\Users\你的用戶名\AppData\Roaming\picgo\data.json找到它。
    在linux里你可以在:
    ~/.config/picgo/data.json里找到它。
    macOS同理。

7.1 常見圖床配置

更多配置見官方手冊

https://picgo.github.io/PicGo-Doc/zh/guide/config.html#imgur圖床

7.1.1 SMMS圖床

配置項及說明:

{
  "token": "" // 通過SMMS后臺獲取的api token值
}

注冊并登錄smms后臺獲取token值。

image

7.1.2 GitHub圖床

{
  "repo": "ossimages", // 倉庫名,格式是username/reponame

  "token": "", // github token

  "path": "img/", // 自定義存儲路徑,比如img/

  "customUrl": "https://boy-maofeiyu.github.io/ossimages/", // 自定義域名,注意要加http://或者https://

  "branch": "master" // 分支名,默認是main

}

1. 注冊Github

2. 新建一個倉庫,記下你取的倉庫名。

3. 生成一個token用于PicGo操作你的倉庫:

訪問:https://github.com/settings/tokens

然后點擊Generate new token

repo的勾打上即可。然后翻到頁面最底部,點擊Generate token的綠色按鈕生成token。

注意: 這個token生成后只會顯示一次!你要把這個token復(fù)制一下存到其他地方以備以后要用。

注意: 倉庫名的格式是用戶名/倉庫,比如我創(chuàng)建了一個叫做test的倉庫,在PicGo里我要設(shè)定的倉庫名就是Molunerfinn/test。一般我們選擇main分支即可。然后記得點擊確定以生效,然后可以點擊設(shè)為默認圖床來確保上傳的圖床是GitHub。

至此配置完畢,已經(jīng)可以使用了。當你上傳的時候,你會發(fā)現(xiàn)你的倉庫里也會增加新的圖片了:

7.1.3阿里云OSS

配置項及說明:

{

  "accessKeyId": "",

  "accessKeySecret": "",

  "bucket": "", // 存儲空間名

  "area": "", // 存儲區(qū)域代號

  "path": "", // 自定義存儲路徑

  "customUrl": "" // 自定義域名,注意要加http://或者https://

}

首先先在阿里云OSS的控制臺里找到你的accessKeyIdaccessKeySecret

創(chuàng)建一個bucket后,存儲空間名即為bucket:

確認你的存儲區(qū)域的代碼:

也可以在bucket頁面找到:

存儲路徑比如img/的話,上傳的圖片會默認放在OSS的img文件夾下。注意存儲路徑一定要以/結(jié)尾!存儲路徑是可選的,如果不需要請留空。

如上圖,存儲區(qū)域就是oss-cn-beijing

存儲路徑比如img/的話,上傳的圖片會默認放在OSS的img文件夾下。注意存儲路徑一定要以/結(jié)尾!存儲路徑是可選的,如果不需要請留空。

8. PicGo設(shè)置

8.1 設(shè)置日志文件

你可以在這個設(shè)置里面打開日志文件查看,也可以設(shè)置輸出的日志類型(比如成功、失敗或者不輸出等)。

image

8.2 自定義快捷鍵

會打開快捷鍵面板(v2.2.0+),可以選擇禁用或者啟用快捷鍵:

image

8.3 自定義鏈接格式

PicGo預(yù)置的有四種鏈接格式:MarkdownHTML \ URL \ UBB

如果你都不喜歡,想要自定義鏈接格式,可以選擇Custom,然后在PicGo設(shè)置里點擊自定義鏈接格式,然后你可以配置自己想要的復(fù)制的鏈接格式。

8.4 自動時間戳命名

image

開啟之后會自動將上傳的文件名替換成時間戳:

8.5 PicGo-Server設(shè)置

2.2版本之后,PicGo內(nèi)部會默認開啟一個小型的服務(wù)器,用于配合其他應(yīng)用來調(diào)用PicGo進行上傳。監(jiān)聽的地址推薦就默認的 127.0.0.1 (本機),端口推薦默認的 36677。當然如果你不想要開啟也可以選擇關(guān)閉,只不過推薦你可以開啟~可以配合一些第三方工具實現(xiàn)很方便的上傳工作流。

https://picgo.github.io/PicGo-Doc/zh/guide/advance.html#http調(diào)用上傳剪貼板圖片

9. 插件安裝

9.1 b站插件

image

9.1.1 獲取SESSDATA

  1. 登錄B站

  2. F12打開控制臺

  3. 找到SESSDATA復(fù)制即可

image

10. Typora+PicGo解放生產(chǎn)力

10.1 Typora配置文檔

Typora插入圖片配置

https://support.typora.io/Images/#when-insert-images

Typora上傳服務(wù)配置

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

image
image

10.2 插入圖片時自動上傳

  1. 用戶可以告訴 Typora 在插入時自動上傳圖像(包括從菜單、Touch Bar、通過復(fù)制粘貼或拖放插入圖像)。

  2. 要啟用此功能,請在“插入時...”選項下選擇“上傳圖像”,如下面的屏幕截圖所示。
    然后,如果您希望“自動上傳”僅適用于本地圖片,請只勾選Apply above rules to local images,

  3. 如果您還想重新上傳已經(jīng)托管在遠程網(wǎng)站上的圖片,您也可以勾選Apply above rules to online images。

image

10.3 手動上傳

10.3.1 上傳圖片

您可以右鍵單擊圖像,然后單擊“上傳圖像”以使用首選項面板中配置的應(yīng)用程序上傳所選圖像。

10.3.2 上傳所有本地圖片

如果您的 Markdown 文件包含大量本地圖片,并且您想一鍵上傳所有圖片,您可以單擊菜單 → FormatImageUpload All Local Images上傳所有本地圖片。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容