在鲁迅中隐藏无效日期

Question

如果日期元素无效，我正在尝试格式化HTML布局以不显示它们。我有一个“创建”日期和一个“更新”日期，所以至少有一个字段经常是空的。

我试图在布局中的脚本中使用鲁迅的isValid()，以便有选择地包含日期或覆盖它。问题是，所有的日期--有效或无效--现在都不包括在内。除了基本知识之外，我还是个新手，所以我相信这是很简单的事情。

下面是我目前在布局头中拥有的内容：

<h1>{{ title }}</h1>

<script type = "text/javascript">
    if (created.isValid() === true) {
        document.write('<p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p>')
    } else {
        document.write("")
    }
</script>

<script type = "text/javascript">
    if (updated.isValid() === true) {
        document.write('<p>Updated: <time datetime="{{ updated | htmlDateString }}">{{ updated | readableDate }}</time></p>')
    } else {
        document.write("")
    }
</script>

我也试过这样对待它：

<script>
created.isValid() ? <p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p> : "";
</script>

<script>
updated.isValid() ? <p>Updated: <time datetime="{{ updated | htmlDateString }}">{{ updated | readableDate }}</time></p> : "";
</script>

我很确定这是由于我还没有完全掌握JavaScript和HTML的语义，但我仍然处于不知道自己不知道的阶段。

任何帮助都将不胜感激！

Answer 1

(这应该是一个评论，但我需要多写一点。)

我刚刚注意到了十一标签，所以我想我知道这里发生了什么。我对这件事不太熟悉，所以这件事应该用一点盐来处理。

首先，您需要在网站由eleventy (“后端”)生成时发生的情况与稍后在查看器的浏览器中运行的脚本(“前端”)之间进行区分。您正在尝试使用JavaScript (<script>)，它是“前端”，但是变量是eleventy的一部分，后者是“后端”。而“前端”(通常)无法访问这些信息。

因此，您需要编写后端代码，以访问这些变量。在本例中，它是模板引擎车把。

但是，不能用手棒调用方法(如isValid() )。相反，您需要调用的是位于外部的某个地方，可能是您为created和updated创建鲁迅值的地方。就像我说的，我不太熟悉，所以我不能告诉你你到底要做什么。

根据评论编辑：

我认为，基本上您必须定义新变量，例如，createdValid，并将其定义为created.isValid()。但是，我不确定yaml文件是否可以这样做，也不确定我是否正确地理解了文档。我相信相关的文档是：https://www.11ty.dev/docs/data-computed/

然后，您可以使用区块在工具栏中使用这些新变量。类似于：

{{#if createdValid}}
  <p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p>
{{/if}}