/ TTRSS

TTRSS 的一个图片插件

有些网站页面中在 HTML 刚刚加载完成时,其中的 img 图片标签并没有 src 属性,而是把图片链接放在一个自定义的属性里,比如这样,放在 data-url 里:

<img data-url="http://example.com/aaa.jpg">

然后由 js 来对 img 标签里的属性进行修改,把 data-url 的内容,放到 src 里,以此来实现图片的懒加载。当通过 RSS 订阅,在 RSS 阅读器里看这种文章内容时,因为 js 的缺失,图片标签里就一直都不会有 src 属性,也就看不到图片了。好在 TTRSS 支持插件扩展,可以比较方便地解决这个小问题。

在 TTRSS 官方有个非常简略的页面 Making plugins 介绍如何写它的插件。大意是提供了从抓取数据、到数据库、到页面展示之间几个可以 HOOK 的点,在这些位置,对库中的内容进行处理。看完这点介绍,仍然一头雾水,不过还有一些插件的例子可以学习和模仿。

在 TTRSS 的主目录下 plugins 目录,创建一个新的目录,新目录名就是要写的会显示在 TTRSS 后台的插件名,在这个目录里新建 init.php 文件作为入口,根据不同的 HOOK 点以及要做的不同功能,在里面实现几个指定的函数,就算完成了。

最终照虎话猫写了一个这样的 TTRSS 插件:

// ttrss/plugins/af_imgdataurl/init.php

<?php
class Af_ImgDataUrl extends Plugin {
    private $host;

    function about() {
        return array(1.0,
                "Convert data-url in img tag to src",
                "noodles");
    }

    function init($host) {
        $this->host = $host;
        $host->add_hook($host::HOOK_ARTICLE_FILTER, $this);
    }

    function hook_article_filter($article) {
        $charset_hack = '<head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        </head>';

        $doc = new DOMDocument();
        $doc->loadHTML($charset_hack . $article["content"]);
                $found = false;
        if ($doc) {
            $xpath = new DOMXpath($doc);
            $images = $xpath->query('(//img[@data-url])');
            foreach ($images as $img) {
                $src = $img->getAttribute("data-url");
                $img->removeAttribute("data-url");
                $img->setAttribute("src", $src);
                $found = true;
            }
            $images = $xpath->query('(//img[@data-original])');
            foreach ($images as $img) {
                $src = $img->getAttribute("data-original");
                $img->removeAttribute("data-original");
                $img->setAttribute("src", $src);
                $found = true;
            }
            if ($found) {
                $doc->removeChild($doc->firstChild);
                $article["content"] = $doc->saveHTML();
            }
        }

        return $article;
    }

    function api_version() {
        return 2;
    }
}
?>

主要逻辑在 hook_article_filter 函数里:解析 HTML,获取图片 url,设置 src 属性,生成新的 HTML 返回出去。

然后去 TTRSS 后台偏好设置里给这个插件打勾选中启用就可以了。

选中,启用插件