如何使用VSCode發布部落格到部落格園

  • 2020 年 7 月 12 日
  • 筆記

如何使用VSCode直接在部落格園上發部落格?

摘要

寫部落格是許多開發人員的習慣,大家把自己平時學習和工作中學到的知識和遇到問題的解決方法記錄在部落格中,既能對自己學習的知識進行鞏固,還能方便以後對知識進行複習,最最重要的是,能將自己的所學所感分享給廣大園友,把知識傳遞下去.部落格園一直以來都是很火的技術分享部落格社區,大量的技術大牛和我這種剛入門的菜鳥都在部落格園學習和交流.

隨著markdown格式筆記的流行,現在很多程式設計師都開始使用markdown來編輯自己的部落格.然而,部落格園的markdown格式編輯器使用體驗真的一言難盡.不過幸好,在網上找到某個大神分享的VSCode擴展,這個擴展支援VSCode本地編寫部落格並直接在部落格園上保存部落格草稿,非常的方便.

本文我將記錄一下如何使用VSCode直接在部落格園上發表部落格.

第一步:VSCode安裝擴展 WriteCnblog

  • 打開VSCode的擴展安裝窗口,搜索WebCnblog,進行安裝

1

第二步:登錄自己的部落格園帳號

  • 進行配置

    點擊圖示位置,進行帳號配置;

2

  • 輸入MetaWeblog地址,按Enter確認

3
4

這個地址在部落格園的設置介面最下面的位置,如下圖所示:

5

  • 輸入用戶名
    6

  • 輸入密碼
    7

  • 登錄後介面

8

注意

MetaWeblog、用戶名和密碼必須要連續輸入,不然會中斷輸入

第三步:編寫部落格

  • 點擊文章列表處的書寫圖標,然後會有命令框彈出,輸入文章標題後點擊Enter,即可創建新的文章。

9

  • 創建結果

10

  • 編輯內容

11

如何插入圖片?

插入圖片相對來說麻煩一點,需要按如下方法操作才能插入。

  • 截一張圖片;

    自己截圖一張就行了,哈哈!

  • 點擊快捷鍵 Ctrl + p,輸入 >CnBlog:粘貼剪切板圖片 命令,然後你的圖片就被插進去了;

    12

  • 看看圖片插入結果;

    13

提醒

這個插入圖片還是有點麻煩的,建議可以把截圖保存下來,上傳草稿後再重新長傳一下,不然就太麻煩了。

第四步:上傳部落格

  • 點擊下圖中文章標題旁邊的上傳圖標,進行文章上傳,如下圖所示;

14

上傳後的文章,不是直接發表的,而是保存為草稿,需要上傳完後登錄部落格園進行上傳。

注意

下圖中的錯誤顯示有無效的圖片鏈接,這是因為這些圖片是我在用其他軟體寫markdown時插入的圖片,因為不是合適的圖片上傳方式,所以顯示出錯,不能上傳。如果插入圖片一定要按照文章上描述的方式操作,不然不能上傳。

15

第五步:查看上傳結果

  • 看草稿箱的內容;

16

17

第六步:在部落格園發表部落格

這步不用說了,大家都知道。

18

文章就寫道這裡了,我也是剛了解這種方式,了解的也不太清楚,這裡附上插件開發者寫的幾篇介紹部落格,比較詳細了,對著看應該能掌握了,哈哈!