PicGo

問題?

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

image

1. 推薦三個(gè)實(shí)用穩(wěn)定免費(fèi)的圖床

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跨平臺(tái))

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

3.下載地址

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

4. 應(yīng)用概述

4.1 PicGo是什么?

一個(gè)用于快速上傳圖片并獲取圖片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+)

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

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

• 支持修改快捷鍵，默認(rèn)快速上傳快捷鍵：

????command+shift+p（macOS）

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

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

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

6. 快速上手

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

6.1頂部欄上傳提示

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

1. 可以直接拖拽圖片到頂部欄PicGo圖標(biāo)處上傳。
2. 可以將圖片復(fù)制到剪貼板，然后點(diǎn)擊頂部欄PicGo圖標(biāo)，點(diǎn)擊等待上傳區(qū)的圖片，就會(huì)自動(dòng)上傳了。

fVEf5d.gif

6.2 主窗口上傳

在Mini窗口或者macOS的頂部欄圖標(biāo)處右鍵 -> 打開詳細(xì)窗口，即可打開主窗口。

fVERVe.md.png

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

7. 配置手冊(cè)

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 常見圖床配置

更多配置見官方手冊(cè)

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

7.1.1 SMMS圖床

配置項(xiàng)及說明：

{
  "token": "" // 通過SMMS后臺(tái)獲取的api token值
}

注冊(cè)并登錄smms后臺(tái)獲取token值。

image

7.1.2 GitHub圖床

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

  "token": "", // github token

  "path": "img/", // 自定義存儲(chǔ)路徑，比如img/

  "customUrl": "https://boy-maofeiyu.github.io/ossimages/", // 自定義域名，注意要加http://或者h(yuǎn)ttps://

  "branch": "master" // 分支名，默認(rèn)是main

}

1. 注冊(cè)Github

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

3. 生成一個(gè)token用于PicGo操作你的倉庫：

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

然后點(diǎn)擊Generate new token。

把repo的勾打上即可。然后翻到頁面最底部，點(diǎn)擊Generate token的綠色按鈕生成token。

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

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

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

7.1.3阿里云OSS

配置項(xiàng)及說明：

{

  "accessKeyId": "",

  "accessKeySecret": "",

  "bucket": "", // 存儲(chǔ)空間名

  "area": "", // 存儲(chǔ)區(qū)域代號(hào)

  "path": "", // 自定義存儲(chǔ)路徑

  "customUrl": "" // 自定義域名，注意要加http://或者h(yuǎn)ttps://

}

首先先在阿里云OSS的控制臺(tái)里找到你的accessKeyId和accessKeySecret：

創(chuàng)建一個(gè)bucket后，存儲(chǔ)空間名即為bucket:

確認(rèn)你的存儲(chǔ)區(qū)域的代碼：

也可以在bucket頁面找到：

存儲(chǔ)路徑比如img/的話，上傳的圖片會(huì)默認(rèn)放在OSS的img文件夾下。注意存儲(chǔ)路徑一定要以/結(jié)尾！存儲(chǔ)路徑是可選的，如果不需要請(qǐng)留空。

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

存儲(chǔ)路徑比如img/的話，上傳的圖片會(huì)默認(rèn)放在OSS的img文件夾下。注意存儲(chǔ)路徑一定要以/結(jié)尾！存儲(chǔ)路徑是可選的，如果不需要請(qǐng)留空。

8. PicGo設(shè)置

8.1 設(shè)置日志文件

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

image

8.2 自定義快捷鍵

會(huì)打開快捷鍵面板（v2.2.0+），可以選擇禁用或者啟用快捷鍵：

image

8.3 自定義鏈接格式

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

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

8.4 自動(dòng)時(shí)間戳命名

image

開啟之后會(huì)自動(dòng)將上傳的文件名替換成時(shí)間戳：

8.5 PicGo-Server設(shè)置

2.2版本之后，PicGo內(nèi)部會(huì)默認(rèn)開啟一個(gè)小型的服務(wù)器，用于配合其他應(yīng)用來調(diào)用PicGo進(jìn)行上傳。監(jiān)聽的地址推薦就默認(rèn)的 127.0.0.1 （本機(jī)），端口推薦默認(rèn)的 36677。當(dāng)然如果你不想要開啟也可以選擇關(guān)閉，只不過推薦你可以開啟~可以配合一些第三方工具實(shí)現(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打開控制臺(tái)

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 插入圖片時(shí)自動(dòng)上傳

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

2. 要啟用此功能，請(qǐng)?jiān)凇安迦霑r(shí)...”選項(xiàng)下選擇“上傳圖像”，如下面的屏幕截圖所示。
   然后，如果您希望“自動(dòng)上傳”僅適用于本地圖片，請(qǐng)只勾選Apply above rules to local images，

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

image

10.3 手動(dòng)上傳

10.3.1 上傳圖片

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

10.3.2 上傳所有本地圖片

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