插入图片(并居中)

插入图片

之前打算在文章中插入图片，配置的过程中遇到了一些问题。想在博客中引用外站图片问题不大，但Hexo默认插入图片只有这一个方法，对有本地化需求的人群来说不够方便，此时可以安装一个满足本地图片引用的插件，在国内某知名（c）专业（s）开发者（d）社区（n）里提供的90%的方案为以下命令：
npm install hexo-asset-image –save
该论坛上相互借鉴蔚然成风的壮景对我这个刚入门的小白真是非常险恶，此指令安装版本落后，无法有效显示图片，有效的版本安装命令如下：
npm install https://github.com/CodeFalling/hexo-asset-image –save

修改_config.yml文件，将post_asset_folder:值改为true。

之后在新建一个博客的同时会生成同名文件夹，将需插入的图片放入该文件夹即可。文章中的具体引用代码为以下格式：(后来发现在source文件夹里新建一个名为images的文件夹存放图片也行)

![](1/image.jpg)

更改相对位置

但这种方法在PC端有一个默认的问题就是图片插入后会自动左对齐，想要实现居中对齐，可以在markdown引用代码外部添加center元素，或者直接添加html元素，如下所示：

<center>

![...](xxx)

</center>

#or

<div align=center>

![...](xxx)

</div>

(因为我用VScode来打开博客的md文件进行编辑，在上传至本地网页时一开始发现图片无法加载，后来排查得出居中命令代码间的空行是必要的，不知道其他编辑器是否有这样的问题。)

还可以直接修改css文件，因为markdown插入图片的代码在最终渲染的时候变为html中的img元素。因此可以直接去博客主题文件的源代码中，找到控制文章内图片显示样式的css代码，将其修改成水平居中即可。前端编程中修改水平居中的方法非常多，以下是网上资源中提供的其中一种：

一般情况下可以在Hexo博客文件夹进入到主题模板的themes->(主题名称文件夹)->source->css->_partial中，找到post.styl文件，该post文件中保存的就是文章详情页里面的显示样式。然后找到里面正确的img元素，修改其样式，增加margin 0 auto这行指令。如下:

.post-content
    position relative
    color c-666
    img
      max-width 100%
      cursor pointer
      display block 
      margin 0 auto

然后可以实现了。但我在自己当前使用的主题中并没有找到相关语段，由于技术比较拉跨，我决定还是先老实用前两种吧。

[后期补丁：你需要一款名为Typora的markdown编辑软件]