使用带有无限滚动的 Tumblr Like 按钮

Posted 2023-02-23

【中文标题】使用带有无限滚动的 Tumblr Like 按钮

【英文标题】：Using Tumblr Like Button with Infinite Scroll

【发布时间】：2013-04-29 16:53:12

【问题描述】：

我正在尝试在 Infinite Scroll 中使用新的 Tumblr 点赞按钮（允许您的主题在主页上的各个 Tumblr 帖子上使用点赞按钮）它们适用于第一个“页面”的前 15 个帖子，但随后它加载另一个页面，喜欢按钮停止工作。这些是 Tumblr 在文档页面上给出的说明：

功能：Tumblr.LikeButton.get_status_by_page(n) 说明：请求一个新的帖子页面后调用该函数。获取页面 刚刚作为整数加载的数字。

函数：Tumblr.LikeButton.get_status_by_post_ids([n,n,n]) 描述：请求单个帖子的喜欢状态。接受一个帖子 ID 数组。

由于我不确定如何正确应用 JQuery 我不确定在哪里添加这些功能，这是我当前主题的 JS：

    // MASONRY
    var $container = $('#content');

    $container.imagesLoaded( function()
        $container.masonry(
            itemSelector: '.entry',
            columnWidth: 220
        );
    );

    // INFINITE SCROLL
    $container.infinitescroll(
        navSelector  : '#pagination',
        nextSelector : '#pagination li a.pagination_nextlink',
        itemSelector : '.entry',
        loading: 
            img: 'http://static.tumblr.com/glziqhp/K37m9yaub/257__1_.gif'
        
    ,

    function( newElements ) 
        var $newElems = $( newElements ).css(
            opacity: 0
        );
        $newElems.imagesLoaded(function()
            $newElems.animate(
                opacity: 1
            );
            $container.masonry(
                'appended', $newElems, true
            ); 
        );
    );

【参考方案1】：

首先，您需要为每个帖子添加一个唯一的帖子 ID：

<div class="entry masonry-brick" id="PostID">...</div>

文档提到在附加/加载新帖子（或新页面）后请求类似状态：

function( newElements ) 
    var $newElems = $( newElements ).css(
        opacity: 0
    );

    // Create Array of $newElems IDs
    var $newElemsIDs = $newElems.map(function ()  
        return this.id; 
    ).get();

    $newElems.imagesLoaded(function()
        $newElems.animate(
            opacity: 1
        );
        $container.masonry(
            'appended', $newElems, true
        );

        // Let's just see what we have, remove console.log() if working
        console.log($newElems, $newElemsIDs);


        Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
    );
);

我希望这会为您指明正确的方向。

【讨论】：

非常感谢您的帮助，很遗憾这没有奏效。这是我的 Tumblr：andbamnan.tumblr.com 如果您已退出 Tumblr/没有帐户，那么它可以正常工作（我想是因为它们只是变成了通用的“注册 Tumblr”链接）但是一旦您登录心只是没有出现在第一页之后。

你是冠军 mikedidthis，工作就像一个魅力。谢谢哥们！

这很好用，谢谢。这方面的官方文档还存在吗？我在任何地方都找不到它