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 后台偏好设置里给这个插件打勾选中启用就可以了。

选中,启用插件

Subscribe to Atom

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe