为Typecho添加Fancybox灯箱效果,通过在header.php中引入jQuery和Fancybox库,并在post.php中替换图片标签以添加fancybox属性,实现图片点击放大功能。
AI 摘要

因为Typecho本身没有灯箱效果,之前试过的灯箱插件感觉都有点问题

所以手动加了 FancyBox ,现在体验还蛮不错的

下面是添加过程:

先将下面内容添加到header.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!--如果主题已经引用了jQuery库,可以忽略这条-->
<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>

post.php中的

<?php $this->content(); ?>

替换成

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" data-caption="' . htmlspecialchars($this->title) . '"><img src="$1" alt="' . htmlspecialchars($this->title) . '" loading="lazy"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;  
?>

或者

<?php
    $pattern = '/<img.*?src="(.*?)".*?alt="(.*?)".*?>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" data-caption="$2"><img src="$1" alt="$2" loading="lazy"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;  
?>

再运行脚本即可

<script> 
Fancybox.bind("[data-fancybox]", { l10n: Fancybox.l10n.zh_CN, });
</script>