hexo图片添加的好用方法


title: hexo图片问题
tags:

  • hexo
    categories:
  • 杂七杂八
    date: 2023-11-23 17:28:46
    description: hexo博客如何添加图片

hexo博客在添加图片时遇到了问题,下面说三个解决方案:强烈推荐方案三

图片多用方案一,图片少用方案二,(最新方案)方案三

解决方案一(不推荐):

参考链接

本方法通过{%%}插入本地图片,首先要修改博客配置文件_config.yml,把配置文件里的post_asset_folder设置为true,这时用hexo new "文章标题"创建文章时会自动创建一个同名的文件夹,用于存放资源文件。

使用{%%}方法必须将图片放在新建文件时生成的同名文件夹目录下,然后使用以下命令格式即可:

{% asset_img 图片文件名 图片加载失败的描述 %}
  • 缺点

    新建文章时会新建同名目录用于存放图片,图片不多的话就看着很烦,更重要的是图片无法在Typora中展示,只能在博客中看,这让我很不爽。

解决方法二(不推荐):

参考链接

本方法通过<img src="/img/xxx.jpg"/>方式插入图片,详细步骤在链接中,原文章中有一个点说的不太准确,就是在Typora中设置图片根目录时选择的目录是hexo目录下的source目录,不是source/img目录。其余跟原文章一样。

<img src="/img/xxx.jpg" style="zoom:80%" /> //80%是缩放比例
  • 缺点

    图片多的话会比较麻烦,但是在Typora和博客中图片均会显示。

解决方案三(最新方案,强烈推荐):

[参考链接](资源文件夹 | Hexo)

  • 优点

    在Typora中可以直接用![]()标签显示同名文件夹中的图片,还可成功布置到博客上。

这个方法参考了一部分的官方文档。前两个方法都不好,第一个写法{% %}有点反人类,而且无法在Typora显示,第二个方法适用于图片较少的情况,我现在用到的图片比较多,现在也不太行了。

我的方法跟第一个方案类似,首先要修改博客配置文件_config.yml,把配置文件里的post_asset_folder设置为true,并在配置文件里添加以下的marked部分,官方文档说hexo-renderer-marked 3.1.0 引入了一个新的选项,其允许你无需使用 {% %}就可以在 markdown 中嵌入图片,而是使用![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=&pos_id=img-9M6BuA65-1701264763990) 3.1.0插件无需下载,在新版的hexo中已经集成了,如果不确定有没有可以使用npm list hexo-renderer-marked`命令查看。

_config.yml
post_asset_folder: true
---------------------------------添加以下内容----------------
marked:
  prependRoot: true
  postAsset: true

设置完后用hexo new "文章标题"创建文章时会自动创建一个同名的文件夹,用于存放资源文件,一定要用这个方法创建文章。使用![]()方法必须将图片放在新建文件时生成的同名文件夹目录下,然后在Typora中使用以下命令格式即可添加图片:

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image.png&pos_id=img-eu3tnG4e-1701264763992) // 这里的图片路径直接填图片名即可,不需要在添加其它目录

此时会发现一个bug,无法在Typora中显示图片,但是可以在博客中显示,解决方法是在Typora中设置图片根目录时选择放置图片的目录,详细步骤是在Typora中选择:

格式(O) -> 图像 -> 设置图片根目录 -> 选择文章同名文件夹(即放置图片的文件夹)

设置完后就可以在Typora中显示图片了。

  • 细节

    经过多次测试,一定要把post_asset_folder设置为true,再使用hexo new "文章标题"创建文章才可以,只用在这种情况下在自动创建的同名文件夹中的图片才管用,才没有问题,自己手动创建文件夹放置图片会导致在Typora中不显示图片,设置为false的话会导致图片仅在Typora中显示而不在博客中显示。

  • 缺点

    没有找到一个好的方法删除文章的同时删除对应的文件夹。

  • 19
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值