跳至主要內容

安知鱼主题添加一图流

AI悦创原创2024年8月28日大约 8 分钟...约 2404 字

1. 效果预览

2. 参考文章

3. 前言

随着互联网技术的发展,越来越多的人选择使用静态博客来展示自己的个人风格和内容。在一个偶然的机会下,我接触了 Hexo 静态博客的搭建与使用,并且对其进行了美化。

本文以本站使用的主题 anzhiyu 为例,介绍了如何为首页顶部图配置渐进式加载。渐进式加载是一种优化网页性能和用户体验的技术,它可以让图片在加载过程中逐渐显示出清晰度,从而避免了图片加载缓慢或失败时出现的空白或占位符。这个方法同样适用于一图流的博客背景,因此我们只需要更改部分代码即可实现本站首页效果。为了方便读者的阅读和参考,本文将详细描述操作步骤,并提供相关的截图和示例。在此,我要感谢石头姐提供了详细的配置教程,以及小旦为本站首页效果提供了宝贵的帮助。他们的博客链接如下:

4. 操作步骤

4.1 首页顶部图渐进式加载

1. imgloaded.js
  • 新建文件 themes/anzhiyu/source/js/imgloaded.js 新增以下内容,并按照注释调整照片路径

4.2 首页一图流渐进式加载

1. imgloaded.js
  • 新建文件 themes/anzhiyu/source/js/imgloaded.js 新增以下内容,并按照注释调整照片路径

5. 引入文件

inject:  
  head:  
    - <link rel="stylesheet" href="/css/imgloaded.css?1">  
  
  bottom:  
    - <script async data-pjax src="/js/imgloaded.js?1"></script> # 首页图片渐进式加载

6. 配置图片

# The banner image of home page
index_img: "background: url() top / cover no-repeat"
首页顶部图渐进式加载
const config = {  
  smallSrc: 'https://blog.bornforthis.cn/img/xiaotu.jpg', // 小图链接 尽可能配置小于100k的图片  
  largeSrc: 'https://blog.bornforthis.cn/img/tu.jpg', // 大图链接 最终显示的图片  
  mobileSmallSrc: 'https://blog.bornforthis.cn/img/sjxt.jpg', // 手机端小图链接 尽可能配置小于100k的图片  
  mobileLargeSrc: 'https://blog.bornforthis.cn/img/sjdt.jpg', // 手机端大图链接 最终显示的图片  
  enableRoutes: ['/'],  
  };

7. 图片懒加载配置修改

lazyload:
  enable: true
  field: post # site/post
  placeholder:
  blur: true
  progressive: true

8. 大功告成

到这时候,如果你的图片文件配置正确,可以执行 Hexo 的三连命令来查看效果了!

欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQ

方法二:微信:Jiabcdefh

你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
通知
关于编程私教&加密文章

Your primary language is en-US, do you want to switch to it?

您的首选语言是 en-US,是否切换到该语言?