博主半个摄影控。一直想做个相册展示站,最近心血来潮。自用刚需项目。Time便应运而生。前端采用Multiverse,后台用的是typecho。瀑布流无限加载,支持图片灯箱效果。底栏顶栏已集成到
For WordPress版本 计划开发适配中...(猴年马月)
index.php
首页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://a-oss.zmki.cn/2019/20191121-9d2f622305c0c.jpg
转换后 webp格式
140kb
https://a-oss.zmki.cn/2019/20191121-9d2f622305c0c.jpg-webp
(此图webp格式iOS会无法加载。)
更新
- V1.0.2更新
- 修复进场加载特效(黑色瀑布)
- 优化访问速度
- V1.0.1 第一个版本
- 多字段后台可调
- 友好的SEO,后台可设置tkd
- 关于联系方式后台可调
致谢:
HTML UP
主题下载:
相关文章:
优化图片占用:打造time相册终极优化方案-缩略图压缩和webp自适应
聚合全网优质资源,尽在向日葵!全站优品,只为传递价值
下载必看: 本站资源均源自互联网,由向日葵收集整理,如果侵犯了您的合法权益,请联系本站rgmy@qq.com我们会及时删除。部分作品由向日葵进行二次创作修改,转载请注明! 本站资源仅供研究、学习交流之用,我们不保证内容的长久可用性,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
声明:本站所有文章,如无特殊说明或标注,内容均来源于互联网。如若本站内容不慎侵犯了您的的合法权益,请立即联系我们进行删除。
下载必看: 本站资源均源自互联网,由向日葵收集整理,如果侵犯了您的合法权益,请联系本站rgmy@qq.com我们会及时删除。部分作品由向日葵进行二次创作修改,转载请注明! 本站资源仅供研究、学习交流之用,我们不保证内容的长久可用性,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
声明:本站所有文章,如无特殊说明或标注,内容均来源于互联网。如若本站内容不慎侵犯了您的的合法权益,请立即联系我们进行删除。