好用的Markdown,必須配上好用的圖床!

2021-03-02 果子學生信
果子薦讀

今天熊投稿的帖子,我要強烈推薦。
老手直接往下看,新手肯定被圖床這兩個字給整懵了,字都認識,就是不知道什麼意思。可以直接顧名思義,

圖床,就是圖的床,是圖休息的地方。

我們的所有帖子都是用markdown格式寫的,這種格式的好處就是,不需要關注排版,文件小極其容易分享。markdown中,所有的圖片都是一個連接,但是渲染後就可以看到圖片。

這個連結指向的就是圖床,我們把自己想要展示的圖片上傳到圖床,然後他會返回一個連結,以後只要用這個連結就指向了這個張圖片。
在一個文檔裡面,有100張圖片,可能就會很大,但是全部變成連結後就很小了,而且可以直接把連結拷給別人。

那麼如何設置屬於自己的圖床,如何方便地上傳圖片獲取連結就是本文的內容了,最終這篇帖子還展示了一些黑科技,比如如何自動讓100張本地圖片自動轉換為圖床連結,解放生產力。

以下是正文

首先說明一點,因為本文的讀者中可能單獨使用 macOS 的為少數,所以下文介紹的所有工具儘量滿足雙平臺通用(Windows和macOS)。

它們不一定是在 macOS 的最佳選擇,如果你僅使用 macOS,文章中提到的思路和工具僅供參考。如果你同時在使用PC 和 Mac,那麼這是我目前摸索出來的比較滿意的雙平臺通用方案,希望對你有所幫助。

雲伺服器配置

可以作為圖床的雲伺服器有很多,例如主打免費的 SM.MS 圖床(已經推出付費套餐)主做雲存儲七牛圖床和又拍雲等等。

如果要說免費(白嫖),目前我比較推薦的圖床是 GitHub 圖床,原因是 GitHub 的使用對多數有 md 圖床需要的人來說應該都不陌生,而且這個網站畢竟還是專業的,跑路可能性極小。

如果要說付費的雲存儲,我目前使用的是騰訊雲 COS, 這個東西在阿里雲裡叫 OSS,本質上都是一樣的。之所以使用騰訊雲的對象存儲,是因為有一個直接複製圖片到微信公眾號編輯器的需求,其它家因為防盜鏈的原因都無法正常複製圖片,但是騰訊雲在微信公眾號編輯器裡還是異常流暢的。如果沒有這個需求,阿里雲和騰訊雲並沒有什麼差別。

接下來以 騰訊雲,https://cloud.tencent.com/ 註冊為例,首先註冊登陸自然不必多說。然後為了讓圖床和寫作工具可以連接到你的騰訊雲,那麼就需要創建密鑰供這些工具使用。

獲得密鑰相關內容

在騰訊雲的 API 密鑰管理,https://console.cloud.tencent.com/cam/capi 中新建一個密鑰,


然後如下圖所示會得到 APPID、SecretId 和 SecretKey。這三個內容一定要記住,後面要用到;而是要注意安全保密。
創建存儲桶

首先在首頁的「雲產品」下拉菜單中選擇「對象存儲」。

然後選擇「存儲桶列表」後創建一個新的存儲桶。

在創建選項中根據提示操作即可,設置名稱,然後選擇伺服器地區,需要注意的是因為要用做圖床,所以訪問權限設置為「公有讀私有寫」。也就是只有你自己給存入內容,但是訪問內容(圖片)不受限制。

在上圖的配置中,有兩項內容叫做「存儲桶名稱」和「請求域名」,這個在設置好之後點擊你的存儲桶,然後選擇「基礎配置」也可以看到,另外你還需要在基本信息中記住「所屬地域」的代碼。

至此,你就獲得了配置圖床工具需要的所有內容。

本地圖床工具設置

圖床工具有很多,好用的也有不少,但是全平臺免費開源且好用的選擇就不多了。這裡推薦的是 PicGo,https://picgo.github.io/PicGo-Doc/zh/,滿足全平臺免費開源且支持多種插件。嗯,好用。

三個特點

主窗口支持拖拽、選擇圖片上傳;支持讀取剪貼板的第一張圖片快捷上傳。macOS支持頂部欄拖拽上傳

