博主半个摄影控。一直想做个相册展示站,最近心血来潮。自用刚需项目。Time便应运而生。前端采用Multiverse,后台用的是typecho。瀑布流无限加载,支持图片灯箱效果。底栏顶栏已集成到index.php首页
For WordPress版本 计划开发适配中...(猴年马月)

秉承开源精神,代码无加密,已打包至GitHub

截图:

Time相册主题 for typecho模板-钻芒博客
Time相册主题 for typecho模板-钻芒博客
Time相册主题 for typecho模板-钻芒博客

这个一个基于typecho的相册模板。前端采用Multiverse,由钻芒适配并优化

使用方法

将主题time文件夹上传到typecho模板目录 /usr/themes/

  • 使用前需前往typecho后台,设置-阅读,调整每页文章显示替换为 999
  • 首页只会输出5篇文章。需调整大一些,即可实现无限滚动

Time相册主题 for typecho模板-钻芒博客

图片添加方式:

考虑到国内的IDc带宽,为了用户的访问速度。图片采用外链方式插入。(推荐搭配图床使用)

图片链接填充在文章编辑器下面的自定义段落的图片链接一栏

Time相册主题 for typecho模板-钻芒博客

关于图片问题

网页中图片一直是占用资源最大的。图片站当然更了不得。太大会影响访问速度。说一下现有解决方案

  1. 压缩图片 推荐tinyPNG   更多压缩工具可以查看极客导航 
  2. 列表项 图片转换成webp格式,webp由Google开发,可无损大幅减少图片内存。原生支持Chrome Firefox,安卓。ios不支持(可代码适配,后续加入)
  3. (推荐)使用又拍云WebP 自适应方案减少图片资源大小
  • 国内的云存储一般都支持格式转换,如阿里云,又拍云等
又拍云WebP 自适应方案,自动判断浏览器是否支持 WebP 格式
如图,利用又拍云webp自适应方案可自动判断浏览器是否支持 WebP 格式,并返回webp或原图
Time相册主题 for typecho模板-钻芒博客

开启方法在又拍云控制台-成本控制-WebP 自适应,开启即可。
官方文档:https://blog.upyun.com/?p=1539

阿里云快速将图片转换成webp格式。在阿里云oss可使用样式将图片转换成webp
----此方法不及上边的又拍云自适应判断,例如图片在ios上无法加载----

Time相册主题 for typecho模板-钻芒博客

webp格式实例演示: (点击图片可放大)

转换前  jpg格式   268kb https://a-oss.zmki.cn/2019/20191121-9d2f622305c0c.jpg

Time相册主题 for typecho模板-钻芒博客

转换后 webp格式 140kb     https://a-oss.zmki.cn/2019/20191121-9d2f622305c0c.jpg-webp
(此图webp格式iOS会无法加载。)

Time相册主题 for typecho模板-钻芒博客

更新

  • V1.0.2更新
  1. 修复进场加载特效(黑色瀑布)
  2. 优化访问速度
  • V1.0.1 第一个版本
  1. 多字段后台可调
  2. 友好的SEO,后台可设置tkd
  3. 关于联系方式后台可调

致谢:

HTML UP

主题下载:

温馨提示: 此处内容需要 评论本文刷新本页 才能查看!

相关文章:

又拍云:如何通过 WebP 自适应方案减少图片资源大小

优化图片占用:打造time相册终极优化方案-缩略图压缩和webp自适应