Hexo+Github实现相册功能
Hexo+Github实现相册功能
- 最终效果请看这里:http://lawlite.me/photos/
一、说明
1、关于
- 我使用的主题是hexo-theme-yilia,其中实现相册功能的方案是同步
instagram
上面的图片,但是现在instagram
被禁,不能使用了 - 下面是通过自己的方式实现了相册功能,其中的样式还是使用该主题提供的
2、方案
- 在
github
上新建一个仓库,主要用于存储图片,可以通过url
访问到,也方便管理 - 将要放到相册的图片处理成
json
格式的数据,然后进行访问,这里json
的格式需要配合要使用的样式,所以需要处理成特定格式的json
数据,下面会给出 - 图片裁剪,因为相册显示的样式最好是正方形的的图片,这里使用脚本处理一下
- 图片压缩,相册显示的图片是压缩后的图片,提高加载的速度,打开后的图片是原图。
二、实现
1、github操作
- 建立一个用于存储相册的仓库,我这里建立了名为
Blog-Back-Up
的仓库
- 关于
git
的命令行操作和配置不再给出
2、博客操作
- 在博客的
source
文件夹下建立一个photos
文件夹 - 将样式文件放到
photos
文件夹下,样式文件我都放到了github
上:https://github.com/lawlite19/Blog-Back-Up/tree/master/blog_photos_copy - 修改
ins.js
文件,主要是里面的render
函数- 其中的
url
对应到你的github
放图片的地址
- 其中的
var render = function render(res) {var ulTmpl = "";for (var j = 0, len2 = res.list.length; j < len2; j++) {var data = res.list[j].arr;var liTmpl = "";for (var i = 0, len = data.link.length; i < len; i++) {var minSrc = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/min_photos/' + data.link[i];var src = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/photos/' + data.link[i];var type = data.type[i];var target = src + (type === 'video' ? '.mp4' : '.jpg');src += '';liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\<a href="' + src + '" itemprop="contentUrl" data-size="1080x1080" data-type="' + type + '" data-target="' + src + '">\<img class="reward-img" data-type="' + type + '" data-src="' + minSrc + '" src="/assets/img/empty.png" itemprop="thumbnail" onload="lzld(this)">\</a>\<figcaption style="display:none" itemprop="caption description">' + data.text[i] + '</figcaption>\</figure>';}ulTmpl = ulTmpl + '<section class="archives album"><h1 class="year">' + data.year + '年<em>' + data.month + '月</em></h1>\<ul class="img-box-ul">' + liTmpl + '</ul>\</section>';}
3、图片处理
- python脚本文件都放在了这里:https://github.com/lawlite19/Blog-Back-Up
(1) 裁剪图片
- 去图片的中间部分,裁剪为正方形
- 对应的裁剪函数
def cut_by_ratio(self): """按照图片长宽进行分割------------取中间的部分,裁剪成正方形""" im = Image.open(self.infile) (x, y) = im.size if x > y: region = (int(x/2-y/2), 0, int(x/2+y/2), y) elif x < y: region = (0, int(y/2-x/2), x, int(y/2+x/2)) else: region = (0, 0, x, y) #裁切图片 crop_img = im.crop(region) #保存裁切后的图片 crop_img.save(self.outfile)
(2) 压缩图片
- 把图片进行压缩,方便相册的加载
def compress(choose, des_dir, src_dir, file_list):"""压缩算法,img.thumbnail对图片进行压缩,参数-----------choose: str选择压缩的比例,有4个选项,越大压缩后的图片越小"""if choose == '1':scale = SIZE_normalif choose == '2':scale = SIZE_smallif choose == '3':scale = SIZE_more_smallif choose == '4':scale = SIZE_more_small_smallfor infile in file_list:img = Image.open(src_dir+infile)# size_of_file = os.path.getsize(infile)w, h = img.sizeimg.thumbnail((int(w/scale), int(h/scale)))img.save(des_dir + infile)
4、github提交
- 处理完成之后需要将处理后的图片提交到
github
上 - 这里同样使用脚本的方式,需要将
git
命令行配置到环境变量中
def git_operation():'''git 命令行函数,将仓库提交----------需要安装git命令行工具,并且添加到环境变量中'''os.system('git add --all')os.system('git commit -m "add photos"')os.system('git push origin master')
5、json数据处理
- 下面就需要将图片信息处理成
json
数据格式了,这里为重点 - 最终需要的json格式的数据如下图:
- 这里我采用的方式是读取图片的名字作为其中的text的内容,图片的命名如下图
- 最前面是日期,然后用
_
进行分隔 - 后面是图片的描述信息,注意不要包含
_
和.
符号
- 最前面是日期,然后用
- 实现代码:
- 注意代码中
../lawlite19.github.io/source/photos/data.json
是对应到我的博客的路径,这里根据需要改成自己博客的路径
- 注意代码中
def handle_photo():'''根据图片的文件名处理成需要的json格式的数据-----------最后将data.json文件存到博客的source/photos文件夹下'''src_dir, des_dir = "photos/", "min_photos/"file_list = list_img_file(src_dir)list_info = []for i in range(len(file_list)):filename = file_list[i]date_str, info = filename.split("_")info, _ = info.split(".")date = datetime.strptime(date_str, "%Y-%m-%d")year_month = date_str[0:7] if i == 0: # 处理第一个文件new_dict = {"date": year_month, "arr":{'year': date.year,'month': date.month,'link': [filename],'text': [info],'type': ['image']}} list_info.append(new_dict)elif year_month != list_info[-1]['date']: # 不是最后的一个日期,就新建一个dictnew_dict = {"date": year_month, "arr":{'year': date.year,'month': date.month,'link': [filename],'text': [info],'type': ['image']}}list_info.append(new_dict)else: # 同一个日期list_info[-1]['arr']['link'].append(filename)list_info[-1]['arr']['text'].append(info)list_info[-1]['arr']['type'].append('image')list_info.reverse() # 翻转final_dict = {"list": list_info}with open("../lawlite19.github.io/source/photos/data.json","w") as fp:json.dump(final_dict, fp)
三、其他
你可以根据需要进行修改
python
脚本代码,这里一些细节可能处理的不好留言板:http://lawlite.me/留言板/
效果展示
- 相册
- 留言板
- 相册
一些问题有人总结了,请查看:https://blog.csdn.net/wardseptember/article/details/82780684
或者是我博客下的留言:http://lawlite.me/2017/04/13/Hexo-Github实现相册功能/
Hexo+Github实现相册功能相关推荐
- Hexo+yilia+Github实现相册功能(超详细)
文章目录 一.目的: 二.方案 三.实现 1.博客页面添加相册 2.GitHub操作 3.修改代码 注意(第一个容易出错的地方): 4. 添加脚本 注意(第二个错误地方-重点):如果没有这一步可能缩略 ...
- hexo+yilia添加相册视屏功能
文章目录 一.增加相册功能 1. 原理 2.修改代码 2.1 新建博客的photos页面 2.2 新建本地图片库 2.3 修改`tool.py`中的路径 2.4 每次上传照片都需要运行python脚本 ...
- Hexo yilia 主题添加相册功能
当我们使用hexo博客框架中的yilia主题时,在我们这一博客页面中,原作者Litten并未帮我们添加相册这一功能.这时,如果想让我们的博客拥有相册的功能,就需要我们自行添加改变.添加主题中的相关参数 ...
- hexo 博客小功能添加-评论、相册、字数统计...
前言 前段时间 个人博客全新上线(阿里域名+GitPages+hexo+Yelee) 搭建的博客 我的博客,基础的功能已经实现了,想着既然有了自己的博客就要好好的维护(折腾)一下,于是便参考着别人的博 ...
- hexo 博客小功能添加-评论、萌妹纸、相册、字数统计...
前言 前段时间 个人博客全新上线(阿里域名+GitPages+hexo+Yelee) 搭建的博客 我的博客,基础的功能已经实现了,想着既然有了自己的博客就要好好的维护(折腾)一下,于是便参考着别人的博 ...
- hexo+yilia完美实现相册功能(解决缩略图不显示)
写在前面 先看我的博客相册效果 必看,前期配置 由于是在lawlite的教程帮助下完成的相册功能,所以前面的设置还是直接看原博客吧 里面有几个地方需要注意: 1.第一个地方 var minSrc = ...
- GitHub上搭建博客增加相册功能
目标 在github上成功搭建Hexo博客 实现在博客上浏览图片,添加图片功能 最终效果:https://wonderxiao.github.io/ 说明 使用主题:hexo-theme-yilia来 ...
- 基于Hexo+GitHub Page搭建免费个人博客教程
1. Hexo 介绍 Hexo 是基于NodeJs的静态博客框架,简单.轻量,其生成的静态网页可以托管在Github和Heroku上. 超快速度 支持Markdown 一键部署 丰富的插件 2. 搭建 ...
- Hexo + github 打造个人博客
前两年开始用 wordpress 搭了一个网站,但服务器是在 Linode 上,之所以要放在 Linode 上,要从买的域名说起,因为我买的域名是 fengzheng.pub ,.pub 是不允许备案 ...
最新文章
- 建立实体-关系模型4
- ‘FactorAnalyzer‘ object has no attribute ‘analyze‘和fa.loadings改成fa.loadings报错解决
- 针对“来用”团队项目之NABC分析
- POJ 3264 Balanced Lineup【线段树区间查询求最大值和最小值】
- 写在开通博客的第一天
- windows环境下注册安装GitHub Desktop使用方法详解
- python 模块
- KinectFusion: Real-time 3D Reconstruction and Interaction Using a Moving Depth Camera
- C++算法学习(力扣:134. 加油站)
- Maven 项目添加jetty 插件
- Linux使echo命令输出结果带颜色
- Power Strings POJ - 2406,字符串hash
- 搜索引擎算法之同义词、近义词、上位词挖掘
- 程序员5种编程入门方法,快速学会一门编程语言!
- 简单的C语言程序介绍(重点理解),超详细基础代码解析
- Ubuntu查看联想笔记本无线网卡内核并安装驱动
- GWT RPC 开发
- CSS #38; JS
- asp微信登陆源码,实现asp网站授权微信登录(获取用户信息,微信名头像openid等)
- 4.0 树莓派做下位机播放视频、控制电机舵机、超声波检测、paj7620手势传感器控制,树莓派串口通信等程序分析