添加相冊(cè)功能的思路
如果你跟我一樣不懂前端的話,要增加想相冊(cè)功能就去看看網(wǎng)上別人的已經(jīng)實(shí)現(xiàn)的案例.然后高度模仿,模仿出來再訂制自己的樣式.
經(jīng)過搜索我參考這兩個(gè)地方.
Yilia主題的作者 Litten的 github 倉庫
這個(gè)哥們實(shí)現(xiàn)的效果看著很棒,我就看看他如何實(shí)現(xiàn)的
看完別人的文章之后,整理了下思路.
1.在主頁上必須有一個(gè)可供點(diǎn)擊的相冊(cè)連接
2.要用 hexo 生成一個(gè) photos.html 文件
3.photos.html 中的圖片數(shù)據(jù)來源?因?yàn)檫@是一個(gè)靜態(tài)頁面所有要有一個(gè) json 文件
4.json 文件中有含有信息,圖片的文件名.
5.圖片要有一個(gè)完整的路徑,把圖片放到哪呢?七牛的圖床,github 的空間,自己的服務(wù)器都可以.
6.怎么上傳呢?大量圖片當(dāng)然寫腳本傳了.不會(huì)寫咋辦?很多人都寫好了,改改就是了,腳本也有很多個(gè)版本.多數(shù)用 nodeJS寫的,hexo 就用的 nodeJS.Python也是很不錯(cuò)的選擇.
7.加載圖片太慢怎么辦?準(zhǔn)備兩套圖,一套縮略圖,一套高清大圖.縮略圖怎么來?寫腳本裁剪圖片.
不多說廢話了,順著思路逐一解決問題吧
1.在主頁上必須有一個(gè)可供點(diǎn)擊的連接
-
進(jìn)入到你的博客目錄下執(zhí)行 hexo new page "photos",就會(huì)出現(xiàn)一個(gè)這樣的新目錄.
new_photos -
配置 Yilia 主題讓其顯示出來.
yourBlog/themes/yilia/_config.yml文件中這樣設(shè)置
show_photos
2.如何生成 photos.html 文件來
- 我也不知道他是如何生成,不知道就模仿作者的.下載作者的備份博客
-
模仿他的文件目錄結(jié)構(gòu)
Litten的photos文件夾下的模板文件,樣式文件, js文件
litten
我的photos文件夾下的模板文件,樣式文件, js文件
復(fù)制他的到你博客相應(yīng)的目錄下.
ejs 文件是以后要hexo 文件渲染的文件.
assets 目錄是放默認(rèn)圖片的也要有. -
修改 ejs 模板文件,ins.js 文件設(shè)置自己的東西.
3.1 index.ejs文件可以不用修改
3.2 修改 ins.js 文件的 render()函數(shù).這個(gè)函數(shù)是用來渲染數(shù)據(jù)的
修改圖片的路徑地址.minSrc 小圖的路徑. src 大圖的路徑.修改為自己的圖片路徑(七牛的, github的路徑).
ins_js
3.生成 json 文件.
這一步是關(guān)鍵的一步,也是最后一步.先用腳本把圖片處理成一套大圖和一套小圖,
然后上傳的七旁蓿或者 github 上再回頭生成這個(gè) json文件.
每次更新圖片都要執(zhí)行腳本重新生成 json 文件.這個(gè)json 文件會(huì)出現(xiàn)在
yourBlog/source/photos/data.json
4.處理圖片
我用的別人寫好的腳本,看他寫得已經(jīng)很全了,我也懶得再寫了.改改就好了.腳本下載地址
.py 文件就是 Python 的腳本.
-
tool.py 文件中幾個(gè)方法
tools -
放圖的文件夾和 tool.py 的文件目錄結(jié)構(gòu)
makerBlog_di - 需要修改的地方
3.1 git_operation()方法:
如果你把圖片上傳到你的 github上這個(gè)方法就不用更改了.但是要確保你這個(gè)目錄能否 push 到 GitHub.
3.2 如果你打算將圖片上傳到七牛上.這個(gè)方法就要?jiǎng)h除掉了,重新寫一個(gè)上傳到七牛的方法.參考鏈接
3.3 handle_photo()方法:
生成 json 文件最關(guān)鍵的一步.很好非常好,馬上要成功了.
注意: 該腳本對(duì)圖片的命名規(guī)則有要求.
圖片應(yīng)該這樣命名: 2016-10-12_xxx.jpg/png
5.會(huì)出現(xiàn)的坑
- python too.py 命令的時(shí)候出現(xiàn)
no module named PIL錯(cuò)誤
出現(xiàn)這錯(cuò)誤的原因是: PIL 模塊找不到,PIL 模塊已經(jīng)過時(shí)了.
解決方案: pip install pillow
我的是Mac 系統(tǒng), python 版本是3.5.2, pip的版本是9.0.1.
其他環(huán)境的暫時(shí)沒有嘗試. - mac系統(tǒng)如何切換 Python 的版本
python3.5.2連接下載連接
downloadPython
2.1 一路 next 安裝完畢
2.2 設(shè)置 python 的環(huán)境變換切換版本
2.3 open ~/.bash_profile 打開設(shè)置保存用戶環(huán)境變量的文件
2.4 在 export PATH 之后添加 alias python="/Library/Frameworks/Python.framework/Version/3.5/bin/python3.5"(注意引號(hào)的是否為英文)
2.5 設(shè)置完成的效果
pythonShortCut
2.6 保存退出后,讓文件生效. source ~/.bash_profile
6.總結(jié)
走到這里所有的所有的準(zhǔn)備工作都做好了.
進(jìn)入到你博客目錄, 執(zhí)行 python tool.py(處理圖片,上傳圖片,生成 json 文件)
hexo clean (清理之前的 HTML 等)
hexo g (生成 HTML 文件)
hexo s (看看效果如何)
最后部署到你的博客上.
網(wǎng)上大致文章都是這么的寫,找到一個(gè)差不多就開始實(shí)踐吧,如果你看我的去實(shí)踐遇到問題可以找我,我只要有時(shí)間定會(huì)回復(fù)你.如果遇見更多的坑歡迎補(bǔ)充(github提問,博客評(píng)論, QQ 加好友都可以哦)??
