添加相册功能的思路
如果你跟我一样不懂前端的话,要增加想相册功能就去看看网上别人的已经实现的案例.然后高度模仿,模仿出来再订制自己的样式.
经过搜索我参考这两个地方.
Yilia主题的作者 Litten的 github 仓库
这个哥们实现的效果看着很棒,我就看看他如何实现的
看完别人的文章之后,整理了下思路.
1.在主页上必须有一个可供点击的相册连接
2.要用 hexo 生成一个 photos.html 文件
3.photos.html 中的图片数据来源?因为这是一个静态页面所有要有一个 json 文件
4.json 文件中有含有信息,图片的文件名.
5.图片要有一个完整的路径,把图片放到哪呢?七牛的图床,github 的空间,自己的服务器都可以.
6.怎么上传呢?大量图片当然写脚本传了.不会写咋办?很多人都写好了,改改就是了,脚本也有很多个版本.多数用 nodeJS写的,hexo 就用的 nodeJS.Python也是很不错的选择.
7.加载图片太慢怎么办?准备两套图,一套缩略图,一套高清大图.缩略图怎么来?写脚本裁剪图片.
不多说废话了,顺着思路逐一解决问题吧
1.在主页上必须有一个可供点击的连接
-
进入到你的博客目录下执行 hexo new page "photos",就会出现一个这样的新目录.
new_photos
-
配置 Yilia 主题让其显示出来.
yourBlog/themes/yilia/_config.yml文件中这样设置
show_photos
2.如何生成 photos.html 文件来
- 我也不知道他是如何生成,不知道就模仿作者的.下载作者的备份博客
-
模仿他的文件目录结构
Litten的photos文件夹下的模板文件,样式文件, js文件
litten
我的photos文件夹下的模板文件,样式文件, js文件
复制他的到你博客相应的目录下.
ejs 文件是以后要hexo 文件渲染的文件.
assets 目录是放默认图片的也要有. -
修改 ejs 模板文件,ins.js 文件设置自己的东西.
3.1 index.ejs文件可以不用修改
3.2 修改 ins.js 文件的 render()函数.这个函数是用来渲染数据的
修改图片的路径地址.minSrc 小图的路径. src 大图的路径.修改为自己的图片路径(七牛的, github的路径).
ins_js
3.生成 json 文件.
这一步是关键的一步,也是最后一步.先用脚本把图片处理成一套大图和一套小图,
然后上传的七牛或者 github 上再回头生成这个 json文件.
每次更新图片都要执行脚本重新生成 json 文件.这个json 文件会出现在
yourBlog/source/photos/data.json
4.处理图片
我用的别人写好的脚本,看他写得已经很全了,我也懒得再写了.改改就好了.脚本下载地址
.py 文件就是 Python 的脚本.
-
tool.py 文件中几个方法
tools
-
放图的文件夹和 tool.py 的文件目录结构
makerBlog_di
- 需要修改的地方
3.1 git_operation()方法:
如果你把图片上传到你的 github上这个方法就不用更改了.但是要确保你这个目录能否 push 到 GitHub.
3.2 如果你打算将图片上传到七牛上.这个方法就要删除掉了,重新写一个上传到七牛的方法.参考链接
3.3 handle_photo()方法:
生成 json 文件最关键的一步.很好非常好,马上要成功了.
注意: 该脚本对图片的命名规则有要求.
图片应该这样命名: 2016-10-12_xxx.jpg/png
5.会出现的坑
- python too.py 命令的时候出现
no module named PIL错误
出现这错误的原因是: PIL 模块找不到,PIL 模块已经过时了.
解决方案: pip install pillow
我的是Mac 系统, python 版本是3.5.2, pip的版本是9.0.1.
其他环境的暂时没有尝试. - mac系统如何切换 Python 的版本
python3.5.2连接下载连接
downloadPython
2.1 一路 next 安装完毕
2.2 设置 python 的环境变换切换版本
2.3 open ~/.bash_profile 打开设置保存用户环境变量的文件
2.4 在 export PATH 之后添加 alias python="/Library/Frameworks/Python.framework/Version/3.5/bin/python3.5"(注意引号的是否为英文)
2.5 设置完成的效果
pythonShortCut
2.6 保存退出后,让文件生效. source ~/.bash_profile
6.总结
走到这里所有的所有的准备工作都做好了.
进入到你博客目录, 执行 python tool.py(处理图片,上传图片,生成 json 文件)
hexo clean (清理之前的 HTML 等)
hexo g (生成 HTML 文件)
hexo s (看看效果如何)
最后部署到你的博客上.
网上大致文章都是这么的写,找到一个差不多就开始实践吧,如果你看我的去实践遇到问题可以找我,我只要有时间定会回复你.如果遇见更多的坑欢迎补充(github提问,博客评论, QQ 加好友都可以哦)✌️
网友评论