type
Post
status
Published
date
Dec 9, 2023
slug
summary
Hexo 插入图片有两种方式，第一种是网络引用，第二种是本地插入，本文主要介绍本地插入图片方式。另外由于 Hexo 是静态博客框架，所插入的图片默认会按照本身大小自动铺满，如果要设置图片大小需要另外写 css 来进行控制。转载请说明出处。
tags
Hexo
建站
category
常用工具
password
Hexo 插入图片有两种方式，第一种是网络引用，第二种是本地插入，本文主要介绍本地插入图片方式。另外由于 Hexo 是静态博客框架，所插入的图片默认会按照本身大小自动铺满，如果要设置图片大小需要另外写 css 来进行控制。转载请说明出处。
前言
Hexo 插入图片有 网络图片插入 和 本地图片插入 两种方式。
网络图片插入的做法是先把图片上传到 七牛云 等云服务商提供的图床，然后通过
 的方式，把 img-url 的地址替换成图片在图床的 url 地址即可。使用网络图片的好处是七牛云的cdn加速效果会大大提高图片的打开速度，缺点是多图片博客的编辑过程会比较繁琐，图片管理比较麻烦。本地图片插入把图片和博客保存在一起，方便图片管理，但是图片的网络打开速度会很慢。下面重点介绍本地图片插入。
常规本地图片插入
1、安装插件
安装插件 hexo-asset-image，在 hexo 安装目录下运行
安装完成后需要重启一下服务器。
注意 hexo-asset-image 仓库已经停止维护。新版使用 hexo-renderer-marked 3.1.0 版本以上的插件。
具体参考 资源文件夹
2、修改配置文件
编辑 Hexo安装目录下的_config.yml 文件，找到
post_asset_folder，把值改成 true。通过将 config.yml 文件中的post_asset_folder选项设为true来打开资源文件管理功能。当资源文件管理功能打开后，Hexo 将会在你每一次通过hexo new [layout] <title>命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。
3、使用插入图片
使用
hexo new post "xxxx" 来新建博客时，会发现在 /source/_posts 文件夹下会有一个同名的 xxxx 文件夹，对于已存在的博客可以新建一个同名文件夹。您可以把与该文章相关的所有资源都放到那个文件夹，如此一来，您便可以更方便的使用资源。先把图片复制到同名文件夹中，然后在文章中使用
例如把 example.jpeg 复制到同名文件夹，然后在文章中使用
效果图如下：
设置图片大小
图片默认会显示原本的图片大小并居中显示，如果需要对图片大小进行设置，需要另外写 css 样式进行控制。注意：该方法可能会覆盖原来的一些图片样式。
效果图如下：
Hexo与Typora的结合
上述是从文章资源文件夹中引用图片，前提是先将图片放入到文章资源文件夹，如果图片数量众多的话，一张一张的放很影响效率。Typora对于插入图片的支持做得非常好，设置 偏好设置—图片，设置复制到指定路径，值为
./${filename}，然后勾选下面的按钮。
使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。
但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的
文件名/。不慌，也很简单。在 Typora 编辑器中，使用<C-f>快捷键，将所有的文件名/替换为空即可删除。参考
- Author:mcbilla
- URL:http://mcbilla.com/article/e908a50b-ec4d-47cb-9042-d1912a6e1a0d
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
