hexo的图片上传与本地预览

Hexo 的图片上传与本地预览

本地预览基于vscode的typora插件

方案一 (不推荐)

全局资源文件夹

即，将所有文章的资源统一用一个全局资源文件夹管理。

此方法的优点是比较简便，并且当多篇文章需要引用同一资源时，也比较方便。缺点是当文章很多时，各个文章的图片都在同一文件夹，不便管理。

具体方法：

在 hexo 文件夹下的 source 目录下，新建一个文件夹叫 images(名字随意)，将要插入的图片放在该文件夹中。

在 md 文档内，使用 ![图片](图片链接地址 "图片title")的格式，圆括号内的链接地址写(/images/name.jpeg)。

这里的 / 指的是根目录，对于 hexo，资源文件的根目录就是 source。

例如，在 md 文档中写：![图片](/images/20.jpeg "甘雨")
同时将“20.jpeg”这个图片文件放在 hexo 文件夹/source/images 下，则图片可以上传到博客。

(方案一摘自在 hexo 博客中插入图片的方法)

方案二 (推荐)

文章资源文件夹

对每一篇文章使用一个文件夹管理

具体方法

1. 修改 _config.yml文件

   # 约第43行
   post_asset_folder: true
   marked:
     prependRoot: true
     postAsset: true

2. 之后你在 hexo new "title"创建新的文章时在 .md同级目录下生成同名文件夹，你可以在该文件夹下存放图片。

3. 在对应的 .md文件内使用 {% asset_img image.jpg 这是一张图片 %}来显示图片

注意

方案二在本地预览 .md文件时，由于 {% asset_img image.jpg 这是一张图片 %}并非 markdown 语法，会导致本地无法正常预览解析，可以使用hexo-renderer-marked插件。

该插件允许用户在本地编辑 .md文件时使用 ![name](图片名称)这一 markdown 语法以便本地预览，并在 hexo g时自动生成正确的链接

然而我们可以发现还是无法本地预览，因为图片和 .md文件本身不在同一级目录，所以我们还要对插件进行修改

修改 hexo-renderer-marked

由于我使用的是vscode的typora插件，设置粘贴图片创建地址为 ${fileName}\${now}.png
即.md文件同级目录下 fileName文件夹内
文件结构：

--|
  |---filename-|---time.jpg
  |            |---time1.jpg
  |
  |---filename.md

所以对 \node_modules\hexo-renderer-marked\lib\renderer.js 进行修改

//约第118行

// Prepend root to image path
image(href, title, text) {
    // 从这里添加3行
    if (href.indexOf("\\") > -1) {
        href = href.split("\\")[1];
    }

    //...
    //文件其他内容
    //...
}