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

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

0e86216a8526a98a5ee4f87c20addd08

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

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

截图:

20200903220529436

 

565ccb7c6f2b047510afdefa78ef5e4d

16814240c1d594c3d9f8e64d51536d05
bdb2eda58b8fccafb9b662b31d71807b

移动端小窗口:

2e87efa9a1cfbf40be772e0b272e09f3

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

后台设置:

d7b224c106df1de06565b04da15bd791

84cbac2a782d3b85c262713e79dd1d68

使用方法

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

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

93ba345351af24ffbf37eeeb50c6cd2e

图片添加方式:

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

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

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

df3fc43b405b9fd2501032fe280eb29a

 

更新

  • V1.1.4更新 2021年10月3日
  1. 替换部分oss外链url转为本地储存,原有引用本站url将失效无法访问。请即刻更新
  2. 新增后台主题 检测新版本功能。
  • 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

交流群

zmki交流群【已满】:  737656800

zmki交流群②:  991742215

ce5a6e5f175c95ff11103b2d2a92d470

主题下载:

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或原图
af0caa8a9bdf8fb965c5519c6820d21d

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

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

4714c5a4bfd3b52d650a83a933dd5251

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

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

10ca5706aed584f573b7d2c4e7d2bbdf

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

10ca5706aed584f573b7d2c4e7d2bbdf

 

给TA买糖
共{{data.count}}人
人已赞赏
网络资源软件分享

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

2019-11-17 14:32:46

其他分享文档笔记运维

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

2019-11-22 22:17:55

257 条回复 A文章作者 M管理员
  1. 0000

    这个新版本不错的

  2. 谢谢大佬分享

  3. pacino

    V1.1.4更新 2021年10月3日
    这个在哪里下载?

  4. pacino

    主题很喜欢,感谢作者

  5. l2221

    很不错的主题,谢谢啦

  6. 终于找到了相册的插件了,谢谢啦

  7. l2221

    谢谢大佬!!!!

  8. l2221

    谢谢大佬分享

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