Typora文章一鍵復制至博客

本文轉載自查看原文 2020-02-25 13:54 658 隨筆

一、背景

在用Typora寫博客文章時，首先是將文章寫好，為了讓文章更直觀，一般情況下會在文章中插入圖片（畢竟人是視覺動物，眼睛是十分強大的圖片處理器）。但是在將編輯好的文章復制粘貼至博客時，會發現圖片無法顯示，此時最笨的辦法就是一張張的圖片上傳至博客，可想效率之低下，於是在思考如何高效的將文章復制到博客。雖然，網絡上已經有了很多的辦法，但一直在嘗試是否能尋找到更便捷高效的方法，最后站在各路互聯網站巨人的肩膀寫下此博文。

二、解決方案

解決Typora圖片復制問題，其實本質就是各博客的API並非互聯互通，所以需要先要將本地的圖片上傳至互聯網上，然后博客才能訪問。所以思路已經很清楚了。

方案：雲平台（騰訊雲等）+上傳圖片插件（typora-plugins-win-img）

三、注冊雲賬號

1、注冊雲賬號

騰訊雲地址：https://cloud.tencent.com/

2、創建子用戶

進入“訪問管理”，然后點擊“用戶”，再點擊“用戶列表”，根據提示創建子用戶

然后，設置賬戶的訪問權限，搜索“QcloudCOSFullAccess”，然后勾選了“QcloudCOSFullAccess”即可。

訪問方式選擇“編程訪問”，最后點擊完成。

3、創建存儲桶

進入“對象管理”，然后點擊“存儲桶列表”，再點擊“創建存儲桶”，然后點擊“公有讀私有寫”，接着點擊“不加密”，確定。

創建桶，並給桶取名字

“創建存儲桶”完畢后，再在“桶列表”里選擇剛創建的桶，然后點擊“創建文件夾”，此處保存Typora插件上傳的圖片。

四、下載插件並配置

1、下載插件

下載地址：https://github.com/Thobian/typora-plugins-win-img

2、拷貝插件文件

將插件文件夾復制到Typora安裝目錄

將plugins文件夾復制至Typora安裝目錄下的app文件夾下，如圖所示：

3、配置window.html文件

來到Typora安裝目錄下的app文件夾下（比如：D:\Program Files\Typora\resources\app），修改window.html文件。

用編輯器打開window.html文件，搜索（Ctrl+F可調出搜索功能）代碼：

<script src="./app/window/frame.js" defer="defer"></script>

注意：搜索上述全部代碼可能搜索不到，此時局部搜索即可，比如搜索src="./app/window/frame.js"

搜到到后，在其后面追加：

<script src="./plugins/image/upload.js" defer="defer"></script>

如圖所示：

4、配置upload.js文件

同樣，來到Typora安裝目錄下的app文件夾下的plugins（比如：D:\Program Files\Typora\resources\app\plugins\image），plugins文件夾是從插件typora-plugins-win-img復制過來的。

配置upload.js文件，在剛復制的plugins下，進入到plugins/image，配置upload.js文件。

用文本編輯器打開upload.js文件，直接到達底部的$.image.init();一行，用以下部分替換之。

//為了你騰訊雲的安全，強烈建議你為這個操作添加一個單獨的子賬號，並只開啟API訪問權限
//添加子賬號：https://console.cloud.tencent.com/cam
//更多關於騰訊雲子賬號（CAM）說明：https://cloud.tencent.com/document/product/598/13665
$.image.init({
    target:'tencent',
    tencent : {
        Bucket: 'bucket-name',  // 對象存儲->存儲桶列表(存儲桶名稱就是Bucket)
        SecretId: 'SecretId',   // 訪問控制->用戶->用戶列表->用戶詳情->API密鑰 下查看
        SecretKey: 'SecretKey', // 訪問控制->用戶->用戶列表->用戶詳情->API密鑰 下查看
        Region: 'Region',       // 對象存儲->存儲桶列表(所屬地域中的英文就是Region)
        folder: 'typora',       // 可以把上傳的圖片都放到這個指定的文件夾下
    },
});