動態

詳情 返回 返回

Atom編寫Markdown將圖片到七牛圖牀 - 動態 詳情

前言
  • 七牛雲免費提供 30 天有效期的七牛融合 CDN 測試域名,也支持綁定自定義域名,但要求自定義的域名必須備案
  • 七牛雲每月會免費提供 10 GB 存儲空間、10 GB 下載流量、10 萬次 PUT 請求、100 萬次 GET 請求,但免費提供的存儲資源只支持 HTTP 協議訪問,若需要使用 HTTPS 協議,則需要按流量付費才能夠使用
  • Atom 編寫 Markdown 將圖片到七牛圖牀,第一種方法是安裝兩款插件,分別是:markdown-assistant + qiniu-uploader,不支持上傳本地文件到七牛雲,只支持將剪貼面板裏的圖片上傳到七牛雲,在新版本的 Atom 中存在兼容性問題
  • Atom 編寫 Markdown 將圖片到七牛圖牀,第二種方法直接安裝 md-writer-qiniu 插件,該插件是在 markdown-writer 的基礎上新增了七牛圖片上傳的功能,支持上傳本地圖片到七牛雲,支持將剪貼面板裏的圖片保存到本地或者上傳到七牛雲
Atom 安裝 md-writer-qiniu 插件
# 進入 Atom 本地的插件目錄
$ cd ~/.atom/packages

# 克隆代碼,文件夾的名稱必須是 markdown-writer ,即需要和 packagename 一致,否則插件無法正常使用
$ git clone https://github.com/chenghm123/md-writer-qiniu.git markdown-writer

# 進入源碼目錄
$ cd markdown-writer

# 安裝依賴
$ npm install

# 重啓 Atom
md-writer-qiniu 快捷鍵衝突

md-writer-qiniu 的快捷鍵默認是 shift-ctrl-i,可能會與 toggle-dev-tools 的快捷鍵衝突,可以編輯 ~/.atom/keymap.cson 文件,更改 md-writer-qiniu 的快捷鍵,即 下面的 "shift-ctrl-v": "markdown-writer:insert-image"

$ vim ~/.atom/keymap.cson
".platform-linux atom-text-editor:not([mini])":
  "shift-ctrl-K": "markdown-writer:insert-link"
  "shift-ctrl-v": "markdown-writer:insert-image"
  "shift-ctrl-X": "markdown-writer:toggle-taskdone"
  "ctrl-i":       "markdown-writer:toggle-italic-text"
  "ctrl-b":       "markdown-writer:toggle-bold-text"
  "ctrl-'":       "markdown-writer:toggle-code-text"
  "ctrl-h":       "markdown-writer:toggle-strikethrough-text"
  "ctrl-1":       "markdown-writer:toggle-h1"
  "ctrl-2":       "markdown-writer:toggle-h2"
  "ctrl-3":       "markdown-writer:toggle-h3"
  "ctrl-4":       "markdown-writer:toggle-h4"
  "ctrl-5":       "markdown-writer:toggle-h5"
md-writer-qiniu 插件配置

首先註冊七牛雲的賬號,選擇”對象存儲”產品,然後創建存儲空間(必須設置為公開訪問),接着在 Atom 的插件配置中填寫以下內容即可。

  • Qiniu Bucket 是七牛雲存儲空間的名稱
  • Qiniu Domain 是七牛雲存儲空間的域名
  • AccessKey、SecretKey 即是在七牛雲中的 AK、SK

qiniu-upload-plugin-config-1

如果希望將剪貼面板裏的圖片保存到本地目錄,需要配置 Hexo 圖片的默認保存目錄,下述配置是將圖片保存在 source/asset/{year}/{month} 本地目錄下:

qiniu-upload-plugin-config-2

md-writer-qiniu 插件的使用
  • 使用快捷方式 shift-ctrl-i,調出圖片上傳的界面(如下圖),也可以導航到菜單: Packages --> Markdown Writer --> Markup --> Insert Image。在下面的操作完成後,默認按下”回車鍵“,即表示開始上傳圖片或者保存圖片到 Hexo 的圖片目錄。

qiniu-upload-plugin-ui-1

  • 第一種使用情況:當剪貼面板裏有圖片時,如果勾選了 “Save Image To”,則只會將剪貼面板裏的圖片保存到 Hexo 的圖片目錄,此時並不會上傳到七牛雲;若不勾選,則會將剪貼面板裏的圖片上傳到七牛雲。

qiniu-upload-plugin-ui-2

  • 第二種使用情況:當剪貼面板裏沒有圖片時,此時點擊 “Choose Local Image” 按鈕從本地選擇圖片,若勾選了 ”Copy Image To”,則只會當本地圖片保存到 Hexo 的圖片目錄,此時並不會上傳到七牛雲;若不勾選,則會將本地圖片上傳到七牛雲。

qiniu-upload-plugin-ui-3

使用總結:

  • 只要勾選了 ”Save Image To“ 或者 “Copy Image To” 選項,都不會將本地圖片或者剪貼面板裏的圖片上傳到七牛雲
  • 若不勾選 ”Save Image To“ 或者 “Copy Image To” 選項,默認會將本地圖片或者剪貼面板裏的圖片上傳到七牛雲
補充説明
  • 使用 md-writer-qiniu 插件將圖片上傳到七牛雲後,默認的圖片路徑是 {YYYY}/{MM}/{DD}/{HHmmss}{random-string}{extname} 的格式, 該插件不支持自定義七牛雲裏的圖片文件名
  • 若需要自定義七牛雲裏的圖片文件名,可以使用這個分支的 md-writer-qiniu 插件,支持使用路徑前綴,當不勾選“ Qiniu File Random Name” 選項時,使用的圖片路徑是 {keyPrefix}/{YYYY}/{MM}/{title}{extname},即可以使用 Title 作為圖片的文件名,具體配置如下圖:

markdown-writer-ext

本篇文章首發於Techgrow

Add a new 評論

Some HTML is okay.