How to use vscode to publish blog to blog Garden

Time:2020-9-29

How to use vscode to blog directly in the blog Garden?

abstract

Blogging is the habit of many developers. We record the knowledge we learned from our daily study and work and the solutions to the problems in our blog. It can not only consolidate the knowledge we have learned, but also facilitate the review of the knowledge in the future. Most importantly, we can share what we have learned with our friends, The blog Garden has always been a popular technology sharing blog community. A large number of technical experts and I, who are just beginning to learn and communicate in the blog Garden. With the popularity of markdown format notes, many programmers now use markdown to edit their own blogs, It’s really hard to say how to use the markdown format editor of blog Garden. Fortunately, we can find a vscode extension shared by some god on the Internet. This extension supports vscode to write blogs locally and save blog drafts directly on the blog Garden. This is very convenient. In this article, I will record how to use vscode to publish blogs directly on the blog Garden

Step 1: install the extension writecnlog for vscode

  • Open the vscode extension installation window, search for webcnblog and install

img_1

Step 2: log in to your blog Garden account

  • Configure

    Click the location shown in the figure to configure the account number;

img_2

  • Enter the metaweblog address and press enter to confirm

img_3

img_4

This address is located at the bottom of the blog garden settings interface, as shown in the following figure:

img_5

  • enter one user name
    img_6

  • Input password
    img_7

  • Post login interface

img_8

be careful

The metaweblog, user name and password must be entered continuously, otherwise the input will be interrupted

Step 3: write a blog

  • Click the write icon in the article list, and a command box will pop up. Enter the title of the article and click enter to create a new article.

img_9

  • Create results

img_10

  • Edit content

img_11

How to insert a picture?

It is relatively troublesome to insert a picture. You need to do the following to insert it.

  • Cut a picture;

    Just take a screenshot, ha ha!

  • Click the shortcut keyCtrl + p, input>Cnblog: paste clipboard imageCommand, and your picture will be inserted;

img_12

  • Take a look at the image insertion results;

img_13

remind

This insert image is still a bit troublesome. It is suggested that you can save the screenshot, upload the draft and then pass it on again. Otherwise, it will be too troublesome.

Step 4: upload blog

  • Click the upload icon next to the article title in the figure below to upload the article, as shown in the figure below;

img_14

be careful

The error in the figure below shows that there are invalid image links. This is because these pictures are inserted when I write markdown with other software. Because they are not the proper way to upload images, they are displayed incorrectly and cannot be uploaded. If you insert a picture, you must follow the way described in the article, otherwise you can’t upload it.

img_15

Step 5: view the upload results

  • Look at the contents of the draft box;

img_16

img_17

Step 6: publish a blog in the blog Garden

Needless to say, we all know that.

img_18

The article wrote here. I just learned about this method, but I didn’t know it very well. Here are some introduction blogs written by plug-in developers, which are more detailed. I should be able to master it by looking at it. Ha ha!

  • Tutorial 1
  • Tutorial 2