Hexo is a static blog site generator that can generate a blog in minutes.

Hexo’s blog posts are in Markdown format, and publishing an article is a simple matter of a few commands.

The hexo new ‘article’ generates an MD file named ‘article’.

A new article

Add descriptions, categories, and labels to the locations in the graph to help search categories.

How do I insert images into the Hexo blog

As you know, the syntax for inserting an image into an MD file is! [] ().

The square brackets are the picture description and the parentheses are the picture path.

Generally speaking, there are three picture paths, which are relative path, absolute path and network path.

The so-called network path is a direct reference to the image on the web, directly copy the image address, put in parentheses and done.

This method is very convenient, but it also has certain problems:

  • Image failure caused by loading;
  • Open the page and then request to load the image;
  • Restrictions on the original website, such as wechat public account pictures will become invisible.

This approach has its pros and cons.

The absolute path is the absolute location of the picture on the computer, and the relative path is the path relative to the current file.

Since our blog is to be deployed on the website, a new file directory will be generated after deployment, so we choose to use the relative path approach.

Using the article resources folder in hexo requires a configuration change in the config.yaml file:

post_asset_folder: true
Copy the code

When this configuration is applied, a folder with the same name, the Article Resources folder, is generated when a new article is created using the hexo new command.

This causes a problem because the project generates new file directories and resolves the image paths in Markdown.

For example, in a file directory with a blog name of 1.md, there is a 1 folder to store the image image.jpg.

In Typora editor, normal MD files are used! [](1/image.jpg) can display images in the editor normally.

In Hexo, it should be used! [](image.jpg), but the page does not display properly.

At this point, the image should be introduced like this:

{% asset_img image.jpg This is a picture %}Copy the code

Although you can quote pictures normally, this way of quoting pictures can only be described in one sentence, WTF.

Image plug-ins

The hexo-renderer-marked plugin fixes this problem. You can install it directly using the NPM install hexo-renderer-marked command, and then change the configuration in config.yaml as follows:

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true
Copy the code

Then you can use it again! [](image.jpg) to insert the image happily.

We do so much for convenience, so why not make it more convenient.

The perfect combination of Hexo and Typora

The above is to quote the pictures from the article resources folder, the premise is to put the pictures into the article resources folder first, if the number of pictures, one by one will affect the efficiency. But fear not, we have a handy solution.

Typora is my favorite Markdown text editor, which I’ve covered a bit in previous articles.

Typora does a great job of supporting the insertion of images, either in File -> Preferences or directly

into Settings.
,>

The perfect combination of Typora and Hexo

After using this configuration, you can directly copy the address of the image in the web page. After pasting the image into Typora, the image will be directly copied to the article resources folder and the path will be automatically changed.

For example, copy the picture of the network path https://….. Paste into Typora called the article name of the article, the image will automatically become! [](article name /image.jpg).

But we know that after deployment, the file paths are different, so after we have inserted all the images, we also need to remove the file name/from each image path. It’s easy not to panic.

In the Typora editor, use the < c-f > shortcut key to delete all article names by replacing them with empty /.

image-20201012140945525

Then you upload the blog, and the picture is packaged with the post. In the web page, you can see the normal display of the image, and you’re done.

This article is formatted using MDNICE