Instafeedjs moment.js return 时间前
Instafeedjs moment.js return time ago
使用 instafeedjs 和 moment.js 呈现 instagram 提要并将日期格式化为相对格式(X days/months/hours/minutes 前)。
正如您在下面看到的,成功函数回调正在遍历数组以将图像分隔到唯一的 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 后立即在成功回调中使用 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();
使用 instafeedjs 和 moment.js 呈现 instagram 提要并将日期格式化为相对格式(X days/months/hours/minutes 前)。
正如您在下面看到的,成功函数回调正在遍历数组以将图像分隔到唯一的 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 后立即在成功回调中使用 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();