- 最终效果请看这里:https://sadtomlzr.github.io/photos/
- 采用同样使用GitHub为图床的方法lawlite.me:Hexo+Github实现相册功能
- 本文为踩坑记录粗略写一下关于相册实现过程的一些不理解的地方。本文采用的主题是Yilia.
1. python文件应该放在哪里?
这是我遇到的问题,可能只有我有这个疑问吧。因为我看到lawlite
博客里面的评论区。没有说关于这方面的东西。大概率都是放在了hexo的根目录下先写一个代码块模仿目录
1 | ----photo(做为链接GitHub图床仓库的本地仓库) |
这里只给出比较关键的文件夹theme懒得写了…文章中写到要在博客的source
文件夹下建立一个photos
文件夹这里的话就放了太多照片在博客里面了。我觉得因为思路是将photo做为一个git仓库上传自己的呃图片做为图床。所以我在这里创建了photo文件夹加入了相应的js文件但是没有将图片放进去。而是创建在了hexo目录的根目录。
注:
- 其实你想创建到哪里都可以只要这个文件夹做为仓库链接了GitHub的仓库都可以的。
- 上文链接里面的ini.js里面修改的链接才可以链接到你的仓库。所以和图片放到哪个文件夹内其实干系不大,如果图片放出来感觉还好一点,博客不会因为图片而占内容。
- photo文件夹地址后注意修改一下
tool.py
中的内容是data.json必须生成到/xxx.github.io/source/photo/data.json
文件内这个是不能改变的
现在说一下photo目录里面的目录结构
1 | ----photo |
使用注意命名2020-4-1_xxx.jpg
这种形式(注:只有一个下划线,也可以修改代码,我准备修改点代码,后续修改点js吧。。。)
empty.png文件应该放在哪里?(能访问大图但是缩略图不能看)
上面lawlite
已经写过了在asset/img
文件夹内。但是我没有找到哪里有asset/img
。最后测试相册是否生成的时候也是如此。我查看网络请求发现请求empty.png
失败了。报的错是404。
所以我看了下源码/asset/img/empty.png
里面是引用的asset文件夹内的图片但是我的yilia主题和他的文件目录结构好像有点不一样。因为我生成博客的前端项目里面直接是/img
没有asset/img
的文件目录,然后放在theme/yilia/source/img/
文件目录下的图片都是在/img
目录下的。
所以我随即修改了源码
1 | liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\ |
这里将minSrc + ‘“ src=”/asset/img/empty.png” itemprop=”thumbnail” 中的asset去掉。
1 | liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\ |
看懂思路的童鞋直接查看第127行代码找到其中的src=”/asset/img/empty.png”去掉为src=”/img/empty.png”即可。
然后再从网上下载一个empty.png图片放入xxx.github.io/theme/yilia/source/img/
文件夹内即可(可点击empty.png跳转链接下载)
为什么做为图床的GitHub仓库图片不能访问(大图和缩略图都不能看)
你需要查看一下做为你图片仓库里面的setting
选项是否是Branch Master
如果是应该就可以了,如果还不行,不好意思本篇文章没有能够帮助你。hhh