给文章页添加图片灯箱能极大优化访客阅读体验

本文以Initial主题为例,添加fancybox3灯箱插件优化阅读体验

fancybox.png

调用相关控件CDN

这里直接调用Bootcdn的资源

bootcdn.png

jquery-cdn.png

fancybox-cdn.png

我们需要在主题中调用这三个文件

编辑主题文件

进入Typecho根目录中的/usr/themes/initial
找到header.phpfooter.php并打开编辑

首先调用fancybox的css样式文件,添加的位置为header.php中head标签内

<link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">

fancybox-css.png

然后是调用fancybox依赖的jQuery和fancybox本身

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

这里需要对文章内的img标签外层套一个a标签,并且赋值分组和图片地址,否则控件不会生效
具体脚本语句如下

$(document).ready(function(){
    $(".post-content img").each(function() {  
        var src=$(this).attr("src");
        $(this).wrap("<a data-fancybox=\"images\" href=\""+src+"\">")
    });
})

不同主题的文章内容标签类名大多不相同,请以实际为准

此外我们还要判断是否为文章详情页,否则例如本博客的友人帐页面中,友情链接的图片会因被包了一个父元素而乱掉
因此在script标签外添加一个Typecho的is判断语句

<?php if ($this->is('post')) : ?>
    script标签....
<?php endif; ?>

完成图如下:

fancybox-js.png

效果

eg-pc.png

eg-phone.png

文章目录