WilliamZH

答案在硬币的第三面

三步学会hexo文章插入图片

2023-11-29

413字 | 预计阅读时长: 1min

阅读量: 次

本文使用插件 hexo-asset-image 来完成 blog 中图片的插入

第一步：配置_config. yml 文件
首先打开 Hexo 的配置文件_config. yml，找到如下选项，并将其修改为 true

该操作的作用是：当你在使用指令 hexo new hexo文章插入图片 创建一个 hexo 文章插入图片. md 文件时，会自动生成一个同名文件夹在 source\_posts 中，该文件夹用来存放该文章的资源。
NOTE:

直接在 source\_posts 中手动新建 md 文件和同名文件夹也可以
无论是文件夹还是图片命名，都不可以包含空格！否则图片无法显示！
重命名直接右键修改即可

第二步：安装 hexo-asset-image 插件
使用如下命令进行安装：
1
npm install https://github.com/CodeFalling/hexo-asset-image --save
若想卸载该插件，直接在路径 \blog\node_modules 中找到 hexo-asset-image 文件夹删除即可
第三步：插入图片
首先将需要插入的图片放进第一步生成的文件夹中。这里建议大家给每个图片做好命名，便于管理。（命名可以使用中文）
在 md 文档中使用如下代码插入图片
1
2
![](/三步学会hexo文章插入图片/1配置文件.png)
![1同名文件夹效果](/三步学会hexo文章插入图片/1同名文件夹效果.png)
效果即第一步所显示。
NOTE:

注意引用路径的格式
前面方括号中的内容可有可无

完成以上内容后，正常生成上传即可实现在 blog 中插入图片。

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

北京邮电大学计算机科学与技术在读<br>联系:WilliamZH29@outlook.com