隐藏luxon中的无效日期

Posted 2023-03-06

【中文标题】隐藏luxon中的无效日期

【英文标题】：Hide invalid dates in luxon

【发布时间】：2022-01-13 08:45:16

【问题描述】：

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

我正在尝试在我的布局中的脚本中使用 luxon 的 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 文档的语义，但我仍处于不知道我不知道什么的阶段。

任何帮助将不胜感激！

【问题讨论】：

是的，第二个示例完全错误，对于第一个示例，您没有显示变量 created 和 values 来自哪里。此外， 表明您正在使用某种模板引擎，您没有提及，而且这些通常在脚本中不起作用。最后，远离document.write，尤其是作为初学者。

【参考方案1】：

（这应该是评论，但我需要多写一点。）

我刚刚注意到eleventy 标签，所以我想我知道这里发生了什么。我对十一不是很熟悉，所以应该持保留态度。

首先，您需要区分网站由十一生成（“后端”）和稍后在查看器的浏览器中运行的脚本（“前端”）时发生的情况。您正在尝试使用作为“前端”的 JavaScript (<script>)，但变量是十一的一部分，即“后端”。而“前端”（通常）无法访问这些。

因此您需要编写后端代码来访问这些变量。在这种情况下，它是模板引擎handlebars。

但是，您不能使用把手调用诸如isValid() 之类的方法。相反，您需要调用的是外部某处，可能是您为created 和updated 创建luxon 值的地方。正如我所说，我不熟悉十一，所以我不能告诉你具体要做什么。

---

根据评论编辑：

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

然后您可以使用#if blocks 在车把中使用这些新变量。比如：

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

【讨论】：

感谢您的信息！ created 和 updated 在我的 config.yaml 文件的集合部分中建立，而值存储在每个 mote 的降价文件中。我能够在代码的<p> 部分中提取它们的值，只是显然无法将这些值本身用作isValid() 方法的一部分。有一个带有全局常量的 110.js 文件/其中建立了 luxon htmlDateString 和 readableDate。按照这些行为created 和updated 建立新的全局变量是否有意义？

@jaywhoo 我添加了更多信息。我想我不能再提供帮助了。似乎十一有一个不和谐的服务器来支持。也许在那里尝试一下。