我如何格式化[未来，非流动]日期。 nunjucks？

Question

我正在为本地乐队建立一个带有CMS（Netlify）的网站，他们将在网站上放置未来的演出日期。到目前为止，日期显示为包括时间和时区的非常长的非格式字符串。我正在尝试弄清楚如何将日期格式化更简单（例如，日期，时间）。

我尝试了像Nunjucks-Date这样的插件，但是在这种情况下，我对如何使用插件（和过滤器）有些困惑。

我的仓库： https：//github.com/mollycarloll/serapis-serapis-serapis-earpis-exty-20-2

示例演出条目：

---
layout: gig
venue: Cedar Lake Cellars
date: 2022-05-28
time: 6pm
city: Wright City, MO
---

演出模板：

<h2>{{ venue }}</h2>
<h4>{{ city }} {{ date }} {{ time }}</h4>

config.yml for cms：

  - name: 'gigs'
    label: 'Shows'
    folder: 'src/gigs'
    create: true
    slug: '{{month}}-{{day}}-{{venue}}'
    fields:
    - { label: 'Layout', name: 'layout', widget: 'hidden', default: '_includes/gig.njk' }
    - { label: 'Date', name: 'date', widget: 'date', default: '' }
    - { label: 'Time', name: 'time', widget: 'string', default: '' }
    - { label: 'Venue', name: 'venue', widget: 'string', default: '' }
    - { label: 'City', name: 'city', widget: 'string', default: '' }

感谢您的任何帮助。

Answer 1

虽然user34888304很好，但它无法处理传入值是date（）对象的情况，在下面类似的情况下

{%- for post in collections.posts.reverse() %}
<span class="post-meta">{{ post.data.date | date("LLLL dd, yyyy") }}</span>
<!-- etc -->
{%- endfor %}

，您可能希望更将其编写为./ src/filters /date.js

const {
    DateTime
} = require("luxon");

// Add a friendly date filter to nunjucks.
// Defaults to format of LLLL dd, yyyy unless an alternate is passed as a parameter.
// {{ date | friendlyDate('OPTIONAL FORMAT STRING') }}
// List of supported tokens: https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens

module.exports = (dateObj, format = 'LLLL dd, yyyy') => {
    if (dateObj instanceof Date) {
        return DateTime.fromJSDate(dateObj, {
            zone: 'utc',
            locale: "en"
        }).toFormat(format);
    } else {
        return DateTime.fromISO(dateObj, {
            zone: "utc",
            locale: "en"
        }).toFormat(format);
    }
};

当然不要忘记在.eleventy.js中添加过滤器：

module.exports = function(eleventyConfig) {
  ...
  eleventyConfig.addFilter("date", require("./src/filters/date.js"));
  ... 
};

Answer 2

首先，您应该创建一个过滤器，假设src/filters/date.js具有以下内容：

const { DateTime } = require("luxon");

// Add a friendly date filter to nunjucks.
// Defaults to format of LLLL d, y unless an
// alternate is passed as a parameter.
// {{ date | friendlyDate('OPTIONAL FORMAT STRING') }}
// List of supported tokens: https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens

module.exports = (dateObj, format = 'LLLL d, y') => {
  return DateTime.fromISO(dateObj, { zone: "Europe/Amsterdam", locale: "en" }).toFormat(format);
};

确保您查看Luxon文档以获取详细信息。然后在.eleventy.js中添加过滤器：

module.exports = function(eleventyConfig) {
  ...
  eleventyConfig.addFilter("date", require("./src/filters/date.js"));
  ... 
};

现在您可以在带有默认值{{date}}}的nunjack中使用它，在此示例'llll d，y'或您需要的任何值您的网站上的某个位置{{date | date（'dd。llllyyyy。'）}}}。如果您需要在一个月和每年或日常和每月的某个时候需要，这将非常有用。

您甚至可以创建多种语言过滤器，例如dateen.js和dede.js，如果您有多语言网站，则将各种格式化为自己的语言。

希望这会有所帮助。

编辑：为了使此过滤器工作dateObj应采用ISO 8601格式。