
Hexo+GitHub博客添加图片
使用Hexo +GitHub搭建的个人博客,编辑博客使用的是MarkDown语法,MarkDown语法个人感觉使用不太方便的地方就是关于添加图片的问题
显示图片的语法格式:
1 |  |
图片可以分为两种:
- 一:网络图片(多有人都可以直接访问)
- 二:本地图片(有的MarkDown编辑器直接本地图片直接拖拽,会生成本地的图片路径, 但是这种图片只有在本地能正常看, 到其他地方不能正常显示)
本地图片解决:
1.GitHub做图床
解决本地图片到其他地方不能正常访问的问题, 这里用GitHub来当图床,可以把图片放到本地blog/source/文件夹里面, 新建了一个img文件夹来存放图片. 需要先部署和生成, 把图片放到github上, 才能通过链接找到.(使用时,先把本地图片拖进img文件夹下, 找到对应的路径地址,在博客正文中引用图片路径, 发布到GitHub上,就可以正常浏览)
路径地址:
1 | https://sghyxp.github.io/img/base_img/head_bg.jpg |
这种方法可以支持在其他地方正常浏览,缺点是每次都要将图片拖拽到指定文件夹下,引用路径发布后才可以正常浏览
2.安装上传本地图片的插件
1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true
2 在你的hexo目录下执行这样一句话npm install hexo-asset-image –save,这是下载安装一个可以上传本地图片的插件,来自dalao:dalao的git
3 等待一小段时间后,再运行hexo n “xxxx”来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
Second
4 最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:
1 |  |
注意: xxxx是这个md文件的名字,也是同名文件夹的名字。只需要有文件夹名字即可,不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了,很像引用相对路径。
比较坑,这种方法尝试过程中, 安装插件后,导致node的依赖出错, 不能进行正常的 hexo clean, hexo g -d, 所以放弃了这种方式.