上傳成功後自動複製連結地址到剪貼板,支持5種複製粘貼格式,讓你的文本編輯極致高效。

支持JavaScript開發的插件,給予插件極大自由度,讓PicGo更加強大,成為你得手的效率工具。

簡單配置

安裝好之後,在圖床設置中選擇「騰訊雲 COS」,勾選 V5 版本,然後依次填入上一步響應的信息即可。如果默認想使用 騰訊雲 那麼就「設置為默認圖床」。至此,本地圖床工具依舊設置好了。下圖為 PC 版本截圖,Mac 同理,同時也有命令行版本可以使用。

快速使用

PicGo 的使用非常簡單,沒有任何學習成本。正如開發者介紹的那樣,你有多種方式把一張圖片發送到圖床中。

上傳成功後會有消息提示(果子: windows 可能沒有)

這個時候剪貼板已經默認保存了這個圖片的地址。這個地址的具體的保存格式你可以進行,我自然是設置為MarkDown 格式。直接在需要的位置粘貼即可。如果你想快速獲取曾經上傳的圖片地址。只需要在相冊視圖中點擊對應圖片下的「複製」圖標即可。

至此,本地的圖床管理工具已經配置完畢並且可以正常使用。

本地寫作工具設置

如上文所言,當你配置好本地圖床工具之後,在任何 MarkDown 編輯器裡(例如vscode 或者 typora)直接在需要的位置粘貼即可。但是,如果本地的寫作工具直接支持上傳至圖床豈不美哉?

本地寫作管理工具 VNote

本地寫作工具中支持一鍵將本地圖片傳至圖床的在Mac上有不少,例如 Typora(僅Mac版本)Mweb 等等。但是同時支持 PC 和 Mac 的本地 MarkDown 寫作工具,目前我用下來就只有 VNote,https://tamlok.github.io/vnote/zh_cn 體驗佳。提到 VNote 這款開源寫作工具完全可以單獨再開一篇文章好好寫寫(果子:熊的原話是,就本地文件的管理而言,Typora和VNote之間相差一到兩個印象筆記)。這裡只介紹其最近一個版本更新後加入的圖床功能注意,一定是最新的2.8版本才可以噻。

自2.8版本開始,VNote支持了四種圖床,值得一提的是貢獻者提供了微信公眾號圖床,這個可能很多人都沒有聽說過。

VNote 配合騰訊雲

VNote 的圖床配置也是非常之簡單。在「設置」中找到「圖床」,然後選擇騰訊雲。其中domain name 就是你的請求域名,其餘兩項就是上文 API 中SecretId和SecretKey。

這裡有幾點小坑需要注意!

domain name 就是你的存儲桶請求域名,但是務必請去掉連結裡 https:// 只需要輸入域名即可。

因為是本地編輯器,如果想要順利上傳圖片和展示就需要在存儲桶的設置中進行一點修改。所以建議你新建一個存儲桶來使用。配置內容如下圖,修內內容為設置跨域訪問。

設置內容如下

都配置好之後可以在 VNote 中進行測試。

一鍵上傳本地圖片到圖床

(果子: 這個操作極其炫酷,意味著,你在VNote寫作的時候就直接把圖片複製粘貼就行,此時是本地的,寫完之後一鍵就可以全部轉為圖床連結。我的簡書被封掉之後,他就是這樣一鍵把我所有的圖片給拯救回來的)
配置好後,只要在任意文檔的編輯模式下,滑鼠右鍵選擇「上傳圖片」然後點擊「騰訊雲」即可。隨後,該文檔內的所有本地圖片都會自動上傳到你的圖床,然後圖片的地址會自動替換會圖床地址。

如何做到簡快好還省

至此,通過:

雲伺服器配置

本地圖床工具設置

本地寫作工具設置(可選項)

你就可以愉快的利用圖床管理圖片和寫作了,當然上述都是最基本的入門設置,大體上可以達到簡快好的使用圖床。標題中的「省」是指的費用問題,使用騰訊雲的對象存儲畢竟是要錢的。

