ok,上一篇文章已经对img标签下手了。这次更彻底点,给图片添加上灯箱效果
2020-01-02_215330.png首先,引入相关js文件
<!--在header里添加这个-->
<link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<!--先加载jquery依赖-->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!--fancybox的js,还是bootcdn-->
<script src="//cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>
修改Typecho
首先找到HyperDown.php
文件,在Typecho
下的var
目录里。

然后搜索img
,一般在349行开始,修改img标签为
<a data-fancybox=\"gallery\" href=\"{$url}\"><img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"></a>
HyperDown.php文件位置正则替换,与上面方案任选其一
ps:这会导致 <!--more-->
无法正常截断文章。
2020-01-05 更新,修正 <!--more-->
无法正常截断文章的问题。
2020-02-09 跟新,正则表达式增加对atl和title属性的匹配。
首先在你的主题文件找到这个
<?php $this->content(); ?>
用正则修改img标签
<?php
$pattern = '/\<img.*?src\=\"(.*?)\".*?alt\=\"(.*?)\".*?title\=\"(.*?)\"[^>]*>/i';
$replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="$2" title="$3"></a>';
$content = preg_replace($pattern, $replacement, $this->content);
//需要支持截断的添加下面两行
$array=explode('<!--more-->', $content);
$content=$array[0];
echo $content;
?>