如何给wordpress 子比主题加一个小工具用于请求并展示trilium博客最新文章

- 字

2024-08-07

为什么干这事,折腾了多久？※

因为主站用的wordpress ，日记用的trilium，不想写一篇文章，复制两个地方，所以就有了这个想法。

实现这个想法的最大难度不是在wordpress写个小工具调用，而是trilium的ETAPI网上搜不到教程，官方全英文不说，还牛头不对马嘴。

只能自己试着来，为了调试它这个API，折腾了我好一会，最终才调试出了获取指定NODE下最新文章10篇的查询语句。

下面切入主题：

1.开启Trilium的ETAPI※

这个很简单，在trilium界面，点左上角3片叶子图标MENU→Options→ETAPI →Create new ETAPI token

生成了一个token记下来，一会要用到。

你可以试试这个curl命令，看能不能返回你博客指定NODE下最新的文章：

curl -H "Authorization: 你的TOKEN" "https://你的trilium网站/etapi/notes?search=true&ancestorNoteId=a9Usjhpssf1d&ancestorDepth=lt4&orderBy=dateCreated&orderDirection=desc&limit=10"

这里解释下几个重要参数：

search，这个参数卡我最久了，我试过=* =all 都获取不到所有文章，只里必须为true，因为这里的search你指定别的内容，它都是去匹配文章中的字符串，当然可能还有其它高级用法，我也没认真分析了。

ancestorNoteId，就是你想在哪个节点下搜索，这个就是note id。

ancestorDepth，搜索深度，这里参数有eq1,eq3,lt4,gt4，具体意思，可以去这里查看

orderBy，就是字面意思了，根据什么排序

orderDirection，降序，升序了，desc与asc

limit，限制搜索返回几篇了。

假如上面的curl命令你改成自己的参数，能返回想要的json数据，那么就可以继续看下面的，如何在wordpress添加小工具了。

2.在wordpress 添加小工具※

我这里用的是子比主题，其实随便什么主题一样的。

子比主题因为有自带很多文章小工具，我这里抄它一个改改就好。找到wp-content/themes/zibll/inc/widgets/widget-posts.php

可以看到里面有很多小工具了，我这里给它直接照着加一个，完整小工具代码如下：

class Custom_Api_Widget extends WP_Widget {
    // 构造函数
    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_custom_api', // CSS类名
            'description' => '显示从外部API获取的数据'
        );
        $this->authorization_token = ''; // 新增实例变量来存储授权令牌
        parent::__construct('custom_api_widget', '自定义API数据小工具', $widget_ops);
    }

    // 小工具前端显示
    public function widget($args, $instance) {
        $title = apply_filters('widget_title', $instance['title']);
        $api_url = $instance['api_url'];
        $authorization_token = $instance['authorization_token'];
    
        // 调用API获取数据
        $data = $this->fetch_data_from_api($api_url, $authorization_token);
    
        // 显示小工具的HTML结构
        echo $args['before_widget'];
        if (!empty($title)) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
    
        // 显示API数据
        if (!empty($data) && isset($data['results']) && is_array($data['results'])) {
            foreach ($data['results'] as $item) {
                // 检查是否存在标题和noteId
                if (!empty($item['title']) && !empty($item['noteId'])) {
                    // 生成带链接的标题
                    $link = 'https://blog.sztcrs.com/' . $item['noteId']; //这里改成你的trilium分享地址
                    echo '<div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a href="' . esc_url($link) . '" target="_blank">' . esc_html($item['title']) . '<span class="focus-color"></span></a></h2></div></div>';
                }
            }
        }
    
        echo $args['after_widget'];
    }

    // 表单输入
    public function form($instance) {
        $title = esc_attr($instance['title']);
        $api_url = esc_url($instance['api_url']);
        $authorization_token = esc_attr($instance['authorization_token']); // 获取当前的授权令牌

        echo '<p><label for="' . $this->get_field_id('title') . '">标题: <input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . $title . '" /></label></p>';
        echo '<p><label for="' . $this->get_field_id('api_url') . '">API URL: <input class="widefat" id="' . $this->get_field_id('api_url') . '" name="' . $this->get_field_name('api_url') . '" type="text" value="' . $api_url . '" /></label></p>';
        echo '<p><label for="' . $this->get_field_id('authorization_token') . '">Authorization Token: <input class="widefat" id="' . $this->get_field_id('authorization_token') . '" name="' . $this->get_field_name('authorization_token') . '" type="text" value="' . $authorization_token . '" /></label></p>'; // 添加授权令牌输入字段
    }

    // 更新小工具设置
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        $instance['api_url'] = (!empty($new_instance['api_url'])) ? strip_tags($new_instance['api_url']) : '';
        $instance['authorization_token'] = !empty($new_instance['authorization_token']) ? strip_tags($new_instance['authorization_token']) : ''; // 存储新的授权令牌

        return $instance;
    }

    // 使用cURL从API获取数据
    private function fetch_data_from_api($url, $authorization_token) {
        $args = array(
            'method' => 'GET',
            'headers' => array(
                'Authorization' => $authorization_token, // 添加授权头
            ),
        );

        $response = wp_remote_request($url, $args);
        if (is_wp_error($response)) {
            // 错误处理，例如记录日志或返回错误信息
            error_log('API request failed: ' . $response->get_error_message());
            return false;
        }

        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        return $data;
    }
}

上面小工具可直接抄，就是要改一个地方，public function widget($args, $instance) 中$link = 'https://blog.sztcrs.com/' . $item['noteId'];改成你们自己的trilium分享地址。

然后别忘了注册小工具。

注册代码：

// 注册小工具
function register_custom_api_widget() {
    register_widget('Custom_Api_Widget');
}
add_action('widgets_init', 'register_custom_api_widget');

这个你可以跟原有的合并到一起，比如我的就是在页头跟原有的合并了，这样好看：

add_action('widgets_init', 'widget_register_posts');
function widget_register_posts()
{
    register_widget('widget_ui_mian_posts');
    register_widget('widget_ui_oneline_posts');
    register_widget('widget_ui_mini_posts');
    register_widget('widget_ui_mini_tab_posts');
    register_widget('widget_ui_main_tab_posts');
    register_widget('Custom_Api_Widget'); //我们刚加的小工具
}

到这里，增加小工具代码部份就完成了，下面说说怎么添加这个小工具，会的朋友已经可以离场了。