hexo图片插入

引言

在写关于KMP算法的文章时，遇到了插入图片的问题。通过在网上查资料，解决了图片的插入、大小调整以及标题添加的问题，故记录。

正文开始之前，给出参考的博文及资料：

• hexo插入图片及控制大小
• hexo官方图片插件用法

  图片插入

在hexo中，图片插入共有三种方式，分别为：

• html语法插入
• hexo插件
• markdown语法插入

本文主要介绍前两种方式。

前期准备

修改_congig.yml文件

在hexo中插入图片之前，首先需要在_congig.yml中，找到post_asset_folder，并将其设置为true。

上述设置之后，使用hexo n article命令新建文章后，会出现同名的文件夹atricle，将所需要插入的图片存储在该文件夹中，即可在文章中引用图片。

下载插件

在hexo路径下下载hexo的图片插件，命令如下：

npm install hexo-asset-image --save

hexo插件

语法

hexo插件的语法为：

{% asset_img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

例子

将图片下载后保存到文件夹中，命名为1.png。则可以采取如下命令插入图片：

 {% asset_img 1.png 400 250 '"hexo官网"' %}

插入效果如下：

观察源码，可得到如下结果

总结

使用hexo提供的插件，可以实现对图片的插入以及大小的设定，但是无法在文章中显示出图片的标题。

html语法

语法

html插入图片的语法为：

<img src="image path" width=xxx height=xxx />

例子

使用html语法插入时，无需将图片下载保存至本地文件夹中，可以直接使用图片的原地址进行插入，命令如下：

<img src="https://d33wubrfki0l68.cloudfront.net/5997a40576f3beca7bbbd86fe79a795e9d520d8e/87f88/themes/screenshots/landscape.png" width=400 height=250 />

效果为：

此外，html语法也可以用于插入本地图片，命令为：

<img src="1.png" width=400 height=250 />

效果如下：

为图片添加标题，则可以使用如下命令：

<center>
<img src="1.png" width=400 height=250 />
{% link hexo官网 https://hexo.io/zh-cn/ %}
</center>

效果为：

hexo官网

需要指出的是，以下代码的作用为添加超链接。

{% link hexo官网 https://hexo.io/zh-cn/ %}

总结

html语法同样可以实现图片的插入、大小调节的功能。此外，html语法还可以显示地展现图片的标题。