为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>