Typecho 添加图片灯箱

warning: 这篇文章距离上次修改已过197天,其中的内容可能已经有所变动。

ok,上一篇文章已经对img标签下手了。这次更彻底点,给图片添加上灯箱效果

2020-01-02_215330.png2020-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文件位置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;
?>

添加新评论

* 已开启反垃圾保护,《隐私政策》