Typecho 使用 fancybox 踩过的坑

为了满足点击图片直接放大得到灯箱效果，同时也看了很多人的站用了这个方案，微博手机端网页版貌似也在用这个玩意。想给自己站也搞一个2333，于是就开始寻找项目官网。

坑一

百度搜完官网之后，点进去一看，发现看到的 fancybox 和官网上的不一样！然后我才明白我要找的东西应该是 fancybox3 ...
官网：https://fancyapps.com/fancybox/3/
文档：http://fancyapps.com/fancybox/3/docs/
js和css的引入部分就此省略

继续

要用这个 jq 插件的话，需要把文章里的图片使用<a>标签来进行包裹，具体的方式是这样婶的：

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
    <img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
    <img src="thumbnail_2.jpg" alt="" />
</a>

于是我想起来我现在的模板主题里有这么一个 function 可以用，这个是原来用来把<a>标签给处理成target="_blank"用的，顺便利用一下它（调用方式是在原post.php和page.php里输出文章内容的位置<?php $this->content(); ?>换成<?php parseContent($this); ?>即可）

也可以不用改主题模板文件，可以在functions.php用ThemeInit方法实现。

function themeInit($archive) {
    if ($archive->is('single')) {
        $archive->content = parseContent($archive->content);
    }
}

parseContent方法如下：

function parseContent($obj){
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $obj->content);
    echo trim($obj->content);
}

做了一下加法，让他除了能实现上述功能之外，还能实现图片下方出现<figcaption>描述的功能，一举多得

function parseContent($obj){
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $obj->content);
    $pattern = '/<\s*img[\s\S]+?(?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+[\s\S]*?>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" no-pjax data-type="image" data-caption="$2" ><img src="$1" alt="$2" title="点击放大图片"></a><figcaption class="article-holder">$2</figcaption>';
    $obj->content = preg_replace($pattern, $replacement, $obj->content);
    echo trim($obj->content);
}

这样的话，文章上的适配就完成了~

坑二

如果把parseContent()函数的功能套在文章列表页的话，那么more分隔符就不好使了...淦
然后我就想到了用jq实现了替换标签的这么一个功能

$(document).ready(function(){
    $(".post-content .jq_need_box img").each(function(){
        var _a = $("<a></a>").attr({"href":this.src,"data-fancybox":"gallery","no-pjax":"","data-type":"image","data-caption":this.alt});
        $(this).wrap(_a);
    });
});

为了让这个能够不在现有的文章页里重复使用这个功能，我只把这段 js 放在了index.php里和archive.php里面（因为文章页的这个功能已经实现过了，无需再次替换）。
令各位在用这个 jq 的方法的时候，切记要重新指定 jq 选择器，也就是我上面的$(".post-content .jq_need_box img")的那段，需要按照自己站点主题的情况自行指定<img>标签！

至此，踩坑结束，撒花~

Ajax/Pjax

无需做另外的操作，至少我这边是不需要任何重载函数，仍旧可以跨页后正常使用

2020.5.9 更新

修复 <figure>标签使用不规范的问题

function parseContent($obj){
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $obj->content);
    $pattern = '/<\s*img[\s\S]+?(?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+[\s\S]*?>/i';
    $replacement = '<figure><a href="$1" data-fancybox="gallery" no-pjax data-type="image" data-caption="$2" ><img src="$1" alt="$2" title="点击放大图片"></a><figcaption class="article-holder">$2</figcaption></figure>';
    $obj->content = preg_replace($pattern, $replacement, $obj->content);
    echo trim($obj->content);
}