1. 程式人生 > >Typora+圖床詳解(小白都能學得會)

Typora+圖床詳解(小白都能學得會)

# Typora+圖床詳解(小白都能學得會) ## 1 瞭解工作 部落格中用的筆記軟體——Typora(Markdown語法) 部落格中用的圖床——阿里雲物件儲存(Object Storage Service,簡稱OSS) **圖床平臺介紹** 七牛雲 [七牛雲](https://portal.qiniu.com/), 很多大佬也是推薦,註冊認證後有10G永久免費空間,每月10G國內和10G國外流量,速度相當快,外掛支援比較多,有免費ssl證書,但https流量收費。 > 注意:七牛雲30天后會回收測試域名,因此你必須要繫結自己的已經備案的域名. 網易雲 [網易雲](https://www.163yun.com/help/documents/76809994847309824) NOS 物件儲存從三個維度進行計量收費:儲存容量、流量、介面呼叫次數。儲存容量0-50 GB是免費,下載流量在0-20 GB免費,每月前 10 萬次 Put 請求免費,每月前 100 萬次 Get 請求免費。 騰訊雲 [騰訊雲](https://cloud.tencent.com/)COS物件儲存服務,共50G免費儲存空間,每月10G免費下載流量,時長6個月。 阿里雲 [阿里雲OOS](https://oss.console.aliyun.com/) 不免費,但是個人用,費用不是特別貴。 **** 一般寫個部落格動態費錢的就是流量和請求部分。這可以說是喜悅中帶著淡淡悲傷,有很多人看你的部落格,你會很有成就感,但隨之而來還有你需要承擔的訪問費用。流量也有包月套餐,不過我這個部落格也沒有那麼多的訪問量,也就沒有購買,用的預設的按量計費。 **** 阿里雲作為圖床,保證是全中國最穩的**圖床工具人**了。![3030](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/3030.png) 我估計等我敲不動程式碼了,阿里雲也還活得好好的。所以圖片安全問題根本不用考慮。唯一有點難受的地方就是要花點錢。 **但是很便宜,半年才4.98元,還要啥自行車。**![8010](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/8010.png) **** ## 2 準備工作 1. 確保typora的版本在0.9.86及以上 - 開啟typora,選擇【幫助】➡【檢測更新】先升級一下版本 - 官網下載 (下載速度較慢) | [winx64](https://www.typora.io/windows/typora-setup-x64.exe) | [winx86](https://www.typora.io/windows/typora-setup-ia32.exe) | | ------------------------------------------------------------ | ------------------------------------------------------------ | | [mac](https://www.typora.io/download/Typora.dmg) | [linux](https://typora.io/linux/Typora-linux-x64.tar.gz) | - [騰訊下載點我](https://pc.qq.com/detail/1/detail_24041.html),大家選擇**普通下載**就可以了速度挺快的 - 我也給大家準備了不限速雲盤,點選下方下載 | [winx64](https://gmengshuai.lanzoui.com/iiuC3jdbh3i) | [winx86](https://gmengshuai.lanzoui.com/iiodhjdbcaf) | | ---------------------------------------------------- | ---------------------------------------------------- | | [mac](https://gmengshuai.lanzoui.com/irDucjdbm9e) | [linux](https://gmengshuai.lanzoui.com/iYsEgjdbluj) | 2. 確保下載了PicGo Core (command line) - 選擇【檔案】➡【偏好設定】,然後根據圖示進行操作 ![Snipaste_2020-12-13_22-16-21](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_22-16-21.png) ![Snipaste_2020-12-13_22-17-30](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_22-17-30.png) 下載 PicGo Core (command line),過程真的很慢![](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0170.png)(能夠富強上網則會快很多) 3. 確保下載了PicGo (app) - [官網下載點我](https://molunerfinn.com/PicGo/) - [github下載點我](https://github.com/Molunerfinn/PicGo/releases/tag/v2.2.2) - [不限速網盤下載點我](https://gmengshuai.lanzoui.com/iWbH4jdcref) **** ## 3 註冊並配置阿里雲 1. 訪問並註冊賬號 ​ [點我進行註冊,這裡我就不放圖了,加油,你可以的!](https://www.aliyun.com/?spm=5176.12818093.nav-right.dofficial.2d5016d0w77TOO) 2. 下面就假設你已經完成註冊並繫結實名身份 3. 登入阿里雲賬號,進入[物件儲存OSS服務](https://www.aliyun.com/product/oss?spm=5176.12825654.eofdhaal5.94.3dbd2c4ad4IbYI)頁面,直接點選折扣套餐。 ![Snipaste_2020-12-13_22-55-19](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_22-55-19.png) 4. 在折扣套餐介面購買一個儲存資源包。 ![Snipaste_2020-12-13_22-56-26](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_22-56-26.png) 5. 建立Bucket,根據圖示進行操作 ![Snipaste_2020-12-13_23-52-48](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_23-52-48.png) 6. 選擇【概覽】➡【建立Bucket】 ![Snipaste_2020-12-13_23-55-22](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_23-55-22.png) 7. 建立一個Bucket,填寫名稱並選擇==公共讀==。 ![Snipaste_2020-12-13_23-11-23](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_23-11-23.png) ![Snipaste_2020-12-13_23-12-36](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-13_23-12-36.png) 註冊至此終止![0480](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0480.png) **** ## 4 配置兩種PigGo 第一種:PicGo Core (command line) 【**較方便,推薦使用**】 第二種:PicGo (app) 【**需要另外下載軟體**】 **** #### 4.1 PicGo Core (command line)配置 1. 桌面上新建一個txt文字,並複製下面內容到裡面。 ```css { "picBed": { "uploader": "aliyun", "aliyun": { "accessKeyId": "", "accessKeySecret": "", "bucket": "", // 儲存空間名 "area": "", // 儲存區域代號 "path": "img/", // 自定義儲存路徑 "customUrl": "", // 自定義域名,注意要加 http://或者 https:// "options": "" // 針對圖片的一些字尾處理引數 PicGo 2.2.0+ PicGo-Core 1.4.0+ } }, "picgoPlugins": {} } ``` **上面資訊都是要通過阿里雲賬號獲取的** 2. 首先我們來獲取**accessKeyId**和**accessKeySecret** ![Snipaste_2020-12-14_13-10-03](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_13-10-03.png) ![Snipaste_2020-12-14_13-10-50](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_13-10-50.png) 3. **accessKeyId**和**accessKeySecret**填入到文字的對應位置 ![Snipaste_2020-12-14_13-12-44](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_13-12-44.png) 4. 回到之前的oss物件儲存 ![Snipaste_2020-12-14_13-40-18](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_13-40-18.png) 5. 點選概覽,將方框中的值填入到文字的對應位置 ![Snipaste_2020-12-14_13-30-10](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_13-30-10.png) 6. 這裡我提供一份完整修改後的作為參考。 ![Snipaste_2020-12-14_17-23-54](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_17-23-54.png) 7. 回到typora,依次 【檔案】 ➡ 【偏好設定】 ➡【影象】,選擇開啟配置檔案。 ![Snipaste_2020-12-14_17-29-14](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_17-29-14.png) 8. 將之前的txt文字的裡面的資訊,複製貼上到配置裡,並ctrl+s進行**儲存**。 配置至此終止![0000](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0000.png) **** #### 4.2 測試 1. 點選【驗證圖片上傳選項】測試,是否將圖片成功上傳。如果OK沒問題,那就可以開啟愉快地寫作之旅了。 ![Snipaste_2020-12-14_17-33-00](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_17-33-00.png) 2. 如果你看到下面這樣的頁面,**congratulation!!!**你成功了。![0450](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0450.png) ![image-20200615172046251](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/image-20200615172046251.png) 3. 如果你看到是下面這樣的頁面,此時不要慌 ![Snipaste_2020-12-14_18-09-04](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_18-09-04.png) 我們可以先嚐試拿一張圖片進行測試,發現已經能夠正常使用了 ![{33D1DD42-9965-40B2-9414-30BB4BCA4E07}](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/{33D1DD42-9965-40B2-9414-30BB4BCA4E07}.png) 上傳成功後,連結會自動轉換為阿里雲OSS的URL ![Snipaste_2020-12-14_20-13-12](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_20-13-12.png) 測試至此完畢![0480](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0480.png) **** #### 4.3 PicGo (app)配置 我認為PicGo (app) 的好處在於獨立。在沒有使用Typora的時候,我們也可以使用它單獨上傳圖片。 開啟軟體進行配置,這些配置基本就和PicGo Core類似。 ![Snipaste_2020-12-14_22-22-17](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_22-22-17.png) 任意選擇一個圖片進行上傳 ![Snipaste_2020-12-14_22-22-53](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_22-22-53.png) 上傳後在【相簿】中進行管理 ![Snipaste_2020-12-14_22-24-56](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_22-24-56.png) 配置至此終止![0000](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0000.png) **** ## 5 解決疑惑問題 #### 5.1 版本控制功能有必要開通嗎 ![Snipaste_2020-12-14_21-59-16](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_21-59-16.png) **什麼是OSS物件儲存的版本控制功能?** > OSS版本控制功能,將OSS資料的覆蓋和刪除操作以歷史版本的形式儲存下來,防止因誤刪除或誤覆蓋導致的資料丟失。該功能本身不額外收費,只對產生的歷史版本資料收取相應的儲存容量費用以及相應操作產生的請求、流量等費用。 可以參考文件說明:[版本控制介紹](https://link.zhihu.com/?target=https%3A//help.aliyun.com/document_detail/109695.html%3Fsource%3D5176.11533457%26userCode%3Dr3yteowb),官方文件中有詳細說明。 **版本控制功能收費嗎?如何收費?** 阿里雲OSS版本控制功能,本身功能是不收費的。只是開通版本控制功能後,會產生相應的歷史資料版本,而歷史資料版本是佔用儲存空間的,所以,版本控制功能只對產生的歷史版本資料收取相應的儲存容量費用以及相應操作產生的請求、流量等費用。 費用說明可以參考官方文件的OSS收費標準:[OSS計費方式詳解 - 阿里雲](https://link.zhihu.com/?target=https%3A//help.aliyun.com/document_detail/59636.html%3FuserCode%3Dr3yteowb) **OSS有必要開通版本控制功能嗎?** 版本控制是用來防止使用者誤操作導致資料丟失的,建議使用者根據實際情況選擇,如果資料比較重要建議開通。 **注意:**未開啟版本控制功能,資料刪除或被覆蓋後將無法找回。 **** #### 5.2 圖片上傳如何自動新增水印 關於如何加水印,官方文件比我說的清楚多了,也不難理解(比計費好理解),道友們移步[圖片水印](https://helpcdn.aliyun.com/document_detail/44957.html)![0461](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0461.png) **** ## 6 小結一下 **我寫作的流程:** 第一種: 1. 先在typora中寫好markdown文章 2. 可能有些圖片已經上傳,有些沒有上傳,沒有關係,最後我會點選【格式】➡【影象】 ➡【上傳所有本地圖片】 3. 偏好設定如下圖 ==萬萬小心:== 圖片名稱一定不要相同,它會進行覆蓋 ![Snipaste_2020-12-14_22-59-41](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/Snipaste_2020-12-14_22-59-41.png) 第二種: 1. 先在typora中寫好markdown文章 2. 對於圖片我建議先儲存在電腦中,然後一個一個地進行插入,它會自動自傳 3. 偏好設定如下圖 ==萬萬小心:== 圖片名稱一定不要相同,它會進行覆蓋 ![20201215160411111](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/20201215160411111.png) Typora+PicGo+阿里雲搭建圖床終於講完了。![0400](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/0400.png) 如果有一天大家看不見圖了,那說明我已經支付不起這費用了 ![2050](http://gmengshuai.oss-cn-beijing.aliyuncs.com/img/2