簡體   English   中英

Instafeedjs moment.js返回時間之前

[英]Instafeedjs moment.js return time ago

使用instafeedjs和moment.js渲染instagram feed並將日期格式化為相對格式(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> 

在將html插入dom之后,Ive通過在成功回調中使用moment.js解決了這一問題。 時刻正在從插入到模板段落中的數據屬性ive獲取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();

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM