0

使用 instafeedjs 和 moment.js 呈现 instagram 提要并将日期格式化为相对格式（X 天/月/小时/分钟前）。

正如您在下面看到的，成功函数回调通过数组循环以将图像分离到唯一的 DOM 容器中。这部分工作完美，虽然，现在我需要获取“caption.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>

4

1 回答 1

0

在将 html 插入 dom 后，我通过在成功回调中使用 moment.js 解决了这个问题。Moment 正在从插入到模板段落中的数据属性中获取 hte 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();
于 2015-07-22T23:52:49.553 回答