Instafeedjs moment.js返回时间之前

Instafeedjs moment.js return time ago

本文关键字:时间 返回 moment js Instafeedjs      更新时间:2023-09-26

使用instafeedjs和moments .js渲染instagram feed并将日期格式化为相对格式(X天/月/小时/分钟前)。

如下所示,成功函数回调循环遍历数组,将图像分离到唯一的DOM容器中。这部分工作完美,虽然,现在我需要获得标题。Created_date ',包含起来有点棘手。我可以很容易地输出unix时间戳,但我似乎无法将其转换为所需的输出,如上所述。

谢谢你的帮助。

var imgs = [];
var feed = new Instafeed({
    limit: '12',
    get: 'user',
    userId: XXXXX,
    clientId: 'XXXXXXXXXXXXXXXXXXXX',
    accessToken: 'XXXXX.XXXXX.XXXXX',
    limit: 20,
    resolution: 'standard_resolution',
    template: '{{model.created_time_ago}}<img src="{{image}}"/>',
    filter: function (image) {
        var imageDate = new Date(parseInt(image.created_time * 1000, 10));
        var timeAgo = moment(imageDate).fromNow();
        image.create_time_ago = timeAgo;
        return true;
    },
    success: function (data) {
        // read the feed data and create owr own data struture.
        var images = data.data;
        var result;
        for (i = 0; i < images.length; i++) {
            var image = images[i];
            result = this._makeTemplate(this.options.template, {
                model:       image,
                id:          image.id,
                link:        image.link,
                caption:     image.caption.text,
                created_time:image.caption.created_time,
                image: image.images[this.options.resolution].url
            });
            imgs.push(result);
        }
        //split the feed into divs
        $("#gram1").html(imgs.slice(0, 1));
        $("#gram2").html(imgs.slice(1, 2));
        $("#gram3").html(imgs.slice(2, 3));
 
    }
});
feed.run();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://instafeedjs.com/js/instafeed.min.js"></script>
<div id="gram1"></div>
  
<div id="gram2"></div>
  
<div id="gram3"></div>

我通过在将html插入dom后的成功回调中使用moment.js解决了这个问题。Moment从插入到templates段落中的data属性中获取unix时间戳。

很有魅力!

var imgs = [];
var feed = new Instafeed({
    limit: '12',
    get: 'user',
    userId: 1934632453,
    clientId: 'b4986d7624834f60a58c773bd4ccc5f3',
    accessToken: '1934632453.467ede5.c8d670901ebe4229b293c9ff705810d3',
    limit: 20,
    resolution: 'standard_resolution',
    template: '<p data-unix="{{created_time}}" class="unix-time"></p><img src="{{image}}"/>',
    success: function (data) {
        // read the feed data and create our own data struture.
        var images = data.data;
        var result;
        for (i = 0; i < images.length; i++) {
            var image = images[i];
            result = this._makeTemplate(this.options.template, {
                model:       image,
                id:          image.id,
                link:        image.link,
                caption:     image.caption.text,
                created_time:image.created_time,
                image: image.images[this.options.resolution].url
            });
            imgs.push(result);
        }
        //split the feed into divs
        $("#gram1").html(imgs.slice(0, 1));
        $("#gram2").html(imgs.slice(1, 2));
        $("#gram3").html(imgs.slice(2, 3));
        //convert time to relative time ago.
        $(".unix-time").each(function(){
            var time = moment.unix($(this).attr('data-unix')).fromNow();
            $(this).append(time);
        });
    }
});
feed.run();