用 HTMX 库为 WordPress 实现 Infinite Scroll

Infinite Scroll 是一种常用的前端效果，当文章页面比较多，且内容比较简短时，使用Infinite Scroll 效果可以让用户不用刷新页面就可以浏览更多信息，非常方便。

以前我们实现 Infinite Scroll 效果时，经常会使用插件或 Infinite Ajax Scroll，今天，借助HTMX库的帮助，我们可以很简单的在主题是实现 Infinite Scroll 效果，而不再依赖其他插件。下面我们来看一下具体的实现方法。

首先，我们需要修改模版文章循环

首先我们需要修改文章列表页的文章循环代码如以下样式，注意其中的 ht- 这些是 HTMX 的语法。

<div id="posts-container">
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php get_template_part('template-parts/content', get_post_format()); ?>
        <?php endwhile; ?>
    <?php endif; ?>
</div>


<?php if ($wp_query->max_num_pages > 1) : ?>
    <button hx-get="<?php echo admin_url('admin-ajax.php'); ?>?action=load_more_posts&page=2"
            hx-target="#posts-container"
            hx-trigger="click, intersect once"
            hx-swap="beforeend"
            hx-indicator="#loading">
        Load More
    </button>
    <div id="loading" class="htmx-indicator">Loading...</div>
<?php endif; ?>

然后 实现加载更多文章的后端

第二步，我们需要实现一个 Ajax 功能，HTMX 会发送请求到这个 Ajax 地址，然后 这个 Ajax 地址会返回此次查询的文章以及下一页的加载按钮。

add_action('wp_ajax_load_more_posts', 'load_more_posts');add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

function load_more_posts() {
    $page = $_GET['page'];
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => get_option('posts_per_page'),
        'paged' => $page,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            get_template_part('template-parts/content', get_post_format());
        endwhile;
    endif;

    wp_reset_postdata();

    if ($page < $query->max_num_pages) {
        echo '<button hx-get="' . admin_url('admin-ajax.php') . '?action=load_more_posts&page=' . ($page + 1) . '"
                      hx-target="#posts-container"
                      hx-trigger="click, intersect once"
                      hx-swap="beforeend"
                      hx-indicator="#loading">
                Load More
              </button>';
    }

    die();
}

现在，让我们来解释一下上面的代码。

• HTMX 库通过 hx-* 属性来控制 AJAX 行为。
• hx-get 指定了 AJAX 请求的 URL。
• hx-target 指定了新内容应该插入的位置。
• hx-trigger 设置了触发 AJAX 请求的事件。在这里，我们使用 “click” 和 “intersect once”，这意味着当按钮被点击或进入视口时会触发请求。
• hx-swap 指定了如何插入新内容。”beforeend” 表示在目标元素的末尾插入。
• hx-indicator 用于显示加载指示器。
• 这个实现会在用户滚动到页面底部或点击 “Load More” 按钮时加载更多文章。新的文章会被添加到现有文章列表的末尾，并且会自动生成新的 “Load More” 按钮（如果还有更多页面）。

整个过程中，我们除了需要在一开始引入 HTMX库，没有编写任何 JavaScript 代码，然后，如果你刚好也使用了 Tailwind CSS，连 CSS 也不用写了，整个开发过程中，只需要编写 PHP 和 HTML 代码就可以完成开发，省去了切换语言带来的心智负担，整个开发过程会非常顺畅，效率也会提高很多，建议有新项目需要开发的朋友尝试一下。