為了不讓別人盜用你的圖片借用你的圖床花你的錢寫(抄)他自己的文章,往往我們還需要在存儲桶中進行一些防盜鏈的設置。因為涉及到一些前端和網頁訪問的知識,這裡就不再基礎使用篇介紹了。如下圖所示,有興趣的可以自行研究下。

其實也可以不怎麼管這裡,因為確實很便宜,便宜到我都想把對象存儲當做網盤用。而且騰訊雲是有對象存儲客戶端的且不難用(Mac端)。我目前存儲的數量如下:

花費是多少呢?從10月1日到今天,一共花了3塊4毛錢。真的很省。如果你不是流量大戶,一年可能也就三四十塊。

結語

最後,祝你使用愉快。另外,本文提到的 PicGo 和 VNote 都是開源工具,如果他們對你有所幫助,希望你可以給開發者捐贈,感謝他們的付出以及開源精神。

相關焦點

  • 國產圖床終於也有稱手的小工具了
  • 教程自從有了 Markdown 再也沒用過 Word
    具體所有詳細說明可以上官網查閱:官網:http://www.markdown.cn/為什麼要用 MarkdownMarkdown 讓我們從 word 各種繁雜的格式編輯中解放出來,將注意力中心重新集中到內容創作上,並且可以全程鍵盤操作,不用在鍵盤滑鼠間來回切換。無論軟體還是語法本身都簡單快速,提升工作效率。見上文使用場景敘述。
  • Markdown編輯器Typora的圖床功能
    說它是文本編輯器,都有點小覷它了,在我看來更像是一個瀏覽器——我們在用Markdown語法編輯文檔的時候,本質上來說是在編寫一個HTML網頁。3 圖片由本地連結轉為伺服器連結簡單介紹了一下Typora,回到我們今天的正題——如何在編寫時將圖片的本地連結轉為伺服器連結?
  • 使用Atom打造無懈可擊的Markdown編輯器
    一直以來都奢想擁有一款全能好用的Markdown編輯器,直到遇到了Atom。廢話不多說,直接開搞!1.
  • GitHub+PicGo搭建免費在線圖床!
    上一篇介紹了如何利用GitHub+Hexo搭建個人博客,那麼博客搭建起來以後,文章需要用markdown
  • 還在用 Word 做筆記?Markdown 開啟你更高效工作的第一步!
    顯然,若想發表高水平的論文,就必須能自主編程,以便實現最新方法,走在前列、引領趨勢,這正是本期「效率分析編程進階班」課程的主旨。 張寧教授在環境效率和非期望產出領域學者中排名第二,他在 Science, Nature, Cell 和 Lancet 上均有發表。
  • 打造一款基於monaco-editor及markdown-it的Markdown編輯器(上)
    前言本文的 Markdown 編輯器主要是 Monaco editor + markdown-it 實現 markdown 編輯以及預覽,目前實現了:文章複製功能;Markdown 轉 html 基本樣式;自定義 table 插件以及 h 標籤插件
  • typora+picgo+github圖床使用教程
    picgopicgo這裡就不多介紹了,相信大部分小夥伴都在用了。這裡我們需要picgo2.2以上版本,低版本的小夥伴就需要更新了哦。網絡不佳的可以看文末分享233333。下載地址。下載下來安裝,接著參考官方文檔配置github圖床即可。
  • MacOS Markdown編輯神器Typora最終免費版!
    多種擴展語法支持上下標、表格、LaTeX 公式、繪製序列圖 / 流程圖,各種語言代碼塊皆可高亮顯示靈活支持各圖床可對接 iPic、PicGo 等圖床工具,支持 Custom Command,實現多種圖片上傳方式實時預覽格式完善的 Markdown 語法,輸入標記實時展示排版,同時支持原始碼模式、自定義語法偏好
  • Markdown 筆記神器 Typora 終於支持圖片上傳了!
    Typora一直是我最喜歡的 markdown 編輯器,寫博客、記筆記的首選軟體。在前段時間發布的文章中 你用什麼軟體做筆記?大部分朋友在評論區留言喜歡使用 Typora。但是 Typora 之前是不支持圖床功能的,只能通過第三方插件實現圖片自動上傳的功能。不過最近 Typora 有了更新,終於支持圖床功能了,接下來我會分別介紹藉助插件上傳圖片和 Typora 自身的圖床功能。
  • 網際網路從業人員都應該用 Markdown 寫作
    舉個例子,我現在用 Word 寫了篇文章,然後想把它轉換成 HTML 頁面,實在是不方便。有次一個產品拿了一個十幾頁的 Word 文檔——《用戶服務協議》,叫我發到線上做成連結……這只是二次處理的一個例子。
  • markdown基本語法集錦系列一
    至於 什麼是 markdown?它有什麼用? 這樣的問題今天就不做解釋了,不佔用大家寶貴時間,網上資源太多了!在本行行尾加上:<br/>例:這是上一行<br/>這是下一行 效果如下:這是上一行這是下一行在上一行行尾加上 2 個空格後,再回車鍵即可換行例: 這是上一行(2個空格 + Enter)這是下一行 效果如下:這是上一行這是下一行說明:兩行中間要空一行,按再次回車(Enter)即可!!!
  • Markdown圖片神器:PicGo-讓你愛上筆記與分享
    所以,我在第一版的基礎上「增刪改查」,形成了這個 v2.0 版本。Markdown 是一款好工具、好幫手,我也希望在它幫助過我很多之後、能夠儘快與你分享,盡力用文字為你解決在使用過程中的問題,讓網際網路對面的你也享受到寫作、記錄的樂趣。
  • 推薦一款超好用的Markdown編輯器!
    Markdown編輯器,主要是可以使用一套格式標記語言來對文檔內容進行排版和格式顯示,而這種編輯器在程序猿圈子裡逐漸受到歡迎的原因是:1、讀寫改方便,Markdown的格式標記語法簡單,常用的標記只有十多個,相對來說非常輕量,上手很快,只需要學習幾個簡單的符號,然後就可以專注於碼字了,而不需要手動設置各種樣式。
  • 比Word簡單好用1萬倍的排版工具-Markdown
    3.Markdown的排版功能非常簡單,只需要在文字基礎上增加一些特殊的字符就可以。4Markdown是免費的,任何人都可以使用。Markdown的原理MarkDown約定了一些排版字符,只需要記住這些排版字符,在文字的基礎上增加上這些字符,Markdwon就會按照約定,自動生成相應的排版格式。
  • Markdown | 我心中最酷的寫作工具
    我之後的文章中會一一介紹:文本編輯器:VS Code(我心中最酷的純文本編輯器,寫 Markdown 或者 Python 或者其他任何純文本語言,都可以在這裡進行)格式轉換:Pandoc(格式轉換界的瑞士軍刀,可以方便又高效地實現md、doc、tex之間的轉換)圖片管理:PicGo + Gitee(配置自己的圖床
  • Gitee + Typora,搭建自己的免費圖床!
    前言對於寫博客的朋友們來講,圖床這個東西一定不會陌生,而且在一定程度上也給大家造成過一定困擾。上一篇文章中我們講了如何 利用 Github 搭建自己的免費圖床,但有人反映 Github 訪問有點慢,而且也不太穩定,所以就推薦用國內的 Gitee 來搭建,於是今天就帶來新鮮熱乎的基於 Gitee 所搭建的免費圖床教程,也水一篇文章,希望對大傢伙有所幫助。2.
  • 搭建自己的圖床
    搭建自己的圖床前言沒聽過圖床這個詞的人應該挺多的吧,畢竟平時也不怎麼會用到,第一次聽到圖床這個概念是一位朋友跟我提起的,他平時比較喜歡寫技術文章
  • 讓你愛上寫作的 11 款 Markdown 工具
    Ulysses 的功能都是為了寫作服務:當按下 Ulysses 的全屏按鈕,原本在左側的文檔庫按鈕將會全部消失,屏幕上只剩下文章本身。Ulysses 對 MD 標記的高亮與顯示界面簡潔優美。還有一個值得注意的細節是,寫作的文章右側會有段落數字,標註好這是第幾段。它沒有實時預覽功能,使用需要你對 MD 語言有一定的掌握。
  • 還有多少人需要圖床?
    貼貼板 的作者提到自己的另外一個作品 圖床神器 iPic 更新了,付費功能的自定義圖床新增了 OSS、S3 支持,目前支持達到了 6 款:七牛、