如何用更少的Javascript行来表达这一点？

我正在使用一些JS计算自上次发布以来的时间（即“2小时前发布”）：

然后将其包含在每篇文章旁边的索引页上：

var date = 
Date.parse(document.getElementById("postedon").getAttribute("datetime"));
document.getElementById("postedago").innerHTML = ago(date);

以下是HTML：

<time id="{{ post.postedon }}" datetime="{{ post.date | date_to_xmlschema }}">
<span id="{{ post.postedago }}"></span>
</time>

问题是我必须手动设置每个帖子的JS代码，如下所示：

var date = 
Date.parse(document.getElementById("postedon").getAttribute("datetime"));
document.getElementById("postedago").innerHTML = ago(date);

var date = 
Date.parse(document.getElementById("postedon2").getAttribute("datetime"));
document.getElementById("postedago2").innerHTML = ago(date);

var date = 
Date.parse(document.getElementById("postedon3").getAttribute("datetime"));
document.getElementById("postedago3").innerHTML = ago(date);

否则它不会显示所有帖子的时间，只显示一条

我尝试将JS中的元素id设置为front matter参数，但它不起作用（本质上是让Jekyll替换JS文件中的液体标记）：

我试着在js文件的顶部添加前面的破折号，但仍然不起作用（如此处的SO所述：）

也许还有另一种方法我没有想到？

感谢您花时间阅读本文，我真的非常感谢您的帮助

---

PS：在每篇文章的页面上（而不是在包含所有文章的索引页面上）引用timeago脚本实现：

这非常简单，您可以使用一些JS（）就绪

只需使用下面的示例

timeAgo.format（new Date（））-->将输出//“刚才”

---

如果你给它指定日期格式，你会告诉它多少时间以前。

这很简单，你可以使用一些JS（）ready

只需使用下面的示例

timeAgo.format（new Date（））-->将输出//“刚才”

---

如果您将日期格式指定给它，则将指定多少时间之前。

您应该为HTML元素指定一个

类

属性，以便您可以使用

getElementsByClassName（）

在循环中迭代所有元素

HTML:

JS:

const timeElems=document.getElementsByClassName（'postedon'）；
for（设i=0，len=timeElems.length；i

---

现在你不必为每篇文章手动写出JS。类似地，您可以使用

getElementsByTagName（'time'）

，假设这是您使用该标记的唯一位置。

您应该为HTML元素提供一个

class

属性，以便您可以使用

getElementsByCassName（）

在循环中对所有元素进行迭代

HTML:

JS:

const timeElems=document.getElementsByClassName（'postedon'）；
for（设i=0，len=timeElems.length；i

---

现在你不必为每篇文章手动写出JS。同样，您可以使用

getElementsByTagName（'time'）

假设这是您唯一使用该标记的地方。

首先，您的

ago

函数可以简化和减少

然后我将使用以选择器开头的属性

querySelectorAll

获取元素，并使用

.forEach（）

从属性设置

textContent

函数渲染（n，单位）{
返回n+“”+unit+（（n==1）？“”：“s”）+“ago”；
}
常量标签=[“年”、“月”、“日”、“时”、“分”、“秒”]；
常量产品=[1,60,60,24,30,365]
.map（（n，i，a）=>a.slice（0，a.length-i）。reduce（（p，n）=>p*n，1））；
功能日期（日期）{
var seconds=Math.floor（（new Date（）-Date.parse（Date））/1000）；
返回标签。减少（（分辨率、实验室、i）=>{
常数间隔=数学下限（秒/乘积[i]）；
返回res？res:interval>=1？渲染（interval，lab）：“”；
}, "");
}
document.queryselectoral（“[id^=postedon]”）。forEach（el=>
el.querySelector（“#”+el.id.replace（'postedon'，'postedago'））
.textContent=ago（el.getAttribute（“日期时间”））
);
首先，您的
ago
功能可以简化和减少

然后我将使用以选择器开头的属性
querySelectorAll
获取元素，并使用
.forEach（）
从属性设置
textContent


函数渲染（n，单位）{
返回n+“”+unit+（（n==1）？“”：“s”）+“ago”；
}
常量标签=[“年”、“月”、“日”、“时”、“分”、“秒”]；
常量产品=[1,60,60,24,30,365]
.map（（n，i，a）=>a.slice（0，a.length-i）。reduce（（p，n）=>p*n，1））；
功能日期（日期）{
var seconds=Math.floor（（new Date（）-Date.parse（Date））/1000）；
返回标签。减少（（分辨率、实验室、i）=>{
常数间隔=数学下限（秒/乘积[i]）；
返回res？res:interval>=1？渲染（interval，lab）：“”；
}, "");
}
document.queryselectoral（“[id^=postedon]”）。forEach（el=>
el.querySelector（“#”+el.id.replace（'postedon'，'postedago'））
.textContent=ago（el.getAttribute（“日期时间”））
);
另一个如何计算它是多久以前的例子

