text-picture

博客图片问题封面

博客框架图片管理难题,使用插件 CodeFalling/hexo-asset-image

博客图片管理问题

博客图片路径问题一直是个问题,针对于个人博客平台,图片管理尤为重要。
大型博客平台有自己的服务器提供图片上传服务,另一种解决方案为上传图床服务器,知名的有七牛

针对于hexo官方api文档中,关于图片的声明

1
{% img [class names] /path/to/image [width][height] [title text [alt text]] %}

其中图片路径问题依旧繁琐。

解决方案-hexo-image插件

插件传送门: CodeFalling/hexo-asset-image

  • 项目创建者API
1
2
3
4
5
MacGesture2-Publish
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
MacGesture2-Publish.md
  • Just use ![logo](logo.jpg) to insert logo.jpg.

即每篇文章生成同名的文件夹,图片放入其中,md中直接使用上述格式进行调用,插件在生成的html中自动进行图片路径转换。

具体步骤

  • 修改配置文件_config.ymlpost_asset_folder属性为true
    使用hexo创建一篇博客时会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹

  • 安装插件

    1
    npm install hexo-asset-image --save
  • 运行hexo n "xxxx"创建博文,会发现在source\_posts路径下生成了xxxx文件夹

  • md中书写引入图片即可

demo

.\source\_posts文件路径

1
2
3
text-picture
├── text-picture.jpg
text-picture.md

声明图片代码片

1
![text-picture](text-picture/text-picture.jpg)

显示如下
text-picture

针对于本框架博客置顶图片

1
top_img: ./text-picture1.jpg
文章作者: HibisciDai
文章链接: http://hibiscidai.com/2018/04/02/text-picture/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 HibisciDai
支付宝打赏
微信打赏