Typecho给文章内图片添加懒加载及图片描述
本文介绍了在Typecho中为文章图片添加懒加载、类名和图片描述的方法。通过修改`HyperDown.php`和`post.php`文件,实现了图片懒加载功能,并添加了图片描述。
本文最后由 荒野孤灯 更新于 2024 年 8 月 14 日 16 时 42 分,已有 168 天未更新。今日被查阅 1 次,若内容或图片资源失效,请留言反馈,谢谢!
摘要由 AI 智能生成
本文记录 typecho 给文章内图片添加懒加载功能。顺便实现给文章内图片添加类名 class,以及给文章内图片下方增加图片描述。
今天尝试了一下给文章内图片添加懒加载功能,因文章内的图片是直接用 Markdown 格式写入的,一张张修改添加有点不大现实。最后尝试修改了一下 typecho 的源文件,操作步骤如下:
修改 HyperDown.php
修改程序文件 var/Utils/HyperDown.php
的第 496 与第 508 行关于 img 的部分。
496 行原文如下:
"<img src=\"{$url}\" alt=\"{$title}\" title=\"{$title}\">"
增加一个 class 名,增加懒加载功能,增加图片下方描述:
"<img class=\"lazyload\" src=\"/usr/themes/cactus/images/loading.gif\" data-original=\"{$url}\" alt=\"{$title}\" title=\"{$title}\">
<br>
<center>图:{$title}</center>"
508 行用同样的格式增加一个类名,增加懒加载功能,增加图片下方描述;508 行原文如下:
"<img src=\"{$this->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
增加一个 class 名,增加懒加载功能,增加图片下方描述:
"<img class=\"lazyload\" src=\"/usr/themes/cactus/images/loading.gif\" data-original=\"{$this->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">
<br>
<center>图:{$escaped}</center>"
以上代码中的 " loading.gif " ,替换成您自己的加载动图路径!类名 " lazyload " 可以在自己的 CSS 中自定义您想要的样式。
修改 post.php
在主题模板文件 post.php
或者 single.php
文件的文章内容输出代码 <?php parseContent($this); ?>
前一行添加下面代码:
<script src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
setTimeout(function() {$("img").lazyload({effect: "fadeIn", threshold: 100, failurelimit: 2});},100);</script>
修改完成后保存退出,我们就发现文章图片增加了三个功能。
1、增加了class="lazyload"
,
2、增加了懒加载,
3、增加了图片描述。
效果展示
前端代码如下:
<p>
<center>
<img class="lazyload" src="/usr/themes/cactus/images/loading.gif" data-original="https://pic.yxjnotes.top/blog/2023/10/03/pPOKVYD.jpg" alt="水库二坝钓鱼" title="水库二坝钓鱼">
<br>
<center>图:水库二坝钓鱼</center>
</center>
</p>
前端效果如下:
好了,小伙伴们。快去动手试试吧!
存在问题
与图片灯箱放大效果冲突,目前不知道怎么解决,探索中……
冲突说明:懒加载图片 src
指向加载占位动图, data-original
指向真实图片地址;但是图片灯箱只能用 src
,换成 data-original
后无效果。
图片灯箱放大效果代码如下:
<link rel="stylesheet" href="<?php cjUrl('css/lightbox.min.css'); ?>">
<script src="<?php cjUrl('js/lightbox.min.js'); ?>"></script>
<script>
$('#post-content img').wrap(function () {
return '<a href="' + this.src + '" title="' + this.alt + '" data-lightbox="roadtrip"></a>';
});
</script>
有空的大佬可以帮我研究研究,拜谢!
分类标签:折腾,typecho,主题模板,工具代码,图片懒加载
文章链接:https://www.80srz.com/posts/1377.html
许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
我是使用js写的,感觉还可以。就是没有描述这个功能我还没有实现。
整个友链,如何? 你那不能留言呢,,报错500
好几个月没有动了,晚上回去测试一下。
现有的图片懒加载js都有个问题,每个链接会发送2次请求。火狐浏览器还好,第二次会直接读取第一次的缓存,但是chrome系列的浏览器都是发送2次,这不是反而增加服务器负担吗我想
大佬,这么深奥啊,小白不懂呢