第一篇部落格記錄test

黑黑白客發表於2024-04-24
除錯vs Code檢視使用test

VSCode用markdown發部落格

一、將vscode定製為markdown編輯器

Markdown and Visual Studio Code：https://code.visualstudio.com/docs/languages/markdown

1、Markdown all in one外掛

簡介
所有你需要寫Markdown要用到的（鍵盤快捷方式，目錄，自動預覽等）
image

常用快捷鍵

image

一些有用的命令

  • Markdown: Create Table of Contents
  • Markdown: Update Table of Contents
  • Markdown: Toggle code span
  • Markdown: Print current document to HTML

2、Markdown toc外掛

簡介：這個外掛用來生成目錄
image

配置：

  • markdown-toc.depthFrom: 生成目錄的標題最低階別，預設h1
  • markdown-toc.depthTo: 生成目錄的標題最高階別，預設h6
  • markdown-toc.insertAnchor: 自動插入連結地址，預設false
  • markdown-toc.withLinks: 自動插入連結，預設true
  • markdown-toc.updateOnSave: 自動更新

二、WriteCnblog外掛的使用

WriteCnblog:https://github.com/kotcmm/writecnblog

我的修改版本，增加了批次上傳的功能：https://github.com/BobinYang/write-cnblog-V1

"WriteCnblog" 是一個基於rpcxml協議給部落格園釋出Markdown格式的外掛

1、安裝

從marketplace安裝

點選左邊的bar上面的擴充套件圖示，然後在輸入框輸入WriteCnblog可以找到該外掛，點選安裝就可以了。

image

提示：如果是macOS或者Linux可能會從GitHub上下載一個支援獲取剪下板圖片的外掛。

下載vsix安裝

如果不想從擴充套件市場直接安裝，也可以從GitHub上下載編譯好的vsix進行安裝，下載地址https://github.com/kotcmm/writecnblog/releases
下載到本地後，如下圖進行安裝

2、特性

  • 選擇部落格工作空間
  • 配置並登入
  • 新建文章
  • 拉取最近文章
  • 儲存草稿
  • 釋出文章
  • 比較修改文章
  • 刪除文章
  • 選擇文章分類
  • 新增分類
  • 跳轉文章網頁

image

3、擴充套件設定

  • writeCnblog.rpcUrl: 部落格園的MetaWeblog介面地址（我的部落格管理 -> 設定，拉到最下面，有個MetaWeblog訪問地址）
  • writeCnblog.userName: 部落格園的使用者名稱
  • writeCnblog.blogId: 部落格id（設定配置後，成功登入會自動獲取）
  • writeCnblog.blogWorkspace: 工作空間（存放部落格文章的相關內容）
  • writeCnblog.recentPostCount: 最近文章的數量（部落格園目前只支援最近500條）

image

4、使用者相關配置

安裝完外掛後，需要配置使用者資訊，然後才可以進行下一步的操作

  • 點選配置使用者資訊
  • 輸入MetaWeblog訪問地址，按Enter鍵（ 在部落格園配置拉到最下面可以看到這個地址，複製過來填入）
  • 輸入使用者名稱，按Enter鍵
  • 輸入密碼，按Enter鍵

MetaWeblog訪問地址和使用者名稱是儲存在vscode的配置裡面，密碼儲存在系統裡面 Windowns憑據，或者是mac的鑰匙串。

如果輸入的配置資訊是正確的話，會提示配置成功，然後把blogid也更新到vscode的配置裡面

如果有更改密碼的話，可以在文章列表的更多按鈕裡面找到配置設定重新設定使用者資訊

5、選擇部落格文章儲存目錄

要操作部落格文章之前需要先選擇一個資料夾當作部落格的工作空間。可以點選文章列表上面的重新整理按鈕，如果沒有選擇過工作空間的話，就會彈出一個對話方塊來選擇資料夾。

請選擇一個空的資料夾，選擇完資料夾後會在這個資料夾裡面生成一個.cnblog的資料夾，然後拉起網站上的文章到選擇的資料夾裡面。

如果文章裡面有markdown的圖片格式的話，會把圖片給下載到本地。存放到images資料夾裡面，然後把文章的路徑給替換成本地檔案路徑。

  • .cnblog\imageIndex儲存圖片的對映。
  • .cnblog\index文章的相關資訊
  • .cnblog\post儲存網站拉取下來的文章內容，用於工作空間的文章進行修改對比

選擇完工作空間後，資料夾路徑也會儲存到vscode的配置裡面，如果之前有選擇過工作空間，點選這個重新整理按鈕則只拉取最近文章。

預設拉取最近100個文章，如果需要改變這個值，可以配置Recent Post Count

image[4]

6、功能介紹

1、文章預覽

文章只要有儲存草稿或者釋出到部落格園的網站上，就可以進行預覽。點選文章標題上的預覽按鈕，會彈出一個提示框，詢問是否訪問網站，點選開啟連結可以跳轉到網頁上預覽文章

2、新建文章

點選文章列表上的新建文章按鈕，彈出一個輸入框，輸入文章標題，會新建一個檔案，副檔名為md。檔案的名字格式為 {文章標題}.{本地文章id}}.{md}，但是在列表檢視裡面只會顯示文章標題。

新建完文章後，可以開啟檔案進行文章內容編輯，也可以新增文章分類等其他操作。

3、儲存草稿

新建完文章後，點選預覽是會提示文章還未釋出到網站，可以點選文章標題上的快捷按鈕，進行儲存草稿到部落格園網站上。

4、修改文章

右鍵點選一篇文章，可以彈出如下選單後，可以進行相應的操作。

image

修改文章內容

可以本地修改完同步到網站上，也可以網站上修改後拉取到本地。

注意：本地修改完後，文章是不會直接顯示M標誌，暫時沒有想到比較好的實現方式。網站上修改後拉取到本地只會更新.cnblog\post裡面的文章。工作空間裡面的文章內容需要自己比較後，複製貼上過來。

修改文章標題

本地修改完直接儲存到網站上，也可以網站上修改完拉取回本地

5、刪除文章

如果是網站刪除文章的話，是無法同步回來刪除本地文章。需要本地點選刪除文章才可以把本地的文章刪除掉。不過這個時候會提示文章不存在。

6、貼上圖片

不知道為什麼vscode不開放electron的圖片貼上介面。只能自己想其他辦法解決。

雖然網上有其他解決方案例如electron-image-ipc-server 和 Paste Image，但是我還是想嘗試一下造輪子，寫了一個基於N-API的Nodejs外掛。測試自己三臺電腦都是可以（win,mac,ubuntu）,如果你使用起來有問題的話，可以先用
Paste Image，把問題也給我說一下，我試試看能不能解決

7、新增分類

這裡只能新增不能刪除，沒有看到部落格園有提供出來刪除介面。同時這個介面好像還有個bug。就是我新建一個test分類後，我在網站上刪除了這個分類後，就沒有辦法再建立一個叫做test的分類。除非到網站上建立。

相關文章