博主半个摄影控。一直想做个相册展示站,最近心血来潮。自用刚需项目。Time便应运而生。前端采用Multiverse,后台用的是typecho。瀑布流无限加载,支持图片灯箱效果。底栏顶栏已集成到index.php首页
For WordPress版本 计划开发适配中…(猴年马月)
For WordPress版本 计划开发适配中…(猴年马月)
秉承开源精神,代码无加密,已打包至GitHub
- Demo: photo.zmki.cn
- GitHub:github.com/wclk/time
- 优化图片占用:www.zmki.cn/4956.html
截图:
这个一个基于typecho的相册模板。前端采用Multiverse,由钻芒适配并优化
使用方法
将主题time文件夹上传到typecho模板目录 /usr/themes/
- 使用前需前往typecho后台,设置-阅读,调整每页文章显示替换为 999
- 首页只会输出5篇文章。需调整大一些,即可实现无限滚动
图片添加方式:
考虑到国内的IDc带宽,为了用户的访问速度。图片采用外链方式插入。(推荐搭配图床使用)
图片链接填充在文章编辑器下面的自定义段落的图片链接
一栏
关于图片问题
网页中图片一直是占用资源最大的。图片站当然更了不得。太大会影响访问速度。说一下现有解决方案
- 压缩图片 推荐tinyPNG 更多压缩工具可以查看极客导航
- 列表项 图片转换成webp格式,webp由Google开发,可无损大幅减少图片内存。原生支持Chrome Firefox,安卓。ios不支持(可代码适配,后续加入)
- (推荐)使用又拍云WebP 自适应方案减少图片资源大小
- 国内的云存储一般都支持格式转换,如阿里云,又拍云等
又拍云WebP 自适应方案,自动判断浏览器是否支持 WebP 格式
如图,利用又拍云webp自适应方案可自动判断浏览器是否支持 WebP 格式,并返回webp或原图
开启方法在又拍云控制台-成本控制-WebP 自适应,开启即可。
官方文档:https://blog.upyun.com/?p=1539
阿里云快速将图片转换成webp格式。在阿里云oss可使用样式将图片转换成webp
—-此方法不及上边的又拍云自适应判断,例如图片在ios上无法加载—-
—-此方法不及上边的又拍云自适应判断,例如图片在ios上无法加载—-
webp格式实例演示: (点击图片可放大)
转换前 jpg格式
268kb
https://60yu.w4i.cn/2019/20191121-9d2f622305c0c.jpg
转换后 webp格式
140kb
https://60yu.w4i.cn/2019/20191121-9d2f622305c0c.jpg-webp
(此图webp格式iOS会无法加载。)
更新
- V1.0.2更新
- 修复进场加载特效(黑色瀑布)
- 优化访问速度
- V1.0.1 第一个版本
- 多字段后台可调
- 友好的SEO,后台可设置tkd
- 关于联系方式后台可调
致谢:
HTML UP
主题下载:
相关文章:
优化图片占用:打造time相册终极优化方案-缩略图压缩和webp自适应
感谢您的来访,获取更多精彩文章请收藏本站。
© 版权声明
THE END
请登录后查看评论内容