Time相册主题 for typecho模板 [2020年2月12日更新至V1.1.2 支持懒加载]

20191123-463484cf3a395

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

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

截图:

20200212-d2e9eca4d241e

20200212-cced943a73035

20200212-15360b872f82c
20200212-53a848c97e9ae

移动端小窗口:

20200212-b2e6da9e9c90a

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

后台设置:

20200212-6cf3bed46f765

20200212-385eeffa45c0c

使用方法

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

  • 使用前需前往typecho后台,设置-阅读,调整每页文章显示替换为 999
  • 首页只会输出5篇文章。需调整大一些,即可实现无限滚动
  • #当图片少于12张时点击预览底部弹窗会有错位移动,请多上传几张图片即会正常。

20191122-3b6d4a8d7ff1a

图片添加方式:

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

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

配合新版本V1.1.2后台设置图片处理规则,可大幅优化性能(搭配阿里云oss或又拍云储存等..)

20200212-2e9b341713b14

 

更新

  • V1.1.3更新 2020年2月15日
  1. 优化了部分选项,新增主题内更新检测
  2. 此版本懒加载性能问题未修复,若图片占用较大会导致页面卡顿。配合后台图片处理使用,即可解决此问题
  3. 优化相关说明可以查看下方相关文章,演示站60张图片 优化前→优化后  31M → 4M
  4. 下个版本主力解决懒加载性能问题
  • V1.1.2更新 2020年2月11日
  1. 新增瀑布流懒加载,解决图片多了后加载超级缓慢的问题
  2. 优化浏览器侧边进度条,并增加全屏显示按钮,一键切换沉浸其中。
  3. 后台新增自定义图片处理格式,缩略图和展开图可分别设置。简单设置高效使用
  4. 部分功能集成至后台方便使用
  • V1.0.2更新2020年1月9日
  1. 修复进场加载特效(黑色瀑布)
  2. 优化访问速度
  • V1.0.1 第一个版本 2019年11月22日
  1. 多字段后台可调
  2. 友好的SEO,后台可设置tkd
  3. 关于联系方式后台可调

致谢:

HTML UP

交流群

20200214-a874495080831

主题下载:

V1.1.3版本  已同步更新Github,欢迎博客内留言下载
V1.1.2版本  已知存在的问题,经测试使用Chrome内核浏览器不配合图片处理使用图片过多后会导致页面卡顿。暂行解决办法就是使用非Chrome内核浏览器访问。如IE或火狐。则不会出现此问题。 
Time主题下方评论免费下载

相关文章:

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

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

图片处理使用:阿里云oss、又拍云储存等储存桶图片处理介绍 –配合 Time时光相册使用

关于图片问题

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

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

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

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

20191122-606d69b9caf92

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

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

20191121-9d2f622305c0c

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

%title插图%num

 

为TA充电
共{{data.count}}人
人已赞赏
网络资源软件分享

ABViewerx64 14.0.0.10 中文版安装附破解教程

2019-11-17 14:32:46

其他分享文档笔记运维

Time相册图册优化方案-缩略图压缩和webp自适应

2019-11-22 22:17:55

229 条回复 A文章作者 M管理员
  1. 博主你好 网站访问时常出现Captcha 一直卡在这里进不去 请问是不是主题问题?

    • 验证码和主题没有关系,请检查你的服务器主机防火墙或者typecho插件

  2. 你好,帮我看看,我的网页,点击打开原图无法在屏幕里,是不是CSS哪里有问题,请指点下 😯

    • 可能是修改主题所致,建议重新下载主题重新安装。

    • Alextao

      又重新下了一次上传,还是这样,有点头大哦

  3. 太感谢了!

  4. 博主你好,我想在上面放自己视频,但似乎无法播放,而且点进去自动播放

    • 你好,目前相册只支持图片哦

  5. 感谢分享,很喜欢这个

  6. 希望点击图片可以有显示图片的一些简介文字,例如:这张照片是我和某某某一起去某地玩耍时拍摄的,那时我们还很青涩,怀念那个时光,等等的照片的背景介绍。

    • 目前有的,只在PC端显示

  7. 来看看

  8. 非常美 大气的 模板 瞬间让我也想 美好的拍照去了

  9. 感谢楼主,哈哈啊哈哈哈

  10. 请问下 联系我 那里是在呢么设置的

    • 后台有设置选项

  11. 使用下来能提两个小建议;
    1.如果以文章多图,可实现在同一文章中插入多图,(类似小合集);
    2.页面可以不使用模板页面,可正常的页面显示;
    3.希望可调整首页图片展示大小;
    4.希望可以增加首页图片归档排序(按某个时间段)https://tvax3.sinaimg.cn/large/006WgSkjgy1gpuubuv1q6j30mg08pwfx.jpg

    谢谢!

    • 好的感谢建议,但由于工作原因,暂无更新计划排上日程。

  12. 很感谢博主的贡献,让用户能更好的展现自己的作品;

    • 谢谢 😎

  13. 非常美 大气的 模板 赶紧多拍点照片

  14. 666很好用

  15. 安 稳

    很不错很喜欢这个

  16. 启用的时候提示 您选择的风格不存在

    • 检查主题是否上传完整,路径是否正确

  17. […] 使用说明:https://www.zmki.cn/4953.html […]

  18. 谢谢分享~

  19. 真棒 😕

  20. 大佬,相册很好看,我有个想法,能不增加一层目录,以分类作为目录。

    • 你的想法很不错,但是不可以 🙂

  21. 感谢作者大大

  22. 感谢分享

  23. 支持一下

  24. 感谢大佬分享!!刚好最近想弄一个相册

  25. haibinstar wu

    这个主题风格太好看了

  26. 非常美 大气的 模板 想要 让美好照片得到很好的展示

  27. 不错 不错

  28. 康康主题 😎 😎

    • 头像绝了 😯

  29. 支持,完美

  30. 求源码 😈

  31. 启用缺少样式表

  32. 非常美 大气的 模板 瞬间让我也想 美好的拍照去,上次一直没审核通过, 没下载

  33. 非常美 大气的 模板 瞬间让我也想 美好的拍照去了

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索