如何在文章中(.md)插入图片

起因

刚进hexo的坑不久,我写post的方式完全就是最基础的:

1
hexo new post title

然后在_posts文件夹右键拿Notepad++打开.md文件,然后开始写呀写,一开始没注意到什么问题,主要我自己也没学过Markdown,也没仔细看文档(我只看了基础篇),所以就遇到了一个大问题,写文章的时候不会插图片怎么办???
于是今天就来学习一下到底如何在文章里插图片,并写下这个教程。

经过

1.首先你要打开网站的_config.yml,搜索post_asset_folder这一项(你也可以自己找到这项,反正我眼睛不好得靠Notepad的搜索)。
修改这一项的参数,把预置的false改成true

1
post_asset_folder: true

这一项的作用就是让hexo在你写new post的时候自动建立一个与文章同名的文件夹,用来放置与该文章相关的所有资源。

2.在网站目录下打开Git Bash,执行以下语句,安装相关插件。

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

然后等待安装,安装完成后,会输出:

1
2
3
4
5
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 6 packages in 173.081s

最后两行表示插件安装成功,@后边应该是版本号。

3.之后在用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。结构如下:

xxxx
├── 图片名.jpg
├── 图片名2.jpg
└── 图片名3.jpg
xxxx.md

4.在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照Markdown的格式插入图片即可,其中[]空着不写则没有图片标题。
![你想输入的标题](xxxx/图片名.jpg)

5.最后检查一下,hexo g或者hexo generate生成页面后,进入public\2018\2\6\index.html文件中查看相关字段,可以发现,html标签内的语句是<img src="2018/2/6/xxxx/图片名.jpg">,而不是<img src="xxxx/图片名.jpg>。这很重要,关乎你的网页是否可以真正加载你想插入的图片。

结果

Cat
以上就是我在.md中输入![Cat](/2018/02/06/如何在-md文章中插入图片/1202495.png)出现的效果啦。

后续

查看官方文档,找到了引用文章资源的标签代码,再来用官方的标签插件测试一下:

1
2
3
4
//引用文章的资源。
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

以上是我在.md文件中写入下列代码的效果

1
{% asset_img 1202495.png This is an example image %}

另外我找到了一个比Notepad++方便很多的Markdown编辑器,叫Cmd Markdown,看起来非常好用,下次写作试一下~

进阶

学会插入图片之后,接下来要解决的一个问题是图片的尺寸,上文中可以看到图片整个填充到了博文中,并不是原始尺寸。(本来只是一个很小的icon),要解决这个问题,我们就要联系到Markdown语法基础与进阶那篇文章,在那里我们说过了,Markdown还是支持html的,所以我们可以利用html标签来插入图片顺便更改大小。

以上是我在.md写入下列代码的效果:

1
<img src="/2018/02/06/如何在-md文章中插入图片/1202495.png" style="width: 20%;">