Estoy tratando de formatear un diseño HTML para que no muestre mis elementos de fecha si no son válidos. Tengo una fecha de "Creación" y una fecha de "Actualización", por lo que al menos un campo estará vacío con bastante frecuencia.
Estoy tratando de usar isValid isValid() de luxon dentro de un script en mi diseño para incluir selectivamente la fecha o sobrescribirla. El problema es que ahora no se incluyen todas las fechas, válidas o no válidas. Más allá de lo básico, soy un gran novato en la interfaz, así que estoy seguro de que es algo simple.
Esto es lo que tengo actualmente dentro del encabezado de diseño:
<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>También he intentado abordarlo así:
<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>Estoy bastante seguro de que esto se debe a que aún no entiendo completamente la semántica de los documentos JavaScript y HTML, pero todavía estoy en la etapa en la que no sé lo que no sé.
¡Cualquier ayuda sería muy apreciada!
(Esto debería ser un comentario, pero necesito escribir un poco más).
Acabo de notar la etiqueta de once , así que creo que sé lo que está sucediendo aquí. No estoy muy familiarizado con los once, por lo que esto debe tomarse con pinzas.
En primer lugar, debe distinguir entre lo que sucede cuando eleventy genera el sitio ("backend") y qué secuencia de comandos se ejecuta más tarde en el navegador del visor ("frontend"). Está intentando usar JavaScript ( <script> ) que es "frontend", pero las variables son parte de eleventy, que es el "backend". Y la "frontend" (normalmente) no tiene acceso a ellos.
Por lo tanto, debe escribir un código de back-end para acceder a esas variables. En este caso se trata del manillar del motor de plantilla.
Sin embargo, no puede llamar a métodos como isValid() con handlebars. En su lugar, debe llamar a algún lugar afuera, probablemente donde esté creando los valores de luxon para created y updated . Como dije, no estoy familiarizado con eleventy, por lo que no puedo decirte qué tienes que hacer exactamente.
EDITAR basado en el comentario:
Creo que básicamente tienes que definir nuevas variables, por ejemplo, createdValid y definirlo como created.isValid() . Sin embargo, no estoy seguro de si esto es posible con un archivo yaml, si entendí la documentación correctamente. Creo que la documentación relevante es: https://www.11ty.dev/docs/data-computed/
Y luego puede usar esas nuevas variables en los manillares usando bloques #if . Algo como:
{{#if createdValid}} <p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p> {{/if}}