小趙同學
0%

Hexo-博客中添加图片等资源

发表于 更新于

一图胜万言

博客中有时候图片比文字更有说服力，比如：代码运行结果，代码运行效果等

引用于 https://blog.csdn.net/qq_40265501/article/details/80019774

官方介绍：https://hexo.io/zh-cn/docs/asset-folders.html

开启’资源文件管理’功能

将 config.yml文件中的 post_asset_folder 选项设为 true

1
2
_config.yml
post_asset_folder: true
安装Hexo插件

插件地址：https://github.com/dangxuandev/hexo-asset-image

1
npm install hexo-asset-image --save
在博客中添加图片

  1. 新建博客

    1
    hexo n test

  2. 查看目录结构

    1
    2
    3
    [root@nginx GeekSRE]# ls -l source/_posts/ |grep test
    drwxr-xr-x 2 root root 4096 4月  17 17:29 test
    -rw-r--r-- 1 root root   96 4月  17 17:35 test.md

    可以看到 会在 source/_posts 目录创建 test.md 和 test目录

    与博客同名目录用于存放资源文件，如图片、CSS、JS 文件等

  3. 上传图片到”文章资源文件夹”

    1
    2
    3
    4
    # 比如使用CSDN博客中的图片：
    cd source/_posts/test
    wget https://img-blog.csdn.net/20180420154609543

  4. 引用

    1
    2
    3
    4
    5
    vim source/_posts/test.md

    # ![你想要输入的替代文字](图片文件)
    # 比如：
    ![图片](test.jpg)

  5. 保存

    1
    hexo clean && hexo g && hexo d

  6. 验证效果
    图片