function ago(date) {
  var units = [
    { name : 'year', ms: 1000 * 60 * 60 * 24 * 30 * 365 },
    { name : 'month', ms: 1000 * 60 * 60 * 24 * 30 },
    { name : 'fortnight', ms : 1000 * 60 * 60 * 24 * 14 }, // yep.. I head that was a thing.
    { name : 'day', ms: 1000 * 60 * 60 * 24 },
    { name : 'hour', ms: 1000 * 60 * 60 },
    { name : 'second', ms: 1000 *60 },
  ];

  var ms = new Date() - date;
  var item = units.find( item => ms / item.ms > 1 );
  if (!item) item = units[ units.length - 1 ]; // if not found, use the last one.
  var value = Math.floor( ms / item.ms );

  return value + " " + item.name + ((value == 1) ? "" : "s") + " ago";
}

另一个如何计算它是多久以前的例子

function ago(date) {
  var units = [
    { name : 'year', ms: 1000 * 60 * 60 * 24 * 30 * 365 },
    { name : 'month', ms: 1000 * 60 * 60 * 24 * 30 },
    { name : 'fortnight', ms : 1000 * 60 * 60 * 24 * 14 }, // yep.. I head that was a thing.
    { name : 'day', ms: 1000 * 60 * 60 * 24 },
    { name : 'hour', ms: 1000 * 60 * 60 },
    { name : 'second', ms: 1000 *60 },
  ];

  var ms = new Date() - date;
  var item = units.find( item => ms / item.ms > 1 );
  if (!item) item = units[ units.length - 1 ]; // if not found, use the last one.
  var value = Math.floor( ms / item.ms );

  return value + " " + item.name + ((value == 1) ? "" : "s") + " ago";
}

看一看时刻谢谢，我会和杰基尔一起测试的！谢谢，我会用杰基尔测试的！这真是一种魅力，非常感谢，我真的很感激！这真是一种魅力，非常感谢，我真的很感激！太棒了，我喜欢！非常感谢。我在控制台中遇到一个错误：
TypeError:this.getAttribute不是函数
@RobertFraktar:Yep，我有一些错误。我认为它们已经修复，尽管我可能设置了错误的
.innerHTML
元素。正在检查…@RobertFraktar:好的，我想我现在正在设置嵌套的
span
。如果它总是
postedon
元素中的第一个元素，那么它实际上会更简单。如果是这样，那么它只是
el.firstElementChild.innerHTML=ago（…
现在没有错误，但它输出“undefined”在每一篇文章中。太棒了，我喜欢它！非常感谢。我在控制台中发现一个错误：
TypeError:this.getAttribute不是一个函数
@RobertFraktar:Yep，我有一些错误。我想它们已经修复了，尽管我可能设置了错误的

var date = 
Date.parse(document.getElementById("{{ post.postedon }}").getAttribute("datetime"));
document.getElementById("{{ post.postedago }}").innerHTML = ago(date);

---
---
//rest of your JavaScript

<time class="postedon" id="{{ post.postedon }}" datetime="{{ post.date | date_to_xmlschema }}">
    <span class="postedago" id="{{ post.postedago }}"></span>
</time>

const timeElems = document.getElementsByClassName('postedon');

for (let i = 0, len = timeElems.length; i < len; i++) {
  let date = Date.parse(timeElems[i].getAttribute("datetime"));
  timeElems[i].firstElementChild.innerHTML = ago(date);
}

function ago(date) {
  var units = [
    { name : 'year', ms: 1000 * 60 * 60 * 24 * 30 * 365 },
    { name : 'month', ms: 1000 * 60 * 60 * 24 * 30 },
    { name : 'fortnight', ms : 1000 * 60 * 60 * 24 * 14 }, // yep.. I head that was a thing.
    { name : 'day', ms: 1000 * 60 * 60 * 24 },
    { name : 'hour', ms: 1000 * 60 * 60 },
    { name : 'second', ms: 1000 *60 },
  ];

  var ms = new Date() - date;
  var item = units.find( item => ms / item.ms > 1 );
  if (!item) item = units[ units.length - 1 ]; // if not found, use the last one.
  var value = Math.floor( ms / item.ms );

  return value + " " + item.name + ((value == 1) ? "" : "s") + " ago";
}