hexo解决图片上传到服务器后路径不正确的问题

[toc]

Step 1 安装 hexo-renderer-marked 插件

hexo-renderer-marked 是一个为 Hexo 博客框架设计的插件，它使用 Marked 解析 Markdown 文件。Hexo 是一个快速、简单且功能强大的静态博客框架，而 hexo-renderer-marked 插件允许你使用 Marked 来渲染 Markdown 文件，从而生成静态网页内容。

主要功能和用途

Markdown 渲染: hexo-renderer-marked 使用 Marked 库将 Markdown 文件转换为 HTML。Markdown 是一种轻量级的标记语言，常用于编写博客文章、文档等。
支持扩展语法: Marked 支持一些扩展的 Markdown 语法，使你可以使用更高级的特性，例如表格、代码块高亮等。
高性能: Marked 是一个高性能的 Markdown 解析器，解析速度快，生成的 HTML 代码干净且高效。
自定义选项: hexo-renderer-marked 允许你在 Hexo 配置文件中自定义 Marked 的选项，如是否启用 GFM（GitHub Flavored Markdown）、是否启用表格和代码块高亮等。

安装与配置

安装

通过 npm 来安装 hexo-renderer-marked 插件：

1	npm install hexo-renderer-marked --save

Step 2 配置 _config.yml 文件

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

参数解释

ost_asset_folder: true
- 作用: 将 Markdown 文件中的图片等资源文件存放在与 Markdown 文件同名的文件夹内。
- 解释: 当该选项设置为 true 时，Hexo 在处理 Markdown 文件时会将 Markdown 文件的同名文件夹作为资源文件夹来处理。这意味着，如果你有一个名为 example.md 的 Markdown 文件，其中引用了 example.jpg 的图片，Hexo 将会把 example.jpg 放在 example/ 文件夹内，这样可以更好地管理和组织资源文件。
marked: prependRoot: true
- 作用: 在处理 Markdown 文件时，为资源文件（如图片、链接等）自动添加根路径。
- 解释: 当设置为 true 时，Hexo 在处理 Markdown 文件时会自动为文件中的资源路径添加根路径。例如，如果你的博客网站的根路径是 https://example.com，那么 Markdown 文件中的图片路径 example.jpg 将自动转换为 https://example.com/example.jpg。
marked: postAsset: true
- 作用: 在生成静态页面时，将资源文件（如图片、附件等）自动复制到生成的页面目录中。
- 解释: 当设置为 true 时，Hexo 在生成静态页面时会将 Markdown 文件中引用的资源文件复制到生成的页面目录中。这样可以确保生成的页面能够正确地引用和显示资源文件。

Step 3 创建公共的保存文件的路径

在 source 文件夹下创建一个 images 文件夹，随后修改 MarkDown 编辑器的图像设置，插入图像时将图像复制到指定位置

hexo解决图片路径不正确问题